@wavemaker/app-runtime-wm-build 12.0.0-next.45094 → 12.0.0-next.45097

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

@@ -427,6 +427,60 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-box-shadow-lg: 0 1rem 3rem rgba(29, 58, 83, 0.15);
   --wm-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
 }
+@media (prefers-color-scheme: dark) {
+  :root:not(:has(.wm-studio)) {
+    --wm-color-background: #141218;
+    --wm-color-error: #f2b8b5;
+    --wm-color-error-container: #8c1d18;
+    --wm-color-inverse-on-surface: #322f35;
+    --wm-color-inverse-primary: #6750a4;
+    --wm-color-inverse-surface: #e6e0e9;
+    --wm-color-on-background: #e6e0e9;
+    --wm-color-on-error: #601410;
+    --wm-color-on-error-container: #f9dedc;
+    --wm-color-on-primary: #381e72;
+    --wm-color-on-primary-container: #eaddff;
+    --wm-color-on-primary-fixed: #21005d;
+    --wm-color-on-primary-fixed-variant: #4f378b;
+    --wm-color-on-secondary: #332d41;
+    --wm-color-on-secondary-container: #e8def8;
+    --wm-color-on-secondary-fixed: #1d192b;
+    --wm-color-on-secondary-fixed-variant: #4a4458;
+    --wm-color-on-surface: #e6e0e9;
+    --wm-color-on-surface-variant: #cac4d0;
+    --wm-color-on-tertiary: #492532;
+    --wm-color-on-tertiary-container: #ffd8e4;
+    --wm-color-on-tertiary-fixed: #31111d;
+    --wm-color-on-tertiary-fixed-variant: #633b48;
+    --wm-color-on-success: #1d192b;
+    --wm-color-outline: #938f99;
+    --wm-color-outline-variant: #49454f;
+    --wm-color-primary: #d0bcfe;
+    --wm-color-primary-container: #4f378b;
+    --wm-color-primary-fixed: #eaddff;
+    --wm-color-primary-fixed-dim: #d0bcff;
+    --wm-color-scrim: #000000;
+    --wm-color-secondary: #ccc2dc;
+    --wm-color-secondary-container: #4a4458;
+    --wm-color-secondary-fixed: #e8def8;
+    --wm-color-secondary-fixed-dim: #ccc2dc;
+    --wm-color-shadow: #ffffff;
+    --wm-color-surface: #141218;
+    --wm-color-surface-bright: #3b383e;
+    --wm-color-surface-container: #211f26;
+    --wm-color-surface-container-high: #2b2930;
+    --wm-color-surface-container-highest: #36343b;
+    --wm-color-surface-container-low: #1d1b20;
+    --wm-color-surface-container-lowest: #0f0d13;
+    --wm-color-surface-dim: #141218;
+    --wm-color-surface-tint: #d0bcff;
+    --wm-color-surface-variant: #49454f;
+    --wm-color-tertiary: #efb8c8;
+    --wm-color-tertiary-container: #633b48;
+    --wm-color-tertiary-fixed: #ffd8e4;
+    --wm-color-tertiary-fixed-dim: #efb8c8;
+  }
+}
 /*=========
 css variables doesn't support by less functions to generate lighten, darken, fade, etc.
 We are using color-mix function of css variables.
@@ -1727,18 +1781,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-scroll-bar-thumb-radius: 6px;
   --wm-scroll-bar-thumb-hover: var(--wm-color-surface-container-highest);
 }
-:root {
-  --wm-color-primary-50: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-white) 100%);
-  --wm-color-primary-100: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-white) 80%);
-  --wm-color-primary-200: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-white) 70%);
-  --wm-color-primary-300: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-white) 60%);
-  --wm-color-primary-400: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-white) 0%);
-  --wm-color-primary-500: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) 20%);
-  --wm-color-primary-600: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) 30%);
-  --wm-color-primary-700: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) 40%);
-  --wm-color-primary-800: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) 80%);
-  --wm-color-primary-900: color-mix(in srgb, var(--wm-color-primary), var(--wm-color-black) 90%);
-}
 /**--import specified google font url ex:Lexend--**/
 * {
   box-sizing: border-box;
@@ -1759,10 +1801,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   margin: 0;
   padding: 0;
   /** Reuasble style selectors with arguments */
-  /* width */
-  /* Track */
-  /* Handle */
-  /* Handle on hover */
   /* datepicker styles */
   /**--Layout--**/
   /*--Layout styles--*/
@@ -1772,6 +1810,15 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   /* pagination horizontal styles */
   /* Timepicker styles */
   /* toast styles */
+  /* wizard body styles */
+  /* wizard footer styles */
+  /* number wizard styles */
+  /* icon stepper */
+  /* icon stepper inline */
+  /* vertical wizard styles */
+  /* dotted wizard styles */
+  /* classic wizard styles */
+  /* vertical wizard styles */
   /*--bootstrap 5 utilities start--*/
   /* rtl:begin:remove */
   /*--bootstrap 5 utilities end--*/
@@ -1793,34 +1840,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app * {
   outline: 0 !important;
 }
-.wm-app .app-badge {
-  padding: var(--wm-space-0) var(--wm-space-1);
-  border-radius: var(--wm-radius-md);
-  font-family: var(--wm-label-small-font-family);
-  font-size: var(--wm-label-small-font-size);
-  font-weight: var(--wm-label-small-font-weight);
-  line-height: var(--wm-label-small-line-height);
-  letter-spacing: var(--wm-label-small-letter-spacing);
-}
-.wm-app::-webkit-scrollbar,
-.wm-app ::-webkit-scrollbar {
-  width: var(--wm-scroll-bar-width);
-  height: var(--wm-scroll-bar-height);
-}
-.wm-app::-webkit-scrollbar-track,
-.wm-app ::-webkit-scrollbar-track {
-  background: var(--wm-scroll-bar-track-bg);
-  border-radius: var(--wm-scroll-bar-track-radius);
-}
-.wm-app::-webkit-scrollbar-thumb,
-.wm-app ::-webkit-scrollbar-thumb {
-  background: var(--wm-scroll-bar-thumb-bg);
-  border-radius: var(--wm-scroll-bar-thumb-radius);
-}
-.wm-app::-webkit-scrollbar-thumb:hover,
-.wm-app ::-webkit-scrollbar-thumb:hover {
-  background: var(--wm-scroll-bar-thumb-hover);
-}
 .wm-app .fa,
 .wm-app .fa-stack,
 .wm-app .wi,
@@ -10955,69 +10974,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   z-index: 9999;
   display: none;
 }
-.wm-app .app-calendar {
-  display: inline-block;
-  position: relative;
-}
-.wm-app .app-calendar .fc {
-  width: inherit;
-}
-.wm-app .app-calendar .well {
-  padding: 0;
-  margin-bottom: 0;
-  border: none;
-}
-.wm-app .app-calendar .well table thead tr th button.float-left,
-.wm-app .app-calendar .well table thead tr th button.float-right {
-  font-size: 21px;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.wm-app .app-calendar .fc .fc-view-container {
-  background: #fff;
-}
-.wm-app .app-calendar .fc table {
-  background-color: transparent;
-}
-.wm-app .app-calendar .fc th {
-  text-align: center;
-}
-.wm-app .app-calendar .fc th:not(.fc-axis) {
-  padding: 1em 0;
-  text-align: center;
-}
-.wm-app .app-calendar .fc .fc-event {
-  font-size: 12px;
-  border-radius: 0;
-  text-decoration: none;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  padding: 2px 4px;
-  background-color: #fff;
-}
-.wm-app .app-calendar .fc .fc-toolbar {
-  margin-bottom: 0.25em;
-  padding: 0 0.5em;
-}
-.wm-app .app-calendar .fc .fc-toolbar .fc-button {
-  border-radius: 0;
-  box-shadow: none;
-  border-color: rgba(0, 0, 0, 0.1);
-  text-shadow: 0;
-}
-.wm-app .app-calendar .fc .fc-toolbar h2 {
-  font-size: 1.1rem;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.wm-app .app-calendar .fc .fc-toolbar > * > * {
-  margin: 0;
-}
-.wm-app .app-calendar .fc .fc-toolbar .fc-today-button {
-  margin-left: 0.75em;
-}
-.wm-app .app-calendar .fc .fc-divider {
-  margin: 0;
-}
 .wm-app .app-login {
   position: relative;
   overflow: auto;
@@ -11116,16 +11072,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   font-weight: 700;
   font-size: 24pt;
 }
-.wm-app .app-carousel .carousel.slide {
-  height: inherit;
-  width: inherit;
-}
-.wm-app .app-carousel .carousel.slide .carousel-control .icon-next,
-.wm-app .app-carousel .carousel.slide .carousel-control .icon-prev {
-  margin-top: -30%;
-  font-size: 70px;
-  cursor: pointer;
-}
 .wm-app .app-number.form-control.invalid {
   border-color: transparent;
   background-image: none;
@@ -11136,29 +11082,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   width: 100%;
   height: 100%;
 }
-@media only screen and (max-width: 767px) and (min-width: 299px) {
-  .wm-app .app-calendar .fc .fc-event {
-    background-color: #4caf50;
-    opacity: 0.8;
-    color: #fff;
-    border-radius: 4px;
-  }
-  .wm-app .app-calendar .fc .fc-toolbar .fc-toolbar-chunk {
-    display: flex;
-  }
-  .wm-app .app-calendar .fc .fc-toolbar .fc-toolbar-chunk .fc-button {
-    font-size: 0.9em;
-  }
-  .wm-app .app-calendar .fc .fc-toolbar .fc-toolbar-chunk .fc-toolbar-title {
-    font-size: 0.7rem;
-    text-align: center;
-    font-weight: 700;
-    padding: 0.1rem;
-  }
-  .wm-app .app-calendar .fc .fc-toolbar > * > :not(:first-child) {
-    margin-left: 0.1em;
-  }
-}
 .wm-app .app-linear-layout.app-linear-layout-direction-column-reverse.app-linear-layout-spacing-0 > .app-linear-layout-item,
 .wm-app .app-linear-layout.app-linear-layout-direction-column.app-linear-layout-spacing-0 > .app-linear-layout-item,
 .wm-app .app-linear-layout.app-linear-layout-direction-row-reverse.app-linear-layout-spacing-0 > .app-linear-layout-item,
@@ -12823,63 +12746,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
     transform: translate3d(0, 0, 0);
   }
 }
-.wm-app .app-carousel {
-  position: relative;
-  overflow: hidden;
-}
-.wm-app .app-carousel div.carousel-inner {
-  height: 100%;
-  white-space: nowrap;
-}
-.wm-app .app-carousel div.carousel-inner .app-carousel-item {
-  display: inline-block;
-  position: absolute;
-  width: 100%;
-}
-.wm-app .app-carousel div.carousel-inner .app-carousel-item.item {
-  overflow: hidden;
-  height: 100%;
-  display: inline-block;
-  position: absolute;
-  width: 100%;
-  transition: none;
-}
-.wm-app .app-carousel div.carousel-inner .app-carousel-item.item img {
-  width: 100%;
-}
-.wm-app .app-carousel div.carousel-inner .app-carousel-item.item.left-item {
-  left: -100%;
-}
-.wm-app .app-carousel div.carousel-inner .app-carousel-item.item.right-item {
-  left: 100%;
-}
-.wm-app .app-carousel .carousel {
-  height: 100%;
-}
-.wm-app .app-carousel carousel.hide-both .carousel-control,
-.wm-app .app-carousel carousel.hide-both .carousel-indicators,
-.wm-app .app-carousel carousel.hide-indicators .carousel-indicators,
-.wm-app .app-carousel carousel.hide-navs .carousel-control {
-  display: none;
-}
-.wm-app .app-carousel .carousel-control .wi-chevron-left,
-.wm-app .app-carousel .carousel-control .wi-chevron-right {
-  position: absolute;
-  top: 50%;
-  z-index: 5;
-  display: inline-block;
-  margin-top: -10px;
-  font-size: 32pt;
-}
-.wm-app .app-carousel .carousel-control .wi-chevron-right {
-  right: 50%;
-}
-.wm-app .app-carousel .carousel-control .wi-chevron-left {
-  left: 50%;
-}
-.wm-app .app-carousel .carousel-indicators li {
-  border-color: #ccc !important;
-}
 .wm-app .app-template.app-page .app-header {
   height: 6em;
   text-align: center;
@@ -13185,6 +13051,15 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   background: var(--wm-badge-background);
   border-radius: var(--wm-badge-radius);
 }
+.wm-app .app-badge {
+  padding: var(--wm-space-0) var(--wm-space-1);
+  border-radius: var(--wm-radius-md);
+  font-family: var(--wm-label-small-font-family);
+  font-size: var(--wm-label-small-font-size);
+  font-weight: var(--wm-label-small-font-weight);
+  line-height: var(--wm-label-small-line-height);
+  letter-spacing: var(--wm-label-small-letter-spacing);
+}
 .wm-app .btn-primary .badge {
   --wm-badge-color: var(--wm-badge-primary);
   --wm-badge-background: var(--wm-badge-primary-background);
@@ -13773,7 +13648,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   background: var(--wm-panel-background);
   border-radius: var(--wm-panel-radius);
   box-shadow: var(--wm-panel-shadow);
-  --wm-grid-layout-column-padding: var(--wm-space-0);
 }
 .wm-app .app-panel > .panel-heading,
 .wm-app .panel > .panel-heading {
@@ -13854,6 +13728,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   height: 100%;
   padding: var(--wm-panel-content-padding);
 }
+.wm-app .app-panel > .panel-content > .panel-body .app-grid-layout,
+.wm-app .panel > .panel-content > .panel-body .app-grid-layout {
+  padding: 0;
+}
 .wm-app .app-panel > .panel-content > .panel-help-message,
 .wm-app .panel > .panel-content > .panel-help-message {
   overflow: auto;
@@ -18760,6 +18638,380 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-popover.left {
   margin-left: - calc(var(--wm-popover-gap) * -1);
 }
+.wm-app .app-wizard {
+  position: relative;
+  box-shadow: var(--wm-wizard-shadow);
+  background: var(--wm-wizard-background);
+  border-radius: var(--wm-wizard-radius);
+}
+.wm-app .app-wizard .app-wizard-heading {
+  position: relative;
+  width: 100%;
+  padding-top: var(--wm-wizard-heading-padding);
+}
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+}
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step {
+  position: relative;
+  flex: 1;
+}
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step:not(:first-of-type)::before {
+  background: var(--wm-wizard-stepper-step-indicator-border);
+  position: absolute;
+  content: "";
+  transform: translateY(var(--wm-app-wizard-stepper-step-indicator-transform-y));
+  height: var(--wm-wizard-stepper-step-indicator-border-height);
+  left: calc(-50% + var(--wm-wizard-stepper-step-indicator-gap));
+  right: calc(50% + var(--wm-wizard-stepper-step-indicator-gap));
+}
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  cursor: pointer;
+  gap: var(--wm-wizard-stepper-step-title-gap);
+}
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .wizard-step-number {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--wm-wizard-stepper-step-width);
+  height: var(--wm-wizard-stepper-step-height);
+  border-radius: var(--wm-wizard-stepper-step-radius);
+  background: var(--wm-wizard-stepper-step-background);
+}
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .wizard-step-number .count {
+  color: var(--wm-wizard-stepper-step-count-color);
+  font-size: var(--wm-wizard-stepper-step-count-font-size);
+  font-weight: var(--wm-wizard-stepper-step-count-font-weight);
+  font-family: var(--wm-wizard-stepper-step-count-font-family);
+  line-height: var(--wm-wizard-stepper-step-count-line-height);
+}
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper .step-title,
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper > span {
+  font-size: var(--wm-wizard-stepper-step-title-font-size);
+  font-weight: var(--wm-wizard-stepper-step-title-font-weight);
+  font-family: var(--wm-wizard-stepper-step-title-font-family);
+  color: var(--wm-wizard-stepper-step-title-color);
+  line-height: var(--wm-wizard-stepper-step-title-line-height);
+}
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.current > a .wizard-step-number {
+  background: var(--wm-wizard-stepper-step-current-background);
+}
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.active > a .wizard-step-number {
+  background: var(--wm-wizard-stepper-step-active-background);
+}
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.disabled {
+  opacity: var(--wm-wizard-stepper-step-disabled-background);
+}
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.disabled > a,
+.wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step.disabled > a {
+  cursor: default;
+}
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.current > a .wizard-step-number,
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.active > a .wizard-step-number {
+  opacity: 1;
+}
+.wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .wizard-step-number i {
+  color: var(--wm-wizard-stepper-step-icon-color);
+  font-size: var(--wm-wizard-stepper-step-icon-size);
+}
+.wm-app .app-wizard .app-wizard-body {
+  padding: var(--wm-wizard-stepper-body-padding);
+}
+.wm-app .app-wizard .app-wizard-body .app-wizard-step-content {
+  font-family: var(--wm-wizard-stepper-body-font-family);
+  font-size: var(--wm-wizard-stepper-body-font-size);
+  font-weight: var(--wm-wizard-stepper-body-font-weight);
+  line-height: var(--wm-wizard-stepper-body-line-height);
+  letter-spacing: var(--wm-wizard-stepper-body-letter-spacing);
+  color: var(--wm-wizard-stepper-body-color);
+}
+.wm-app .app-wizard .app-wizard-body .app-wizard-step-content {
+  display: none;
+  position: relative;
+  min-height: var(--wm-wizard-step-content-height);
+  height: 100%;
+}
+.wm-app .app-wizard .app-wizard-body .app-wizard-step-content.current {
+  display: block;
+}
+.wm-app .app-wizard .app-wizard-actions {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--wm-wizard-stepper-footer-padding);
+  border-top: var(--wm-wizard-stepper-footer-border-width) var(--wm-wizard-stepper-footer-border-style) var(--wm-wizard-stepper-footer-border);
+}
+.wm-app .app-wizard .app-wizard-actions .app-wizard-actions-right {
+  display: flex;
+  align-items: center;
+  gap: var(--wm-wizard-stepper-footer-actions-gap);
+  justify-content: flex-end;
+  width: 100%;
+}
+.wm-app .app-wizard .app-wizard-actions.left .app-wizard-actions-right {
+  justify-content: flex-start;
+}
+.wm-app .app-wizard .app-wizard-actions .app-wizard-actions-right .btn + .btn {
+  margin: unset;
+}
+.wm-app .app-wizard.number .app-wizard-heading .app-wizard-steps > .app-wizard-step.current > a .wizard-step-number {
+  --wm-wizard-stepper-step-current-background: var(--wm-wizard-number-stepper-step-current-background);
+}
+.wm-app .app-wizard.number .app-wizard-heading .app-wizard-steps > .app-wizard-step.active > a .wizard-step-number {
+  --wm-wizard-stepper-step-active-background: var(--wm-wizard-number-stepper-step-active-background);
+}
+.wm-app .app-wizard.number .app-wizard-heading .app-wizard-steps > .app-wizard-step.disabled {
+  --wm-wizard-stepper-step-disabled-background: var(--wm-wizard-number-stepper-step-disabled-background);
+}
+.wm-app .app-wizard.iconstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.current > a .wizard-step-number {
+  --wm-wizard-stepper-step-current-background: var(--wm-wizard-icon-stepper-step-current-background);
+}
+.wm-app .app-wizard.iconstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.active > a .wizard-step-number {
+  --wm-wizard-stepper-step-active-background: var(--wm-wizard-icon-stepper-step-active-background);
+}
+.wm-app .app-wizard.iconstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.disabled {
+  --wm-wizard-stepper-step-disabled-background: var(--wm-wizard-icon-stepper-step-disabled-background);
+}
+.wm-app .app-wizard.iconstepper.text-inline:not(.vertical) {
+  padding-top: var(--wm-wizard-icon-stepper-inline-padding-top);
+}
+.wm-app .app-wizard.iconstepper.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper,
+.wm-app .app-wizard.dottedstepper.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+.wm-app .app-wizard.iconstepper.vertical.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a,
+.wm-app .app-wizard.dottedstepper.vertical.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a {
+  align-items: baseline;
+}
+.wm-app .app-wizard.iconstepper.vertical.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper {
+  align-items: flex-start;
+  gap: var(--wm-wizard-vertical-icon-stepper-inline-title-wrapper-gap);
+}
+.wm-app .app-wizard.vertical.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step:not(:last-of-type)::before {
+  top: 10px;
+}
+.wm-app .app-wizard.iconstepper.text-inline.vertical {
+  padding-top: unset;
+}
+.wm-app .app-wizard.vertical .app-wizard-heading {
+  padding: var(--wm-wizard-vertical-heading-padding);
+}
+.wm-app .app-wizard.vertical .app-wizard-body {
+  padding-top: var(--wm-wizard-vertical-body-padding);
+}
+.wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps {
+  flex-direction: column;
+  align-items: unset;
+  justify-content: flex-start;
+  gap: var(--wm-wizard-vertical-stepper-step-gap);
+}
+.wm-app .app-wizard.dottedstepper.text-inline {
+  padding-top: var(--wm-wizard-dotted-stepper-inline-padding);
+}
+.wm-app .app-wizard.dottedstepper.text-inline.vertical {
+  padding-top: unset;
+}
+.wm-app .app-wizard.dottedstepper.text-inline.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper {
+  align-items: flex-start;
+  gap: var(--wm-wizard-vertical-dotted-stepper-inline-title-wrapper-gap);
+  position: relative;
+  top: 6px;
+}
+.wm-app .app-wizard.iconstepper.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper span:not(.step-title) {
+  position: absolute;
+  top: -64px;
+}
+.wm-app .app-wizard.vertical.iconstepper.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper span:not(.step-title),
+.wm-app .app-wizard.vertical.dottedstepper.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper span:not(.step-title) {
+  top: unset;
+  position: unset;
+}
+.wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .wizard-step-number {
+  width: var(--wm-wizard-dotted-stepper-step-width);
+  height: var(--wm-wizard-dotted-stepper-step-height);
+}
+.wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.active > a .wizard-step-number {
+  background: unset;
+}
+.wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.current > a .wizard-step-number .app-icon {
+  --wm-wizard-stepper-step-icon-color: var(--wm-wizard-dotted-stepper-step-current-icon-color);
+  --wm-wizard-stepper-step-icon-size: var(--wm-wizard-dotted-stepper-step-current-icon-size);
+}
+.wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.active > a .wizard-step-number .app-icon {
+  --wm-wizard-stepper-step-icon-color: var(--wm-wizard-dotted-stepper-step-active-icon-color);
+  --wm-wizard-stepper-step-icon-size: var(--wm-wizard-dotted-stepper-step-active-icon-size);
+}
+.wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.disabled {
+  --wm-wizard-stepper-step-disabled-background: var(--wm-wizard-dotted-stepper-step-disabled-background);
+}
+.wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.current > a .wizard-step-number {
+  --wm-wizard-stepper-step-background: var(--wm-wizard-dotted-stepper-step-current-background);
+}
+.wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.active > a .wizard-step-number {
+  --wm-wizard-stepper-step-background: var(--wm-wizard-dotted-stepper-step-active-background);
+}
+.wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.current:not(:last-of-type) > a .wizard-step-number .app-icon {
+  display: none;
+}
+.wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step:not(:first-of-type)::before {
+  transform: translateY(3px);
+  right: calc(50% + var(--wm-wizard-dotted-stepper-step-indicator-gap));
+  left: calc(-50% + var(--wm-wizard-dotted-stepper-step-indicator-gap));
+  background: var(--wm-wizard-dotted-stepper-step-indicator-border);
+  height: var(--wm-wizard-dotted-stepper-step-indicator-border-height);
+}
+.wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.current:last-of-type > a .wizard-step-number:has(.app-icon) {
+  visibility: hidden;
+}
+.wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.current:last-of-type > a .wizard-step-number .app-icon {
+  visibility: visible;
+}
+.wm-app .app-wizard.dottedstepper.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper span:not(.step-title) {
+  top: -42px;
+}
+.wm-app .app-wizard.dottedstepper.app-wizard.vertical .app-wizard-heading .app-wizard-steps {
+  gap: var(--wm-wizard-vertical-dotted-stepper-step-gap);
+}
+.wm-app .app-wizard.dottedstepper.app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step {
+  min-height: var(--wm-wizard-vertical-dotted-stepper-step-height);
+}
+.wm-app .app-wizard.dottedstepper.app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step::before {
+  transform: translate(var(--wm-wizard-vertical-dotted-stepper-step-transform-x), var(--wm-wizard-vertical-dotted-stepper-step-transform-y));
+  top: var(--wm-wizard-vertical-dotted-stepper-step-top-offset-default);
+}
+.wm-app .app-wizard.dottedstepper.app-wizard.vertical.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step::before {
+  top: var(--wm-wizard-vertical-dotted-stepper-step-top-offset-inline);
+}
+.wm-app .app-wizard.classic .app-wizard-heading {
+  padding: var(--wm-wizard-classic-wizard-heading-padding);
+}
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps {
+  gap: var(--wm-wizard-classic-wizard-stepper-steps-gap);
+}
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step::after,
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step::before {
+  display: none;
+}
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step > a {
+  gap: unset;
+  width: 100%;
+}
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step > a .wizard-step-number {
+  display: none;
+}
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step > a .title-wrapper {
+  position: relative;
+  cursor: default;
+  padding: var(--wm-wizard-classic-wizard-title-wrapper-padding);
+  background: var(--wm-wizard-classic-wizard-title-wrapper-background);
+  user-select: none;
+  transition: background 0.2s ease;
+  width: 100%;
+}
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.current > a .title-wrapper {
+  background: var(--wm-wizard-classic-wizard-title-wrapper-current-background);
+}
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.current > a .title-wrapper .step-title {
+  --wm-wizard-stepper-step-title-color: var(--wm-wizard-classic-wizard-title-wrapper-current-color);
+}
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.active > a .title-wrapper {
+  background: var(--wm-wizard-classic-wizard-title-wrapper-active-background);
+}
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.active > a .title-wrapper .step-title {
+  --wm-wizard-stepper-step-title-color: var(--wm-wizard-classic-wizard-title-wrapper-active-color);
+}
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.disabled {
+  opacity: unset;
+}
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.disabled > a .title-wrapper .step-title {
+  opacity: var(--wm-wizard-classic-wizard-step-title-disabled-color);
+}
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.current > a .title-wrapper::after {
+  border-left: var(--wm-wizard-classic-wizard-title-wrapper-border-left) var(--wm-wizard-classic-wizard-title-wrapper-border-style) var(--wm-wizard-classic-wizard-title-wrapper-current-background);
+}
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.active > a .title-wrapper::after {
+  border-left: var(--wm-wizard-classic-wizard-title-wrapper-border-left) var(--wm-wizard-classic-wizard-title-wrapper-border-style) var(--wm-wizard-classic-wizard-title-wrapper-active-background);
+}
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step > a .title-wrapper::before,
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step > a .title-wrapper::after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  right: -17px;
+  width: 0;
+  height: 0;
+  border-top: var(--wm-wizard-classic-wizard-title-wrapper-border-top-size) var(--wm-wizard-classic-wizard-title-wrapper-border-style) transparent;
+  border-bottom: var(--wm-wizard-classic-wizard-title-wrapper-border-bottom-size) var(--wm-wizard-classic-wizard-title-wrapper-border-style) transparent;
+  border-left: var(--wm-wizard-classic-wizard-title-wrapper-border-left) var(--wm-wizard-classic-wizard-title-wrapper-border-style) var(--wm-wizard-classic-wizard-title-wrapper-background);
+  z-index: 2;
+  transition: border-color 0.2s ease;
+}
+.wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step > a .title-wrapper::before {
+  right: auto;
+  left: 0;
+  border-left: var(--wm-wizard-classic-wizard-title-wrapper-border-left) var(--wm-wizard-classic-wizard-title-wrapper-border-style) var(--wm-wizard-classic-wizard-title-border-white-color);
+  z-index: 0;
+}
+.wm-app .app-wizard.classic .app-wizard-steps .app-wizard-step:first-child .title-wrapper {
+  border-top-left-radius: var(--wm-wizard-classic-wizard-title-wrapper-border-radius);
+  border-bottom-left-radius: var(--wm-wizard-classic-wizard-title-wrapper-border-radius);
+}
+.wm-app .app-wizard.classic .app-wizard-steps .app-wizard-step:last-child .title-wrapper {
+  border-top-right-radius: var(--wm-wizard-classic-wizard-title-wrapper-border-radius);
+  border-bottom-right-radius: var(--wm-wizard-classic-wizard-title-wrapper-border-radius);
+  margin: unset;
+}
+.wm-app .app-wizard.classic .title-wrapper .step-title {
+  position: relative;
+}
+.wm-app .app-wizard.classic .app-wizard-steps .app-wizard-step:first-child .title-wrapper::before {
+  border: none !important;
+}
+.wm-app .app-wizard.classic .app-wizard-steps .app-wizard-step:last-child .title-wrapper::after {
+  border: none !important;
+}
+.wm-app .app-wizard.vertical {
+  display: grid;
+  grid-template-columns: var(--wm-wizard-vertical-grid-columns);
+}
+.wm-app .app-wizard.vertical .app-wizard-heading {
+  border-right: var(--wm-wizard-vertical-heading-border-width) var(--wm-wizard-vertical-heading-border-style) var(--wm-wizard-vertical-heading-border);
+}
+.wm-app .app-wizard.vertical .app-wizard-actions {
+  grid-column: 1 / -1;
+}
+.wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step {
+  position: relative;
+}
+.wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step:not(:last-of-type)::before {
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: var(--wm-wizard-vertical-stepper-step-indicator-border-width);
+  background: var(--wm-wizard-vertical-stepper-step-indicator-background-border);
+  left: unset;
+  right: unset;
+  top: calc(100% - 35%);
+  transform: translate(var(--wm-wizard-vertical-stepper-step-indicator-transform-x), var(--wm-wizard-vertical-stepper-step-indicator-transform-y));
+}
+.wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step.current::before {
+  opacity: var(--wm-wizard-vertical-stepper-step-disabled-background);
+}
+.wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step:last-of-type::before {
+  display: none;
+}
+.wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step > a {
+  flex-direction: row;
+  justify-content: flex-start;
+}
 .wm-app .animated {
   -webkit-animation-duration: 1s;
   animation-duration: 1s;