npm - @softheon/armature - Versions diffs - 17.17.1 → 17.18.0 - Mend

@softheon/armature 17.17.1 → 17.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

package/assets/styles/sof-styles.scss CHANGED Viewed

@@ -1,3488 +1,64 @@
-@use "@angular/material" as mat;
-@import "./arm-theme.scss";
-@import "./utility";
-@import "./variables";
-@include mat.core();
-// Theme pallets
-$main-theme: mat.define-light-theme((color: (primary: mat.define-palette($arm-primary),
-      accent: mat.define-palette($arm-accent)),
-      typography: mat.define-typography-config(),
-      density: 0));
-$main-theme-dark: mat.define-dark-theme((color: (primary: mat.define-palette($arm-primary),
-      accent: mat.define-palette($arm-accent)),
-      typography: mat.define-typography-config(),
-      density: 0));
-body {
-  letter-spacing: 0px;
-  font-family: "Poppins", sans-serif !important;
-  font-size: 14px;
-  @include mat.all-component-themes($main-theme);
-  margin: 0 !important;
-}
-.merriweather {
-  font-family: "Merriweather", serif !important;
-}
-.poppins {
-  font-family: "Poppins", sans-serif !important;
-}
-.h1,
-[h1],
-h1 {
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 34px;
-  line-height: 48px;
-  letter-spacing: normal;
-  margin: 0px;
-  padding: 0px;
-  @media only screen and (max-width: $screen-sm-end) {
-    font-size: 28px;
-  }
-}
-.h2,
-[h2],
-h2 {
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 24px;
-  line-height: 33px;
-  letter-spacing: normal;
-  margin: 0px;
-  padding: 0px;
-  @media only screen and (max-width: $screen-sm-end) {
-    font-size: 24px;
-  }
-}
-.h3,
-[h3],
-h3 {
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 20px;
-  line-height: 28px;
-  letter-spacing: normal;
-  margin: 0px;
-  padding: 0px;
-  @media only screen and (max-width: $screen-sm-end) {
-    font-size: 20px;
-  }
-}
-.h4,
-[h4],
-h4 {
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 18px;
-  line-height: 27px;
-  letter-spacing: normal;
-  margin: 0px;
-  padding: 0px;
-  @media only screen and (max-width: $screen-sm-end) {
-    font-size: 18px;
-  }
-}
-.body1 {
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 24px;
-  letter-spacing: normal;
-  // this does nothing ...
-  @media only screen and (max-width: $screen-sm-end) {
-    font-size: 16px;
-  }
-}
-.body2 {
-  font-family: "Poppins", sans-serif;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 21px;
-  letter-spacing: normal;
-  @media only screen and (max-width: $screen-sm-end) {
-    font-size: 16px;
-  }
-}
-mat-form-field {
-  &.body1 {
-    font-family: "Poppins", sans-serif !important;
-    font-style: normal !important;
-    font-weight: normal !important;
-    font-size: 16px !important;
-    line-height: 24px !important;
-    letter-spacing: normal !important;
-    @media only screen and (max-width: $screen-sm-end) {
-      font-size: 16px !important;
-    }
-  }
-  &.body2 {
-    font-family: "Poppins", sans-serif;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 14px;
-    line-height: 21px;
-    letter-spacing: normal;
-    @media only screen and (max-width: $screen-sm-end) {
-      font-size: 16px;
-    }
-  }
-}
-.ls-half {
-  letter-spacing: 0.5px !important;
-}
-.ls-quarter {
-  letter-spacing: 0.25px !important;
-}
-.fw-500 {
-  font-weight: 500 !important;
-}
-.fw-600 {
-  font-weight: 600 !important;
-}
-.color-primary {
-  color: mat.get-color-from-palette($arm-primary, 500);
-}
-.color-accent {
-  color: mat.get-color-from-palette($arm-accent, 500);
-}
-.color-warn {
-  color: mat.get-color-from-palette($arm-warn, 500);
-}
-.color-info {
-  color: mat.get-color-from-palette($arm-info, 500);
-}
-.color-success {
-  color: mat.get-color-from-palette($arm-success, 500);
-}
-.color-error {
-  color: mat.get-color-from-palette($arm-error, 900);
-}
-.color-neutral {
-  color: mat.get-color-from-palette($arm-neutral, 500);
-}
-.full-width {
-  width: 100% !important;
-}
-.delete-icon {
-  cursor: pointer;
-  font-size: 1.5em;
-  color: mat.get-color-from-palette($arm-warn, 500);
-}
-.tooltip {
-  cursor: pointer;
-}
-.relative {
-  position: relative;
-}
-.left-align {
-  text-align: left;
-}
-.center-align {
-  text-align: center;
-}
-mat-button-toggle-group {
-  &.sof-toggle-group {
-    height: 48px !important;
-    &.mat-button-toggle-group.mat-button-toggle-group-appearance-standard {
-      border: none !important;
-      border-radius: 0px !important;
-    }
-    &.full-width {
-      .toggle-left {
-        width: 100% !important;
-      }
-      .toggle-middle {
-        width: 100% !important;
-      }
-      .toggle-right {
-        width: 100% !important;
-      }
-    }
-    .mat-button-toggle-label-content {
-      text-transform: uppercase !important;
-      font-family: "Poppins" !important;
-      font-style: normal !important;
-      font-weight: 600 !important;
-      font-size: 16px !important;
-      line-height: 24px !important;
-      letter-spacing: 0.05em !important;
-      text-align: center !important;
-      color: black !important;
-      // remove selected check indicator
-      .mat-pseudo-checkbox {
-        display: none !important;
-      }
-    }
-    .mat-button-toggle-button {
-      height: 100% !important;
-    }
-    .mat-button-toggle-checked {
-      background-color: mat.get-color-from-palette($arm-primary, 100) !important;
-    }
-    .toggle-left {
-      border-top: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
-      border-bottom: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
-      border-left: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
-      border-right: 1px solid mat.get-color-from-palette($arm-primary, 500) !important;
-      border-radius: 6px 0px 0px 6px !important;
-      width: 120px !important;
-    }
-    .toggle-middle {
-      border-top: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
-      border-bottom: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
-      border-left: 1px solid mat.get-color-from-palette($arm-primary, 500) !important;
-      border-right: 1px solid mat.get-color-from-palette($arm-primary, 500) !important;
-      border-radius: 0px 0px 0px 0px !important;
-      width: 120px !important;
-    }
-    .toggle-right {
-      border-top: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
-      border-bottom: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
-      border-left: 1px solid mat.get-color-from-palette($arm-primary, 500) !important;
-      border-right: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
-      border-radius: 0px 6px 6px 0px !important;
-      width: 120px !important;
-    }
-    .mat-button-toggle-disabled {
-      &.mat-button-toggle-checked {
-        background-color: mat.get-color-from-palette($arm-neutral, 200) !important;
-      }
-      &.toggle-left {
-        border-top: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
-        border-bottom: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
-        border-left: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
-        border-right: 1px solid mat.get-color-from-palette($arm-neutral, 400) !important;
-        border-radius: 6px 0px 0px 6px !important;
-      }
-      &.toggle-middle {
-        border-top: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
-        border-bottom: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
-        border-left: 1px solid mat.get-color-from-palette($arm-neutral, 400) !important;
-        border-right: 1px solid mat.get-color-from-palette($arm-neutral, 400) !important;
-        border-radius: 0px 0px 0px 0px !important;
-      }
-      &.toggle-right {
-        border-top: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
-        border-bottom: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
-        border-left: 1px solid mat.get-color-from-palette($arm-neutral, 400) !important;
-        border-right: 2px solid mat.get-color-from-palette($arm-neutral, 400) !important;
-        border-radius: 0px 6px 6px 0px !important;
-      }
-    }
-  }
-  &.sof-toggle-group[size="small"] {
-    height: 36px !important;
-  }
-  &.sof-toggle-group[size="medium"] {
-    height: 48px !important;
-  }
-  &.sof-toggle-group[size="large"] {
-    height: 56px !important;
-  }
-}
-/** Material Overrides */
-.sof-dialog-container {
-  padding: 40px;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-.mat-mdc-dialog-actions {
-  padding: 0px !important;
-}
-.sof-radio-card {
-  flex-direction: row !important;
-  box-sizing: border-box;
-  display: flex !important;
-  align-items: baseline;
-  background: #ffffff;
-  border-radius: 10px !important;
-  padding: 16px;
-  min-height: 152px;
-}
-// button colors 'accent', 'info', 'success', 'warning' removed from documentation, not to be used 12/1/23 per design ...
-// button's icon color is inherited from the button's color
-button.mat-mdc-button {
-  --mat-mdc-button-persistent-ripple-color: none !important;
-  --mdc-text-button-label-text-color: none !important;
-  --mat-text-button-ripple-color: rgba(0, 0, 0, 0.05) !important;
-  &.sof-button {
-    padding: 0px 24px !important;
-    height: 48px !important;
-    border-radius: 6px !important;
-    font-family: Poppins !important;
-    font-style: normal !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    line-height: 24px !important;
-    letter-spacing: 0.05em !important;
-    text-transform: uppercase !important;
-    &.fixed-width {
-      width: 200px !important; // Use this is to match specific sizing
-    }
-    &.full-width {
-      width: 100% !important; // Use this is button width will take size of flex percentage
-    }
-    &:enabled {
-      &.mat-primary {
-        color: mat.get-color-from-palette($arm-primary, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-primary, 50);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-accent {
-        color: mat.get-color-from-palette($arm-accent, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-accent, 50);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-warn {
-        color: mat.get-color-from-palette($arm-warn, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-warn, 50);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-success {
-        color: mat.get-color-from-palette($arm-success, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-success, 50);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-error {
-        color: mat.get-color-from-palette($arm-error, 900);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-error, 50);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-info {
-        color: mat.get-color-from-palette($arm-info, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-info, 50);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-neutral {
-        color: mat.get-color-from-palette($arm-neutral, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-neutral, 50);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-    }
-    &:disabled {
-      color: rgba(0, 0, 0, 0.6) !important;
-      opacity: 1 !important;
-    }
-  }
-  &.sof-button[size="small"] {
-    height: 36px !important;
-    i {
-      font-size: 1em !important;
-    }
-  }
-  &.sof-button[size="medium"] {
-    height: 48px !important;
-    i {
-      font-size: 1em !important;
-    }
-  }
-  &.sof-button[size="large"] {
-    height: 56px !important;
-    i {
-      font-size: 1.15em !important;
-    }
-  }
-  &.sof-icon-button {
-    border-radius: 6px !important;
-    padding: 0px !important;
-    &:enabled {
-      &.mat-primary {
-        color: mat.get-color-from-palette($arm-primary, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-primary, 50);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-accent {
-        color: mat.get-color-from-palette($arm-accent, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-accent, 50);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-warn {
-        color: mat.get-color-from-palette($arm-warn, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-warn, 50);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-success {
-        color: mat.get-color-from-palette($arm-success, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-success, 50);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-error {
-        color: mat.get-color-from-palette($arm-error, 900);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-error, 50);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-info {
-        color: mat.get-color-from-palette($arm-info, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-info, 50);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-neutral {
-        color: mat.get-color-from-palette($arm-neutral, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-neutral, 50);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-    }
-    &:disabled {
-      color: rgba(0, 0, 0, 0.6) !important;
-      opacity: 1 !important;
-    }
-  }
-  &.sof-icon-button[size="small"] {
-    height: 36px !important;
-    width: 36px !important;
-    min-width: 36px !important;
-    font-size: 19px !important;
-  }
-  &.sof-icon-button[size="medium"] {
-    height: 48px !important;
-    width: 48px !important;
-    min-width: 48px !important;
-    font-size: 26px !important;
-  }
-  &.sof-icon-button[size="large"] {
-    height: 56px !important;
-    width: 56px !important;
-    min-width: 56px !important;
-    font-size: 26px !important;
-  }
-  // Secondary Button Styles
-}
-button.mat-mdc-unelevated-button {
-  --mat-mdc-button-persistent-ripple-color: none !important;
-  --mdc-filled-button-label-text-color: none !important;
-  --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.1) !important;
-  &.sof-flat-button {
-    padding: 0px 24px !important;
-    height: 48px !important;
-    border-radius: 6px !important;
-    font-family: Poppins !important;
-    font-style: normal !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    line-height: 24px !important;
-    letter-spacing: 0.05em !important;
-    text-transform: uppercase !important;
-    &.fixed-width {
-      width: 200px !important; // Use this is to match specific sizing
-    }
-    &.full-width {
-      width: 100% !important; // Use this is button width will take size of flex percentage
-    }
-    &:enabled {
-      &.mat-primary {
-        background: mat.get-color-from-palette($arm-primary, 500);
-        color: map-get($arm-primary, contrast, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-primary, 700);
-          color: map-get($arm-primary, contrast, 700);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-accent {
-        background: mat.get-color-from-palette($arm-accent, 500);
-        color: map-get($arm-accent, contrast, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-accent, 700);
-          color: map-get($arm-accent, contrast, 700);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-warn {
-        background: mat.get-color-from-palette($arm-warn, 500);
-        color: map-get($arm-warn, contrast, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-warn, 700);
-          color: map-get($arm-warn, contrast, 700);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-success {
-        background: mat.get-color-from-palette($arm-success, 500);
-        color: map-get($arm-success, contrast, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-success, 700);
-          color: map-get($arm-success, contrast, 700);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-error {
-        background: mat.get-color-from-palette($arm-error, 900);
-        color: map-get($arm-error, contrast, 900);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-error, 700);
-          color: map-get($arm-error, contrast, 700);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-info {
-        background: mat.get-color-from-palette($arm-info, 500);
-        color: map-get($arm-info, contrast, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-info, 700);
-          color: map-get($arm-info, contrast, 700);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-neutral {
-        background: mat.get-color-from-palette($arm-neutral, 500);
-        color: map-get($arm-neutral, contrast, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-neutral, 700);
-          color: map-get($arm-neutral, contrast, 700);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-    }
-    &:disabled {
-      background: #f7f7f7 !important;
-      color: rgba(0, 0, 0, 0.6) !important;
-      opacity: 1 !important;
-    }
-  }
-  &.sof-flat-button[size="small"] {
-    height: 36px !important;
-    i {
-      font-size: 1em !important;
-    }
-  }
-  &.sof-flat-button[size="medium"] {
-    height: 48px !important;
-    i {
-      font-size: 1em !important;
-    }
-  }
-  &.sof-flat-button[size="large"] {
-    height: 56px !important;
-    i {
-      font-size: 1.15em !important;
-    }
-  }
-  &.sof-flat-icon-button {
-    border-radius: 6px !important;
-    padding: 0px !important;
-    &:enabled {
-      &.mat-primary {
-        background: mat.get-color-from-palette($arm-primary, 500);
-        color: map-get($arm-primary, contrast, 500);
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-primary, 700);
-          color: map-get($arm-primary, contrast, 700);
-        }
-      }
-      &.mat-accent {
-        background: mat.get-color-from-palette($arm-accent, 500);
-        color: map-get($arm-accent, contrast, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-accent, 700);
-          color: map-get($arm-accent, contrast, 700);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-warn {
-        background: mat.get-color-from-palette($arm-warn, 500);
-        color: map-get($arm-warn, contrast, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-warn, 700);
-          color: map-get($arm-warn, contrast, 700);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-success {
-        background: mat.get-color-from-palette($arm-success, 500);
-        color: map-get($arm-success, contrast, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-success, 700);
-          color: map-get($arm-success, contrast, 700);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-error {
-        background: mat.get-color-from-palette($arm-error, 900);
-        color: map-get($arm-error, contrast, 900);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-error, 700);
-          color: map-get($arm-error, contrast, 700);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-info {
-        background: mat.get-color-from-palette($arm-info, 500);
-        color: map-get($arm-info, contrast, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-info, 700);
-          color: map-get($arm-info, contrast, 700);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-neutral {
-        background: mat.get-color-from-palette($arm-neutral, 500);
-        color: map-get($arm-neutral, contrast, 500);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-neutral, 700);
-          color: map-get($arm-neutral, contrast, 700);
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-    }
-    &:disabled {
-      background: #f7f7f7 !important;
-      color: rgba(0, 0, 0, 0.6) !important;
-      opacity: 1 !important;
-    }
-  }
-  &.sof-flat-icon-button[size="small"] {
-    height: 36px !important;
-    width: 36px !important;
-    min-width: 36px !important;
-    font-size: 19px !important;
-  }
-  &.sof-flat-icon-button[size="medium"] {
-    height: 48px !important;
-    width: 48px !important;
-    min-width: 48px !important;
-    font-size: 26px !important;
-  }
-  &.sof-flat-icon-button[size="large"] {
-    height: 56px !important;
-    width: 56px !important;
-    min-width: 56px !important;
-    font-size: 26px !important;
-  }
-}
-button.mat-mdc-outlined-button {
-  --mat-mdc-button-persistent-ripple-color: none !important;
-  --mdc-outlined-button-label-text-color: none !important;
-  --mat-outlined-button-ripple-color: rgba(0, 0, 0, 0.05) !important;
-  &.sof-stroked-button {
-    padding: 0px 24px !important;
-    height: 48px !important;
-    border: none !important;
-    border-radius: 6px !important;
-    font-family: Poppins !important;
-    font-style: normal !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    line-height: 24px !important;
-    letter-spacing: 0.05em !important;
-    text-transform: uppercase !important;
-    &.fixed-width {
-      width: 200px !important; // Use this is to match specific sizing
-    }
-    &.full-width {
-      width: 100% !important; // Use this is button width will take size of flex percentage
-    }
-    &:enabled {
-      &.mat-primary {
-        background-color: mat.get-color-from-palette($arm-primary, 50) !important;
-        color: mat.get-color-from-palette($arm-primary, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-primary, 100) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-accent {
-        background-color: mat.get-color-from-palette($arm-accent, 50) !important;
-        color: mat.get-color-from-palette($arm-accent, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-accent, 100) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-warn {
-        background-color: mat.get-color-from-palette($arm-warn, 50) !important;
-        color: mat.get-color-from-palette($arm-warn, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-warn, 100) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-success {
-        background-color: mat.get-color-from-palette($arm-success, 50) !important;
-        color: mat.get-color-from-palette($arm-success, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-success, 100) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-info {
-        background-color: mat.get-color-from-palette($arm-info, 50) !important;
-        color: mat.get-color-from-palette($arm-info, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-info, 100) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-error {
-        background-color: mat.get-color-from-palette($arm-error, 50) !important;
-        color: mat.get-color-from-palette($arm-error, 900) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-error, 100) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-neutral {
-        background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
-        color: mat.get-color-from-palette($arm-neutral, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-    }
-    &:disabled {
-      background: #f7f7f7 !important;
-      color: rgba(0, 0, 0, 0.6) !important;
-      opacity: 1 !important;
-    }
-  }
-  &.sof-stroked-button-outline {
-    padding: 0px 24px !important;
-    height: 48px !important;
-    background-color: #ffffff !important;
-    border-radius: 6px !important;
-    font-family: Poppins !important;
-    font-style: normal !important;
-    font-weight: 600 !important;
-    font-size: 16px !important;
-    line-height: 24px !important;
-    letter-spacing: 0.05em !important;
-    text-transform: uppercase !important;
-    &.fixed-width {
-      width: 200px !important; // Use this is to match specific sizing
-    }
-    &.full-width {
-      width: 100% !important; // Use this is button width will take size of flex percentage
-    }
-    &:enabled {
-      &.mat-primary {
-        border: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
-        color: mat.get-color-from-palette($arm-primary, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-primary, 50) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-accent {
-        border: 2px solid mat.get-color-from-palette($arm-accent, 500) !important;
-        color: mat.get-color-from-palette($arm-accent, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-accent, 50) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-warn {
-        border: 2px solid mat.get-color-from-palette($arm-warn, 500) !important;
-        color: mat.get-color-from-palette($arm-warn, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-warn, 50) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-success {
-        border: 2px solid mat.get-color-from-palette($arm-success, 500) !important;
-        color: mat.get-color-from-palette($arm-success, 50) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-success, 100) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-error {
-        border: 2px solid mat.get-color-from-palette($arm-error, 900) !important;
-        color: mat.get-color-from-palette($arm-error, 900) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-error, 50) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-info {
-        border: 2px solid mat.get-color-from-palette($arm-info, 500) !important;
-        color: mat.get-color-from-palette($arm-info, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-info, 50) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-neutral {
-        border: 2px solid mat.get-color-from-palette($arm-neutral, 500) !important;
-        color: mat.get-color-from-palette($arm-neutral, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-    }
-    &:disabled {
-      background: #f7f7f7 !important;
-      color: rgba(0, 0, 0, 0.6) !important;
-      border: 2px solid rgba(0, 0, 0, 0.38) !important;
-      opacity: 1 !important;
-    }
-  }
-  &.sof-stroked-button[size="small"],
-  &.sof-stroked-button-outline[size="small"] {
-    height: 36px !important;
-    i {
-      font-size: 1em !important;
-    }
-  }
-  &.sof-stroked-button[size="medium"],
-  &.sof-stroked-button-outline[size="medium"] {
-    height: 48px !important;
-    i {
-      font-size: 1em !important;
-    }
-  }
-  &.sof-stroked-button[size="large"],
-  &.sof-stroked-button-outline[size="large"] {
-    height: 56px !important;
-    i {
-      font-size: 1.15em !important;
-    }
-  }
-  &.sof-stroked-icon-button {
-    border: none !important;
-    border-radius: 6px !important;
-    padding: 0px !important;
-    &:enabled {
-      &.mat-primary {
-        background-color: mat.get-color-from-palette($arm-primary, 50) !important;
-        color: mat.get-color-from-palette($arm-primary, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-primary, 100) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-accent {
-        background-color: mat.get-color-from-palette($arm-accent, 50) !important;
-        color: mat.get-color-from-palette($arm-accent, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-accent, 100) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-warn {
-        background-color: mat.get-color-from-palette($arm-warn, 50) !important;
-        color: mat.get-color-from-palette($arm-warn, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-warn, 100) !important
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-success {
-        background-color: mat.get-color-from-palette($arm-success, 50) !important;
-        color: mat.get-color-from-palette($arm-success, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-success, 100) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-info {
-        background-color: mat.get-color-from-palette($arm-info, 50) !important;
-        color: mat.get-color-from-palette($arm-info, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-info, 100) !important
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-error {
-        background-color: mat.get-color-from-palette($arm-error, 50) !important;
-        color: mat.get-color-from-palette($arm-error, 900) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-error, 100) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-neutral {
-        background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
-        color: mat.get-color-from-palette($arm-neutral, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-neutral, 100) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-    }
-    &:disabled {
-      background: #f7f7f7 !important;
-      color: rgba(0, 0, 0, 0.6) !important;
-      opacity: 1 !important;
-    }
-  }
-  &.sof-stroked-icon-button-outline {
-    background-color: #ffffff !important;
-    border-radius: 6px !important;
-    padding: 0px !important;
-    &:enabled {
-      &.mat-primary {
-        border: 2px solid mat.get-color-from-palette($arm-primary, 500) !important;
-        color: mat.get-color-from-palette($arm-primary, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-primary, 50) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-accent {
-        border: 2px solid mat.get-color-from-palette($arm-accent, 500) !important;
-        color: mat.get-color-from-palette($arm-accent, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-accent, 50) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-warn {
-        border: 2px solid mat.get-color-from-palette($arm-warn, 500) !important;
-        color: mat.get-color-from-palette($arm-warn, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-warn, 50) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-success {
-        border: 2px solid mat.get-color-from-palette($arm-success, 500) !important;
-        color: mat.get-color-from-palette($arm-success, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-success, 50) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-error {
-        border: 2px solid mat.get-color-from-palette($arm-error, 900) !important;
-        color: mat.get-color-from-palette($arm-error, 900);
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-error, 50) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-info {
-        border: 2px solid mat.get-color-from-palette($arm-info, 500) !important;
-        color: mat.get-color-from-palette($arm-info, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-info, 50) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-      &.mat-neutral {
-        border: 2px solid mat.get-color-from-palette($arm-neutral, 500) !important;
-        color: mat.get-color-from-palette($arm-neutral, 500) !important;
-        &:hover {
-          background-color: mat.get-color-from-palette($arm-neutral, 50) !important;
-        }
-        &:focus {
-          outline: 4px solid mat.get-color-from-palette($arm-primary, 500);
-          outline-offset: 2px !important;
-        }
-      }
-    }
-    &:disabled {
-      background: #f7f7f7 !important;
-      color: rgba(0, 0, 0, 0.6) !important;
-      border: 2px solid rgba(0, 0, 0, 0.38) !important;
-      opacity: 1 !important;
-    }
-  }
-  &.sof-stroked-icon-button[size="small"],
-  &.sof-stroked-icon-button-outline[size="small"] {
-    height: 36px !important;
-    width: 36px !important;
-    min-width: 36px !important;
-    font-size: 19px !important;
-  }
-  &.sof-stroked-icon-button[size="medium"],
-  &.sof-stroked-icon-button-outline[size="medium"] {
-    height: 48px !important;
-    width: 48px !important;
-    min-width: 48px !important;
-    font-size: 24px !important;
-  }
-  &.sof-stroked-icon-button[size="large"],
-  &.sof-stroked-icon-button-outline[size="large"] {
-    height: 56px !important;
-    width: 56px !important;
-    min-width: 56px !important;
-    font-size: 26px !important;
-  }
-}
-// Button Redesign
-button.mat-mdc-button .mat-mdc-button-ripple,
-.mat-mdc-button .mat-mdc-button-persistent-ripple,
-.mat-mdc-button .mat-mdc-button-persistent-ripple::before,
-.mat-mdc-unelevated-button .mat-mdc-button-ripple,
-.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple,
-.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before,
-.mat-mdc-raised-button .mat-mdc-button-ripple,
-.mat-mdc-raised-button .mat-mdc-button-persistent-ripple,
-.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before,
-.mat-mdc-outlined-button .mat-mdc-button-ripple,
-.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple,
-.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before {
-  background: none !important;
-}
-button.sof-button-v2 {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 8px !important;
-  height: 40px !important;
-  border-radius: 8px !important;
-  font-family: Poppins !important;
-  font-style: normal !important;
-  font-weight: 500 !important;
-  font-size: 16px !important;
-  line-height: normal !important;
-  letter-spacing: 0px !important;
-  text-transform: capitalize !important;
-  &.fixed-width {
-    width: 200px !important; // Use this is to match specific sizing
-  }
-  &.full-width {
-    width: 100% !important; // Use this is button width will take size of flex percentage
-  }
-  &.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    i {
-      font-size: 20px;
-    }
-  }
-  &.mat-mdc-unelevated-button span.mdc-button__label {
-    display: flex;
-    align-items: center;
-    justify-content: center !important;
-    width: 100% !important;
-    i {
-      margin-right: 8px !important;
-    }
-  }
-  &:enabled {
-    &.mat-primary {
-      background: mat.get-color-from-palette($arm-primary, 500);
-      color: map-get($arm-primary, contrast, 900);
-      &:hover {
-        background-color: var(--primary-color-500-parts);
-      }
-      &:focus {
-        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-        outline-offset: 2px !important;
-      }
-    }
-    &.mat-secondary {
-      background: #FAFAFA !important;
-      color: var(--primary-color-contrast-50-parts);
-      &:hover {
-        background-color: #FAFAFA !important;
-      }
-      &:focus {
-        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-        outline-offset: 2px !important;
-      }
-    }
-    &.mat-tertiary {
-      color: var(--primary-color-contrast-50-parts);
-      background: none !important;
-      &:hover {
-        background-color: transparent !important;
-      }
-      &:focus {
-        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-        outline-offset: 2px !important;
-      }
-    }
-    &.mat-error {
-      background: mat.get-color-from-palette($arm-error, 900);
-      color: map-get($arm-error, contrast, 900);
-      &:hover {
-        background-color: mat.get-color-from-palette($arm-error, 700);
-        color: map-get($arm-error, contrast, 700);
-      }
-      &:focus {
-        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-        outline-offset: 2px !important;
-      }
-    }
-  }
-  &:disabled {
-    background: #fafafa !important;
-    color: rgba(0, 0, 0, 0.6) !important;
-    opacity: 1 !important;
-    &:hover {
-      background-color: mat.get-color-from-palette($arm-primary, 500);
-    }
-    &:focus {
-      outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-      outline-offset: 2px !important;
-    }
-  }
-  // have not seen this (.no-hover-effect) class? remove if not needed,
-  // also need to disable ripple effects globally
-  &.no-hover-effect.mat-button.mat-primary .mat-button-focus-overlay,
-  .no-hover-effect.mat-button.mat-secondary .mat-button-focus-overlay,
-  .no-hover-effect.mat-button.mat-tertiary .mat-button-focus-overlay,
-  .no-hover-effect.mat-button.mat-error .mat-button-focus-overlay,
-  .no-hover-effect.mat-button.mat-accent .mat-button-focus-overlay,
-  .no-hover-effect.mat-button.mat-warn .mat-button-focus-overlay {
-    background-color: transparent;
-  }
-}
-button.sof-button-icon-v2 {
-  display: flex !important;
-  padding: 8px !important;
-  border-radius: 8px !important;
-  height: 40px !important;
-  justify-content: center !important;
-  align-items: center !important;
-  gap: 8px !important;
-  max-width: 36px !important;
-  &.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label {
-    display: flex;
-    align-items: center;
-    font-size: 24px;
-  }
-  &.mdc-button {
-    min-width: 40px;
-  }
-  &.full-width {
-    width: 100% !important; // Use this is button width will take size of flex percentage
-  }
-  &:enabled {
-    &.mat-primary {
-      background: mat.get-color-from-palette($arm-primary, 500);
-      color: map-get($arm-error, contrast, 900);
-      &:hover {
-        background-color: mat.get-color-from-palette($arm-primary, 500) !important;
-        color: map-get($arm-error, contrast, 700);
-      }
-      &:focus {
-        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-        outline-offset: 2px !important;
-      }
-    }
-    &.mat-secondary {
-      background-color: #FAFAFA !important;
-      color: var(--primary-color-contrast-50-parts);
-      &:hover {
-        background-color: #FAFAFA !important;
-        color: var(--primary-color-contrast-50-parts) !important;
-      }
-      &:focus {
-        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-        outline-offset: 2px !important;
-      }
-    }
-    &.mat-tertiary {
-      color: var(--primary-color-contrast-50-parts);
-      background: transparent !important;
-      &:focus {
-        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-        outline-offset: 2px !important;
-      }
-    }
-    &.mat-error {
-      background: mat.get-color-from-palette($arm-error, 900);
-      color: map-get($arm-error, contrast, 900);
-      &:hover {
-        background-color: mat.get-color-from-palette($arm-error, 700);
-        color: map-get($arm-error, contrast, 700);
-      }
-      &:focus {
-        outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-        outline-offset: 2px !important;
-      }
-    }
-  }
-  &:disabled {
-    background: #fafafa !important;
-    color: rgba(0, 0, 0, 0.6) !important;
-    opacity: 1 !important;
-    &:hover {
-      background-color: mat.get-color-from-palette($arm-primary, 500);
-    }
-    &:focus {
-      outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-      outline-offset: 2px !important;
-    }
-  }
-}
-// this could be bad ... see if this effects all material overlays ...
-.cdk-overlay-connected-position-bounding-box {
-  margin-top: 10px !important;
-  margin-bottom: 10px !important;
-}
-// if this is just for utility buttons ... add a custom class so does not effect all menu's ...
-.mat-mdc-menu-panel {
-  background-color: $surface-color-level-one-light !important;
-  box-shadow: 0px 4px 8px 0px mat.get-color-from-palette($arm-neutral, A300) !important;
-  border-radius: 8px !important;
-}
-.mat-mdc-menu-item-text {
-  font-weight: 500 !important;
-  color: rgba(0, 0, 0, 0.87) !important;
-  font-family: Poppins !important;
-}
-button.button-icon-utility {
-  display: flex !important;
-  justify-content: center !important;
-  align-items: center !important;
-  gap: 8px !important;
-  padding: 0px !important;
-  border-radius: 4px !important;
-  height: 24px !important;
-  width: 24px !important;
-  &.mat-mdc-unelevated-button span.mdc-button__label.mdc-button__label {
-    display: flex;
-    align-items: center;
-    font-size: 20px;
-  }
-  &.mdc-button {
-    min-width: 24px;
-  }
-  &.full-width {
-    width: 100% !important; // Use this is button width will take size of flex percentage
-  }
-  &:enabled {
-    &:focus {
-      outline: 3px solid mat.get-color-from-palette($arm-primary, 300);
-      outline-offset: 2px !important;
-    }
-    &.mat-primary {
-      background: mat.get-color-from-palette($arm-primary, 500);
-      color: map-get($arm-error, contrast, 900);
-      border-radius: 4px solid !important;
-      &:hover {
-        background-color: mat.get-color-from-palette($arm-primary, 700) !important;
-        color: map-get($arm-error, contrast, 700);
-      }
-      &:focus {
-        background-color: mat.get-color-from-palette($arm-primary, 700) !important;
-      }
-    }
-    &.mat-secondary {
-      background-color: #FAFAFA !important;
-      color: #146EF6 !important;
-      &:hover {
-        background-color: #F5F5F5 !important;
-        color: #146EF6 !important;
-      }
-      &:focus {
-        background-color: #E9E9E9 !important;
-      }
-    }
-    &.mat-tertiary {
-      color: #146EF6 !important;
-      background: transparent !important;
-      &:focus {
-        background-color: rgba(20, 110, 246, 0.08) !important;
-      }
-      &:hover {
-        background-color: rgba(20, 110, 246, 0.04) !important;
-      }
-    }
-    &.mat-contained {
-      color: #146EF6 !important;
-      background: none !important;
-      border: 2px solid #146EF6 !important;
-      &:focus {
-        border: 3px solid mat.get-color-from-palette($arm-primary, 700) !important;
-        color: map-get($arm-error, contrast, 700);
-        background-color: rgba(20, 110, 246, 0.08) !important;
-      }
-      &:hover {
-        background-color: rgba(20, 110, 246, 0.04) !important;
-      }
-    }
-    &.mat-contained-error {
-      color: rgba(215, 36, 26, 1) !important;
-      background: none !important;
-      border: 2px solid rgba(215, 36, 26, 1) !important;
-      &:focus {
-        border: 3px solid mat.get-color-from-palette($arm-error, 700) !important;
-        color: map-get($arm-error, contrast, 700);
-        background-color: rgba(215, 36, 26, 0.08) !important;
-      }
-      &:hover {
-        background-color: rgba(215, 36, 26, 0.04) !important;
-      }
-    }
-    &.mat-error-primary {
-      background: rgba(215, 36, 26, 1) !important;
-      color: map-get($arm-error, contrast, 900);
-      &:hover {
-        background-color: mat.get-color-from-palette($arm-error, 700);
-        color: map-get($arm-error, contrast, 700);
-      }
-      &:focus {
-        background-color: rgba(199, 22, 15, 1) !important;
-      }
-    }
-    &.mat-error-secondary {
-      background-color: #FAFAFA !important;
-      color: rgba(215, 36, 26, 1) !important;
-      &:hover {
-        background-color: rgba(245, 245, 245, 1) !important;
-        color: map-get($arm-error, contrast, 700);
-      }
-      &:focus {
-        background-color: rgba(233, 233, 233, 1) !important;
-      }
-    }
-    &.mat-error-tertiary {
-      background: transparent !important;
-      color: rgba(215, 36, 26, 1) !important;
-      &:hover {
-        background-color: rgba(215, 36, 26, 0.04) !important;
-        color: map-get($arm-error, contrast, 700);
-      }
-      &:focus {
-        background-color: rgba(215, 36, 26, 0.08) !important;
-      }
-    }
-  }
-  &:disabled {
-    &.mat-primary {
-      background-color: #FAFAFA !important;
-    }
-    &.mat-secondary {
-      background-color: transparent !important;
-    }
-    &.mat-contained {
-      background-color: transparent !important;
-      border: 2px solid rgba(0, 0, 0, 0.38) !important;
-      color: rgba(0, 0, 0, 0.38) !important;
-    }
-    &.mat-contained-error {
-      background-color: transparent !important;
-      border: 3px solid rgba(0, 0, 0, 0.38) !important;
-      color: rgba(0, 0, 0, 0.38) !important;
-    }
-    &.mat-tertiary {
-      background-color: transparent !important;
-    }
-    &.mat-error {
-      background: rgba(250, 250, 250, 1) !important;
-    }
-    &.mat-error-primary {
-      background: rgba(250, 250, 250, 1) !important;
-    }
-    &.mat-error-tertiary {
-      background: rgba(250, 250, 250, 1) !important;
-    }
-    &.mat-error-secondary {
-      background: rgba(250, 250, 250, 1) !important;
-    }
-  }
-}
-button .mat-badge-content {
-  background-color: #333333 !important;
-}
-mat-card {
-  &.mat-mdc-card.item-list {
-    box-shadow: 0px 1px 7px rgb(166 159 159 / 25%) !important;
-    border-radius: 10px !important;
-    overflow: overlay !important;
-    max-height: 322px !important;
-    padding: 0px !important;
-  }
-}
-.mat-mdc-dialog-title {
-  font-family: Merriweather, serif !important;
-  font-style: normal !important;
-  font-weight: 400 !important;
-  font-size: 24px !important;
-  line-height: 36px !important;
-  letter-spacing: normal !important;
-  padding: 0px !important;
-  display: flex !important;
-}
-.mat-mdc-dialog-container .mdc-dialog__content {
-  color: #000 !important;
-}
-.mat-mdc-dialog-content {
-  display: block !important;
-  max-height: 65vh !important;
-  padding: 0px !important;
-  overflow: auto !important;
-}
+/**
+  'sof-styles.scss' is Armature's main style file,
+  which serves as a centralized styling solution for applications that consume this library.
-.mat-mdc-dialog-container {
-  display: block !important;
-  background: #ffffff !important;
-  border: 1px solid #dfdfdf !important;
-  box-sizing: border-box !important;
-  border-radius: 10px !important;
-  overflow: auto !important;
-  outline: 0 !important;
-  width: 100% !important;
-  height: 100% !important;
-  min-height: inherit !important;
-  max-height: inherit !important;
-}
+  This file acts as an index,
+  Please do not include any actual css code in this file.
-.mat-mdc-list-base {
-  padding-top: 0px !important;
-}
+  Note that any file with variables declared for export must be '@forward',
+  this will allow those variables to be accessed directly through 'sof-styles.scss' as well as by using that file directly.
+*/
-.mdc-tooltip__surface {
-  color: #fff !important;
-  font-size: 14px !important;
-  font-style: normal !important;
-  font-weight: 100 !important;
-  font-family: Poppins !important;
-  line-height: normal !important;
-  background-color: #333333 !important;
-  border-radius: 4px !important;
-  text-align: center !important;
-  position: relative;
-  padding-left: 4px !important;
-  padding-right: 4px !important;
-  padding-bottom: 0px !important;
-  padding-top: 1px !important;
-  &::after {
-    width: 0;
-    height: 0;
-    content: '';
-    position: absolute;
-  }
-  &.below {
-    overflow: initial;
-    &:after {
-      top: -0.5rem;
-      right: calc(50% - 0.3rem);
-      transform: rotate(0);
-      border-left: 0.25rem solid transparent;
-      border-right: 0.25rem solid transparent;
-      border-bottom: 0.5rem solid #333333 !important;
-    }
-  }
-  &.above {
-    overflow: initial;
-    margin-bottom: 1.25rem;
-    &:after {
-      bottom: -0.5rem;
-      right: calc(50% - 0.3rem);
-      transform: rotate(180deg);
-      border-left: 0.25rem solid transparent;
-      border-right: 0.25rem solid transparent;
-      border-bottom: 0.5rem solid #333333 !important;
-    }
-  }
-  &.right {
-    overflow: initial;
-    margin-left: 0.75rem;
-    &:after {
-      left: -0.40rem;
-      top: calc(50% - 0.50rem);
-      transform: rotate(270deg);
-      border-left: 0.3rem solid transparent;
-      border-right: 0.3rem solid transparent;
-      border-bottom: 1rem solid #333333 !important;
-    }
-  }
-  &.left {
-    overflow: initial;
-    margin-right: 0.75rem;
-    &:after {
-      right: -0.40rem;
-      top: calc(50% - 0.50rem);
-      transform: rotate(90deg);
-      border-left: 0.3rem solid transparent;
-      border-right: 0.3rem solid transparent;
-      border-top: 0.3rem solid transparent;
-      border-bottom: 1rem solid #333333 !important;
-    }
-  }
-}
-::ng-deep .cdk-overlay-container .cdk-overlay-pane {
-  &.mat-mdc-tooltip-panel {
-    transform: none !important;
-  }
-}
-.mat-mdc-chip {
-  font-style: normal !important;
-  font-weight: 500 !important;
-  font-size: 12px !important;
-  line-height: 16px !important;
-  height: max-content !important;
-  word-break: break-all !important;
-}
-mat-form-field.sof-form-field {
-  font-family: "Poppins" !important;
-  &.mat-form-field-invalid {
-    .mat-mdc-form-field-flex>div.mdc-notched-outline>* {
-      border-color: mat.get-color-from-palette($arm-error, 500) !important;
-    }
-    .mdc-notched-outline__notch {
-      border-left: none !important;
-    }
-    .mdc-notched-outline__leading,
-    .mdc-notched-outline__notch,
-    .mdc-notched-outline__trailing {
-      border-width: 2px !important;
-    }
-    .mat-mdc-floating-label {
-      color: mat.get-color-from-palette($arm-error, 500) !important;
-    }
-    &.mat-focused .mdc-floating-label {
-      color: mat.get-color-from-palette($arm-error, 500) !important;
-    }
-  }
-  &.mat-focused {
-    font-weight: 400 !important;
-    input,
-    span.mat-mdc-select-value-text {
-      font-weight: 400 !important;
-    }
-    .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
-    .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
-    .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
-      border-width: 3px !important;
-    }
-  }
-  &.mat-form-field-disabled .mdc-text-field--outlined {
-    background-color: #f7f7f7 !important;
-  }
-  .mat-mdc-form-field-flex>div.mdc-notched-outline {
-    color: mat.get-color-from-palette($arm-primary, 500) !important;
-  }
-  .mat-mdc-text-field-wrapper {
-    padding: 0px !important;
-  }
-  .mat-mdc-form-field-flex {
-    padding: 0 16px 0 16px !important;
-  }
-  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix {
-    top: 0em !important;
-    color: mat.get-color-from-palette($arm-neutral, 300) !important;
-    padding-right: 0.5em !important;
-    font-size: 1.5em !important;
-  }
-  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix {
-    top: 0em !important;
-    font-size: 1.5em !important;
-    color: mat.get-color-from-palette($arm-neutral, 300) !important;
-    .error {
-      color: mat.get-color-from-palette($arm-error, 500) !important;
-    }
-  }
-  .mat-mdc-form-field-flex div.mdc-notched-outline__leading {
-    border-radius: 6px 0 0 6px !important;
-    min-width: 6px !important;
-  }
-  .mat-mdc-form-field-flex div.mdc-notched-outline__trailing {
-    border-radius: 0 6px 6px 0 !important;
-  }
-  mat-error {
-    font-family: "Poppins" !important;
-    font-style: normal !important;
-    font-weight: 500 !important;
-    font-size: 12px !important;
-    line-height: 18px !important;
-    color: mat.get-color-from-palette($arm-error, 500) !important;
-  }
-  mat-hint {
-    font-family: "Poppins" !important;
-    font-style: normal !important;
-    font-weight: 400 !important;
-    font-size: 12px !important;
-    line-height: 18px !important;
-  }
-  &.mat-focused .mdc-floating-label {
-    color: mat.get-color-from-palette($arm-primary, 500) !important;
-  }
-  .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
-  .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
-  .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
-    border-color: mat.get-color-from-palette($arm-primary, 500);
-  }
-  .mat-mdc-text-field-wrapper {
-    --mat-mdc-form-field-label-offset-x: 0px;
-  }
-}
-.mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option.mdc-list-item--disabled) {
-  color: mat.get-color-from-palette($arm-primary, 500) !important;
-}
-mat-optgroup label,
-mat-optgroup mat-option {
-  font-family: "Poppins" !important;
-}
-.mat-drawer-container.sof-ar-nav-sidenav-container {
-  @media only screen and (max-width: $mat-lt-md) {
-    background: rgba(245, 245, 245, 0.5) !important;
-  }
-}
-// MatRadio Overrides [START]
-// Color Styles [START]
-mat-radio-button.sof-radio-button.mat-mdc-radio-checked {
-  &.mat-primary,
-  &[color="primary"] {
-    --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-primary, 500)};
-    --mdc-radio-selected-hover-icon-color: #{mat.get-color-from-palette($arm-primary, 500)};
-    --mdc-radio-selected-icon-color: #{mat.get-color-from-palette($arm-primary, 500)};
-    --mdc-radio-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-primary, 500)};
-    --mat-mdc-radio-checked-ripple-color: #{mat.get-color-from-palette($arm-primary, 500)};
-  }
-  &.mat-accent,
-  &[color="accent"] {
-    --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-accent, 500)};
-    --mdc-radio-selected-hover-icon-color: #{mat.get-color-from-palette($arm-accent, 500)};
-    --mdc-radio-selected-icon-color: #{mat.get-color-from-palette($arm-accent, 500)};
-    --mdc-radio-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-accent, 500)};
-    --mat-mdc-radio-checked-ripple-color: #{mat.get-color-from-palette($arm-accent, 500)};
-  }
-  &.mat-warn,
-  &[color="warn"] {
-    --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
-    --mdc-radio-selected-hover-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
-    --mdc-radio-selected-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
-    --mdc-radio-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
-    --mat-mdc-radio-checked-ripple-color: #{mat.get-color-from-palette($arm-warn, 500)};
-  }
-  &.mat-success,
-  &[color="success"] {
-    --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
-    --mdc-radio-selected-hover-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
-    --mdc-radio-selected-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
-    --mdc-radio-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
-    --mat-mdc-radio-checked-ripple-color: #{mat.get-color-from-palette($arm-success, 500)};
-  }
-  &.mat-info,
-  &[color="info"] {
-    --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
-    --mdc-radio-selected-hover-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
-    --mdc-radio-selected-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
-    --mdc-radio-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
-    --mat-mdc-radio-checked-ripple-color: #{mat.get-color-from-palette($arm-info, 500)};
-  }
-  &.mat-error,
-  &[color="error"] {
-    --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
-    --mdc-radio-selected-hover-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
-    --mdc-radio-selected-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
-    --mdc-radio-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
-    --mat-mdc-radio-checked-ripple-color: #{mat.get-color-from-palette($arm-error, 500)};
-  }
-  &.mat-neutral,
-  &[color="neutral"] {
-    --mdc-radio-selected-focus-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-radio-selected-hover-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-radio-selected-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-radio-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mat-mdc-radio-checked-ripple-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-  }
-}
-// Color Styles [END]
-mat-radio-button.sof-radio-button {
-  .mdc-radio__background {
-    border-width: 3px !important;
-  }
-  // Styles that vary by size [START]
-  .mdc-radio__background,
-  .mdc-radio {
-    width: 20px !important;
-    height: 20px !important;
-  }
-  .mdc-radio__native-control {
-    width: 24px !important;
-    height: 24px !important;
-    transform: translate(0.7em, 9.5px);
-  }
-  .mat-mdc-radio-touch-target {
-    transform: translate(-48%, -50%) !important;
-  }
-  .mat-radio-ripple,
-  .mdc-radio:hover .mdc-radio__native-control:not([disabled])~.mdc-radio-ripple {
-    width: 40px;
-    height: 40px;
-    transform: translate(1px, 1px) !important;
-  }
-  label {
-    @extend .body2;
-  }
-  // Styles that vary by size [END]
-}
-// MatRadio Overrides [END]
-// MatSlider Overrides [START]
-mat-slider.sof-slider {
-  // Color Styles [START]
-  &.mat-primary {
-    --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-primary, 500)};
-    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette($arm-primary, 500)};
-    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette($arm-primary, 500)};
-    --mdc-slider-active-track-color: #{mat.get-color-from-palette($arm-primary, 500)};
-    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette($arm-primary, 500)};
-    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette($arm-primary, 500)};
-    --mat-mdc-slider-hover-ripple-color: rgba(var(--primary-color-500-parts-rgb), 0.05);
-    --mat-mdc-slider-focus-ripple-color: rgba(var(--primary-color-500-parts-rgb), 0.2);
-  }
-  &.mat-accent {
-    --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-accent, 500)};
-    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette($arm-accent, 500)};
-    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette($arm-accent, 500)};
-    --mdc-slider-active-track-color: #{mat.get-color-from-palette($arm-accent, 500)};
-    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette($arm-accent, 500)};
-    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette($arm-accent, 500)};
-    --mat-mdc-slider-hover-ripple-color: rgba(var(--accent-color-500-parts-rgb), 0.05);
-    --mat-mdc-slider-focus-ripple-color: rgba(var(--accent-color-500-parts-rgb), 0.2);
-  }
-  &.mat-warn {
-    --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-warn, 500)};
-    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette($arm-warn, 500)};
-    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette($arm-warn, 500)};
-    --mdc-slider-active-track-color: #{mat.get-color-from-palette($arm-warn, 500)};
-    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette($arm-warn, 500)};
-    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette($arm-warn, 500)};
-    --mat-mdc-slider-hover-ripple-color: rgba(var(--warn-color-500-parts-rgb), 0.05);
-    --mat-mdc-slider-focus-ripple-color: rgba(var(--warn-color-500-parts-rgb), 0.2);
-  }
-  &.mat-success {
-    --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-success, 500)};
-    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette($arm-success, 500)};
-    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette($arm-success, 500)};
-    --mdc-slider-active-track-color: #{mat.get-color-from-palette($arm-success, 500)};
-    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette($arm-success, 500)};
-    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette($arm-success, 500)};
-    --mat-mdc-slider-hover-ripple-color: rgba(var(--success-color-500-parts-rgb), 0.05);
-    --mat-mdc-slider-focus-ripple-color: rgba(var(--success-color-500-parts-rgb), 0.2);
-  }
-  &.mat-info {
-    --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-info, 500)};
-    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette($arm-info, 500)};
-    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette($arm-info, 500)};
-    --mdc-slider-active-track-color: #{mat.get-color-from-palette($arm-info, 500)};
-    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette($arm-info, 500)};
-    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette($arm-info, 500)};
-    --mat-mdc-slider-hover-ripple-color: rgba(var(--info-color-500-parts-rgb), 0.05);
-    --mat-mdc-slider-focus-ripple-color: rgba(var(--info-color-500-parts-rgb), 0.2);
-  }
-  &.mat-error {
-    --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-error, 500)};
-    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette($arm-error, 500)};
-    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette($arm-error, 500)};
-    --mdc-slider-active-track-color: #{mat.get-color-from-palette($arm-error, 500)};
-    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette($arm-error, 500)};
-    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette($arm-error, 500)};
-    --mat-mdc-slider-hover-ripple-color: rgba(var(--error-color-500-parts-rgb), 0.05);
-    --mat-mdc-slider-focus-ripple-color: rgba(var(--error-color-500-parts-rgb), 0.2);
-  }
-  &.mat-neutral {
-    --mdc-slider-handle-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-slider-focus-handle-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-slider-hover-handle-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-slider-active-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mat-mdc-slider-hover-ripple-color: rgba(var(--neutral-color-500-parts-rgb), 0.05);
-    --mat-mdc-slider-focus-ripple-color: rgba(var(--neutral-color-500-parts-rgb), 0.2);
-  }
-  // Color Styles [END]
-  // Size Styles [START]
-  --mdc-slider-active-track-height: 10px;
-  --mdc-slider-inactive-track-height: 10px;
-  &.mat-mdc-slider {
-    max-width: 300px;
-    width: 100%;
-  }
-  .mdc-slider__thumb-knob {
-    border-width: 2px !important;
-    background-color: white !important;
-  }
-  // Size Styles [END]
-}
-// MatSlider Overrides [END]
-// MatCheckbox Overrides [START]
-mat-checkbox.sof-checkbox {
-  .mdc-checkbox {
-    --mdc-checkbox-selected-checkmark-color: #fff;
-  }
-  .mdc-checkbox__native-control:disabled~.mdc-checkbox__background .mdc-checkbox__checkmark {
-    --mdc-checkbox-disabled-selected-checkmark-color: rgba(0, 0, 0, 0.38);
-  }
-  .mdc-checkbox__native-control[disabled]:not(:indeterminate):not([data-indeterminate="true"])~.mdc-checkbox__background {
-    background-color: #f7f7f7 !important;
-    border: 2px solid rgba(0, 0, 0, 0.38);
-  }
-  .mdc-checkbox__background {
-    border-width: 3px !important;
-  }
-  // Color Styles [START]
-  &.mat-warn .mdc-checkbox {
-    --mdc-checkbox-selected-focus-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
-    --mdc-checkbox-selected-hover-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
-    --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
-    --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-warn, 500)};
-    .mdc-checkbox--selected~.mdc-checkbox__ripple {
-      background: mat.get-color-from-palette($arm-warn, 500);
-    }
-  }
-  &.mat-success .mdc-checkbox {
-    --mdc-checkbox-selected-focus-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
-    --mdc-checkbox-selected-hover-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
-    --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
-    --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-success, 500)};
-    .mdc-checkbox--selected~.mdc-checkbox__ripple {
-      background: mat.get-color-from-palette($arm-success, 500);
-    }
-  }
-  &.mat-info .mdc-checkbox {
-    --mdc-checkbox-selected-focus-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
-    --mdc-checkbox-selected-hover-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
-    --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
-    --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-info, 500)};
-    .mdc-checkbox--selected~.mdc-checkbox__ripple {
-      background: mat.get-color-from-palette($arm-info, 500);
-    }
-  }
-  &.mat-error .mdc-checkbox {
-    --mdc-checkbox-selected-focus-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
-    --mdc-checkbox-selected-hover-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
-    --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
-    --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-error, 500)};
-    .mdc-checkbox--selected~.mdc-checkbox__ripple {
-      background: mat.get-color-from-palette($arm-error, 500);
-    }
-  }
-  &.mat-neutral .mdc-checkbox {
-    --mdc-checkbox-selected-focus-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-checkbox-selected-hover-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-checkbox-selected-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    --mdc-checkbox-selected-pressed-icon-color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    .mdc-checkbox--selected~.mdc-checkbox__ripple {
-      background: mat.get-color-from-palette($arm-neutral, 500);
-    }
-  }
-  // Color Styles [END]
-  // Styles that vary by size [START]
-  .mdc-checkbox__background,
-  .mdc-checkbox {
-    width: 20px !important;
-    height: 20px !important;
-  }
-  .mdc-checkbox__native-control {
-    width: 24px !important;
-    height: 24px !important;
-    transform: translate(0.7em, 9.5px);
-  }
-  .mat-mdc-checkbox-touch-target {
-    transform: translate(-48%, -50%) !important;
-  }
-  .mdc-checkbox__ripple,
-  .mat-mdc-checkbox-ripple,
-  .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled])~.mdc-checkbox__ripple {
-    width: 40px;
-    height: 40px;
-    transform: translate(1px, 1px) !important;
-  }
-  label {
-    @extend .body2;
-  }
-  // Styles that vary by size [END]
-}
-// MatCheckbox Overrides [END]
-// MatChip class overrides [START]
-// https://material.angular.io/components/chips/api
-.mat-mdc-chip.sof-chip {
-  font-family: "Poppins" !important;
-  font-size: 14px !important;
-  height: 32px !important;
-  font-style: normal !important;
-  i {
-    padding-right: 8px !important;
-    padding-left: 8px !important;
-  }
-}
-.mat-mdc-chip.mdc-evolution-chip--disabled.sof-chip {
-  background: #f7f7f7 !important;
-  color: rgba(0, 0, 0, 0.6) !important;
-  i {
-    color: #000000 !important;
-  }
-}
-.mat-mdc-chip.sof-chip {
-  &.mat-primary {
-    background-color: #{mat.get-color-from-palette($arm-primary, 50)};
-    i {
-      color: #{mat.get-color-from-palette($arm-primary, 500)};
-    }
-    &:hover {
-      background-color: #{mat.get-color-from-palette($arm-primary, 100)};
-      color: #000000;
-    }
-    &:focus {
-      background-color: #{mat.get-color-from-palette($arm-primary, 200)};
-      color: #000000;
-    }
-  }
-  &.mat-accent {
-    background-color: #{mat.get-color-from-palette($arm-accent, 50)};
-    i {
-      color: #{mat.get-color-from-palette($arm-accent, 500)};
-    }
-    &:hover {
-      background-color: #{mat.get-color-from-palette($arm-accent, 100)};
-      color: #000000;
-    }
-    &:focus {
-      background-color: #{mat.get-color-from-palette($arm-accent, 200)};
-      color: #000000;
-    }
-  }
-  &.mat-info {
-    background-color: #{mat.get-color-from-palette($arm-info, 50)};
-    i {
-      color: #{mat.get-color-from-palette($arm-info, 500)};
-    }
-    &:hover {
-      background-color: #{mat.get-color-from-palette($arm-info, 100)};
-      color: #000000;
-    }
-    &:focus {
-      background-color: #{mat.get-color-from-palette($arm-info, 200)};
-      color: #000000;
-    }
-  }
-  &.mat-error {
-    background-color: #{mat.get-color-from-palette($arm-error, 50)};
-    i {
-      color: #{mat.get-color-from-palette($arm-error, 500)};
-    }
-    &:hover {
-      background-color: #{mat.get-color-from-palette($arm-error, 100)};
-      color: #000000;
-    }
-    &:focus {
-      background-color: #{mat.get-color-from-palette($arm-error, 200)};
-      color: #000000;
-    }
-  }
-  &.mat-neutral {
-    background-color: #{mat.get-color-from-palette($arm-neutral, 50)};
-    i {
-      color: #{mat.get-color-from-palette($arm-neutral, 500)};
-    }
-    &:hover {
-      background-color: #{mat.get-color-from-palette($arm-neutral, 100)};
-      color: #000000;
-    }
-    &:focus {
-      background-color: #{mat.get-color-from-palette($arm-neutral, 200)};
-      color: #000000;
-    }
-  }
-  &.mat-success {
-    background-color: #{mat.get-color-from-palette($arm-success, 50)};
-    i {
-      color: #{mat.get-color-from-palette($arm-success, 500)};
-    }
-    &:hover {
-      background-color: #{mat.get-color-from-palette($arm-success, 100)};
-      color: #000000;
-    }
-    &:focus {
-      background-color: #{mat.get-color-from-palette($arm-success, 200)};
-      color: #000000;
-    }
-  }
-  &.mat-warn {
-    background-color: #{mat.get-color-from-palette($arm-warn, 50)};
-    i {
-      color: #{mat.get-color-from-palette($arm-warn, 500)};
-    }
-    &:hover {
-      background-color: #{mat.get-color-from-palette($arm-warn, 100)};
-      color: #000000;
-    }
-    &:focus {
-      background-color: #{mat.get-color-from-palette($arm-warn, 200)};
-      color: #000000;
-    }
-  }
-}
-.mat-mdc-chip-selected.sof-chip {
-  &.mat-primary {
-    background-color: #{mat.get-color-from-palette($arm-primary, 500)} !important;
-    i {
-      color: #{mat.get-color-from-palette($arm-primary, 500)} !important;
-    }
-    &:hover {
-      background-color: #{mat.get-color-from-palette($arm-primary, 500)} !important;
-      color: #000000;
-    }
-    &:focus {
-      background-color: #{mat.get-color-from-palette($arm-primary, 500)} !important;
-      color: #000000;
-    }
-  }
-  &.mat-neutral {
-    background-color: #{mat.get-color-from-palette($arm-neutral, 500)} !important;
-    i {
-      color: #{mat.get-color-from-palette($arm-neutral, 500)} !important;
-    }
-    &:hover {
-      background-color: #{mat.get-color-from-palette($arm-neutral, 500)} !important;
-      color: #000000;
-    }
-    &:focus {
-      background-color: #{mat.get-color-from-palette($arm-neutral, 500)} !important;
-      color: #000000;
-    }
-  }
-  &.mat-accent {
-    background-color: #{mat.get-color-from-palette($arm-accent, 500)} !important;
-    i {
-      color: #{mat.get-color-from-palette($arm-accent, 500)} !important;
-    }
-    &:hover {
-      background-color: #{mat.get-color-from-palette($arm-accent, 500)} !important;
-      color: #000000;
-    }
-    &:focus {
-      background-color: #{mat.get-color-from-palette($arm-accent, 500)} !important;
-      color: #000000;
-    }
-  }
-  &.mat-info {
-    background-color: #{mat.get-color-from-palette($arm-info, 500)} !important;
-    i {
-      color: #{mat.get-color-from-palette($arm-info, 500)} !important;
-    }
-    &:hover {
-      background-color: #{mat.get-color-from-palette($arm-info, 500)} !important;
-      color: #000000;
-    }
-    &:focus {
-      background-color: #{mat.get-color-from-palette($arm-info, 500)} !important;
-      color: #000000;
-    }
-  }
-  &.mat-error {
-    background-color: #{mat.get-color-from-palette($arm-error, 500)} !important;
-    i {
-      color: #{mat.get-color-from-palette($arm-error, 500)} !important;
-    }
-    &:hover {
-      background-color: #{mat.get-color-from-palette($arm-error, 500)} !important;
-      color: #000000;
-    }
-    &:focus {
-      background-color: #{mat.get-color-from-palette($arm-error, 500)} !important;
-      color: #000000;
-    }
-  }
-  &.mat-success {
-    background-color: #{mat.get-color-from-palette($arm-success, 500)} !important;
-    i {
-      color: #{mat.get-color-from-palette($arm-success, 500)} !important;
-    }
-    &:hover {
-      background-color: #{mat.get-color-from-palette($arm-success, 500)} !important;
-      color: #000000;
-    }
-    &:focus {
-      background-color: #{mat.get-color-from-palette($arm-success, 500)} !important;
-      color: #000000;
-    }
-  }
-  &.mat-warn {
-    background-color: #{mat.get-color-from-palette($arm-warn, 500)} !important;
-    i {
-      color: #{mat.get-color-from-palette($arm-warn, 500)} !important;
-    }
-    &:hover {
-      background-color: #{mat.get-color-from-palette($arm-warn, 500)} !important;
-      color: #000000;
-    }
-    &:focus {
-      background-color: #{mat.get-color-from-palette($arm-warn, 500)} !important;
-      color: #000000;
-    }
-  }
-}
-// MatChip class overrides [END]
-// MatSlideToggle class overrides [START]
-// https://material.angular.io/components/slide-toggle/api
-mat-slide-toggle {
-  &.sof-slide-toggle {
-    height: auto;
-    .mdc-switch__track {
-      height: 22px !important;
-      width: 32px !important;
-      border-radius: 24px !important;
-    }
-    .mdc-switch__handle {
-      height: 20px !important;
-      width: 20px !important;
-      border-radius: 20px !important;
-      left: -3px !important;
-      border: 1px solid var(--neutral-color-300-parts) !important;
-      .mdc-switch__shadow {
-        background: #fff !important;
-      }
-    }
-    .mdc-switch__ripple {
-      height: 0px !important;
-      width: 0px !important;
-    }
-    label {
-      font-family: "Poppins" !important;
-      font-style: normal !important;
-      font-weight: 400 !important;
-      font-size: 14px !important;
-      line-height: 150% !important;
-      white-space: normal !important;
-      flex-direction: row;
-      align-items: start !important;
-    }
-  }
-  &.sof-slide-toggle[size="large"] {
-    label {
-      font-family: "Poppins" !important;
-      font-style: normal !important;
-      font-weight: 400 !important;
-      font-size: 16px !important;
-      line-height: 150% !important;
-      white-space: normal !important;
-    }
-  }
-}
-mat-slide-toggle.sof-slide-toggle {
-  &.mat-primary {
-    --mdc-switch-selected-focus-state-layer-color: var(--primary-color-300-parts);
-    --mdc-switch-selected-handle-color: var(--primary-color-300-parts);
-    --mdc-switch-selected-hover-state-layer-color: var(--primary-color-300-parts);
-    --mdc-switch-selected-pressed-state-layer-color: var(--primary-color-300-parts);
-    --mdc-switch-selected-focus-handle-color: var(--primary-color-600-parts);
-    --mdc-switch-selected-hover-handle-color: var(--primary-color-600-parts);
-    --mdc-switch-selected-pressed-handle-color: var(--primary-color-600-parts);
-    --mdc-switch-selected-focus-track-color: var(--primary-color-500-parts);
-    --mdc-switch-selected-hover-track-color: var(--primary-color-500-parts);
-    --mdc-switch-selected-pressed-track-color: var(--primary-color-500-parts);
-    --mdc-switch-selected-track-color: var(--primary-color-500-parts);
-    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
-      .mdc-switch__handle {
-        border: 1px solid mat.get-color-from-palette($arm-primary, 500) !important;
-      }
-    }
-  }
-  &.mat-accent {
-    --mdc-switch-selected-focus-state-layer-color: var(--accent-color-300-parts);
-    --mdc-switch-selected-handle-color: var(--accent-color-300-parts);
-    --mdc-switch-selected-hover-state-layer-color: var(--accent-color-300-parts);
-    --mdc-switch-selected-pressed-state-layer-color: var(--accent-color-300-parts);
-    --mdc-switch-selected-focus-handle-color: var(--accent-color-600-parts);
-    --mdc-switch-selected-hover-handle-color: var(--accent-color-600-parts);
-    --mdc-switch-selected-pressed-handle-color: var(--accent-color-600-parts);
-    --mdc-switch-selected-focus-track-color: var(--accent-color-500-parts);
-    --mdc-switch-selected-hover-track-color: var(--accent-color-500-parts);
-    --mdc-switch-selected-pressed-track-color: var(--accent-color-500-parts);
-    --mdc-switch-selected-track-color: var(--accent-color-500-parts);
-    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
-      .mdc-switch__handle {
-        border: 1px solid mat.get-color-from-palette($arm-accent, 500) !important;
-      }
-    }
-  }
-  &.mat-warn {
-    --mdc-switch-selected-focus-state-layer-color: var(--warn-color-300-parts);
-    --mdc-switch-selected-handle-color: var(--warn-color-300-parts);
-    --mdc-switch-selected-hover-state-layer-color: var(--warn-color-300-parts);
-    --mdc-switch-selected-pressed-state-layer-color: var(--warn-color-300-parts);
-    --mdc-switch-selected-focus-handle-color: var(--warn-color-600-parts);
-    --mdc-switch-selected-hover-handle-color: var(--warn-color-600-parts);
-    --mdc-switch-selected-pressed-handle-color: var(--warn-color-600-parts);
-    --mdc-switch-selected-focus-track-color: var(--warn-color-500-parts);
-    --mdc-switch-selected-hover-track-color: var(--warn-color-500-parts);
-    --mdc-switch-selected-pressed-track-color: var(--warn-color-500-parts);
-    --mdc-switch-selected-track-color: var(--warn-color-500-parts);
-    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
-      .mdc-switch__handle {
-        border: 1px solid mat.get-color-from-palette($arm-warn, 500) !important;
-      }
-    }
-  }
-  &.mat-success {
-    --mdc-switch-selected-focus-state-layer-color: var(--success-color-300-parts);
-    --mdc-switch-selected-handle-color: var(--success-color-300-parts);
-    --mdc-switch-selected-hover-state-layer-color: var(--success-color-300-parts);
-    --mdc-switch-selected-pressed-state-layer-color: var(--success-color-300-parts);
-    --mdc-switch-selected-focus-handle-color: var(--success-color-600-parts);
-    --mdc-switch-selected-hover-handle-color: var(--success-color-600-parts);
-    --mdc-switch-selected-pressed-handle-color: var(--success-color-600-parts);
-    --mdc-switch-selected-focus-track-color: var(--success-color-500-parts);
-    --mdc-switch-selected-hover-track-color: var(--success-color-500-parts);
-    --mdc-switch-selected-pressed-track-color: var(--success-color-500-parts);
-    --mdc-switch-selected-track-color: var(--success-color-500-parts);
-    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
-      .mdc-switch__handle {
-        border: 1px solid mat.get-color-from-palette($arm-success, 500) !important;
-      }
-    }
-  }
-  &.mat-error {
-    --mdc-switch-selected-focus-state-layer-color: var(--error-color-300-parts);
-    --mdc-switch-selected-handle-color: var(--error-color-300-parts);
-    --mdc-switch-selected-hover-state-layer-color: var(--error-color-300-parts);
-    --mdc-switch-selected-pressed-state-layer-color: var(--error-color-300-parts);
-    --mdc-switch-selected-focus-handle-color: var(--error-color-600-parts);
-    --mdc-switch-selected-hover-handle-color: var(--error-color-600-parts);
-    --mdc-switch-selected-pressed-handle-color: var(--error-color-600-parts);
-    --mdc-switch-selected-focus-track-color: var(--error-color-500-parts);
-    --mdc-switch-selected-hover-track-color: var(--error-color-500-parts);
-    --mdc-switch-selected-pressed-track-color: var(--error-color-500-parts);
-    --mdc-switch-selected-track-color: var(--error-color-500-parts);
-    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
-      .mdc-switch__handle {
-        border: 1px solid mat.get-color-from-palette($arm-error, 500) !important;
-      }
-    }
-  }
-  &.mat-info {
-    --mdc-switch-selected-focus-state-layer-color: var(--info-color-300-parts);
-    --mdc-switch-selected-handle-color: var(--info-color-300-parts);
-    --mdc-switch-selected-hover-state-layer-color: var(--info-color-300-parts);
-    --mdc-switch-selected-pressed-state-layer-color: var(--info-color-300-parts);
-    --mdc-switch-selected-focus-handle-color: var(--info-color-600-parts);
-    --mdc-switch-selected-hover-handle-color: var(--info-color-600-parts);
-    --mdc-switch-selected-pressed-handle-color: var(--info-color-600-parts);
-    --mdc-switch-selected-focus-track-color: var(--info-color-500-parts);
-    --mdc-switch-selected-hover-track-color: var(--info-color-500-parts);
-    --mdc-switch-selected-pressed-track-color: var(--info-color-500-parts);
-    --mdc-switch-selected-track-color: var(--info-color-500-parts);
-    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
-      .mdc-switch__handle {
-        border: 1px solid mat.get-color-from-palette($arm-info, 500) !important;
-      }
-    }
-  }
-  &.mat-neutral {
-    --mdc-switch-selected-focus-state-layer-color: var(--neutral-color-300-parts);
-    --mdc-switch-selected-handle-color: var(--neutral-color-300-parts);
-    --mdc-switch-selected-hover-state-layer-color: var(--neutral-color-300-parts);
-    --mdc-switch-selected-pressed-state-layer-color: var(--neutral-color-300-parts);
-    --mdc-switch-selected-focus-handle-color: var(--neutral-color-600-parts);
-    --mdc-switch-selected-hover-handle-color: var(--neutral-color-600-parts);
-    --mdc-switch-selected-pressed-handle-color: var(--neutral-color-600-parts);
-    --mdc-switch-selected-focus-track-color: var(--neutral-color-500-parts);
-    --mdc-switch-selected-hover-track-color: var(--neutral-color-500-parts);
-    --mdc-switch-selected-pressed-track-color: var(--neutral-color-500-parts);
-    --mdc-switch-selected-track-color: var(--neutral-color-500-parts);
-    .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
-      .mdc-switch__handle {
-        border: 1px solid #000000de !important;
-      }
-    }
-  }
-}
-mat-slide-toggle.sof-slide-toggle {
-  &:has(.mdc-switch--disabled) label {
-    color: rgba(0, 0, 0, 0.87) !important;
-  }
-}
-// MatSlideToggle class overrides [END]
-.mobile-sr-only {
-  @media only screen and (max-width: $mat-lt-sm) {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-  }
-}
-.mobile-no-card {
-  padding: 36px 30px !important;
-  @media only screen and (max-width: $mat-lt-sm) {
-    background: transparent !important;
-    box-shadow: none !important;
-    padding: 0 !important;
-  }
-}
-.sm-screen-no-card {
-  padding: 36px 30px !important;
-  @media only screen and (max-width: $mat-lt-md) {
-    background: transparent !important;
-    box-shadow: none !important;
-    padding: 0 !important;
-  }
-}
-.sm-screen-no-white-bg {
-  @media only screen and (max-width: $mat-lt-md) {
-    background: transparent !important;
-  }
-}
-.sm-screen-card-shadow-z1 {
-  @media only screen and (max-width: $mat-lt-md) {
-    box-shadow:
-      0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-      0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-      0px 1px 3px 0px rgba(0, 0, 0, 0.12);
-  }
-}
-.sm-screen-op-7 {
-  @media only screen and (max-width: $mat-lt-md) {
-    opacity: 0.7;
-  }
-}
-.sm-d-inline-flex {
-  @media only screen and (max-width: $mat-lt-md) {
-    display: inline-flex !important;
-  }
-}
-.mobile-no-h-margin {
-  @media only screen and (max-width: $mat-lt-sm) {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-  }
-}
-.mobile-no-h-padding {
-  @media only screen and (max-width: $mat-lt-sm) {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-}
-.mobile-full-width {
-  @media only screen and (max-width: $mat-lt-sm) {
-    width: 100%;
-  }
-}
-.sm-screen-full-width {
-  @media only screen and (max-width: $mat-lt-md) {
-    width: 100%;
-  }
-}
-.word-wrap-checkboxes-override label {
-  white-space: initial !important;
-  @media only screen and (max-width: $mat-lt-md) {
-    white-space: initial;
-  }
-}
-.sm-full-width-datepicker {
-  @media only screen and (max-width: $mat-lt-md) {
-    width: 100%;
-    .mat-mdc-form-field-infix,
-    .mat-mdc-form-field-infix>input {
-      width: 100% !important;
-    }
-  }
-}
-.sof-tokenizer-button-btn-container {
-  @media only screen and (max-width: $mat-lt-md) {
-    flex-direction: column-reverse !important;
-    width: 100% !important;
-    button {
-      margin: initial !important;
-      margin-bottom: 10px !important;
-    }
-  }
-}
-.info-icon.mat-icon,
-.help-icon.mat-icon {
-  @media only screen and (max-width: $mat-lt-md) {
-    padding-top: 10px !important;
-  }
-}
-.sof-ar-header--left.sof-ar-mobile-navigation {
-  @media only screen and (max-width: $mat-lt-sm) {
-    margin-left: 35px !important;
-  }
-}
-@media screen and (max-width: $mat-lt-md) {
-  .hidden-small-screen {
-    display: none !important;
-  }
-}
-@media screen and (max-width: $mat-lt-lg) {
-  .hidden-md-screen {
-    display: none !important;
-  }
-}
-@media screen and (min-width: $mat-gt-sm) {
-  .visible-small-screen {
-    display: none !important;
-  }
-}
-@media screen and (min-width: $mat-gt-md) {
-  .visible-md-screen {
-    display: none !important;
-  }
-}
-.mat-card-mobile-header-override {
-  background: mat.get-color-from-palette($arm-neutral, 300);
-  padding: 16px;
-  margin: 0 -16px;
-}
-.mat-card-mobile-action-buttons-footer-override {
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-  padding-top: 16px;
-  margin-top: 36px;
-}
-.mat-card-mobile-action-buttons-override {
-  button {
-    transform: scale(0.9);
-  }
-}
-.sm-m-b-16 {
-  @media only screen and (max-width: $mat-lt-md) {
-    margin-bottom: 16px !important;
-  }
-}
-.sm-m-b-24 {
-  @media only screen and (max-width: $mat-lt-md) {
-    margin-bottom: 24px !important;
-  }
-}
-.sm-m-v-24 {
-  @media only screen and (max-width: $mat-lt-md) {
-    margin-top: 24px !important;
-    margin-bottom: 24px !important;
-  }
-}
-.sm-m-b-32 {
-  @media only screen and (max-width: $mat-lt-md) {
-    margin-bottom: 32px !important;
-  }
-}
-.sm-m-b-64 {
-  @media only screen and (max-width: $mat-lt-md) {
-    margin-bottom: 64px !important;
-  }
-}
-.sm-screen-m-a-0 {
-  @media screen and (max-width: $mat-lt-md) {
-    margin: 0 !important;
-  }
-}
-.sm-screen-m-l-0 {
-  @media screen and (max-width: $mat-lt-md) {
-    margin-left: 0 !important;
-  }
-}
-.sm-screen-m-h-0 {
-  @media screen and (max-width: $mat-lt-md) {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-  }
-}
-.sm-screen-p-a-0 {
-  @media screen and (max-width: $mat-lt-md) {
-    padding: 0 !important;
-  }
-}
-.sm-screen-p-h-0 {
-  @media screen and (max-width: $mat-lt-md) {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-}
-.md-screen-p-a-0 {
-  @media screen and (max-width: $mat-lt-lg) {
-    padding: 0 !important;
-  }
-}
-.md-m-v-24 {
-  @media only screen and (max-width: $mat-lt-lg) {
-    margin-top: 24px !important;
-    margin-bottom: 24px !important;
-  }
-}
-/** Mobile Table */
-@mixin mobile-responsive-table {
-  max-height: none !important;
-  overflow-y: auto !important;
-  .mat-mdc-table {
-    border: 0;
-    vertical-align: middle;
-    .mat-mdc-header-row {
-      min-height: 0;
-      height: 0;
-    }
-    .mat-mdc-header-cell {
-      border: 10px solid;
-      clip: rect(0 0 0 0);
-      height: 1px;
-      min-height: 1px;
-      margin: -1px;
-      padding: 0;
-      position: absolute;
-      width: 1px;
-    }
-    .mat-mdc-row {
-      padding: 10px 20px 0 20px;
-      border-bottom: 5px solid #ddd;
-      display: block;
-      min-height: 1px;
-      height: auto;
-    }
-    td.mat-mdc-cell:first-of-type {
-      height: 48px;
-    }
-    .mat-mdc-cell {
-      display: block;
-      font-size: initial;
-      height: auto;
-      padding: 8px 0;
-      border-bottom-color: transparent;
-      text-align: initial;
-      &.action-buttons {
-        border-top: 1px solid mat.get-color-from-palette($arm-neutral, 300);
-        margin-top: 24px;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        padding-bottom: 0;
-        margin-bottom: -8px;
-        &:before {
-          content: none;
-        }
-      }
-      &:before {
-        content: attr(data-label) ": ";
-        float: left;
-        font-weight: 600;
-        padding-right: 5px;
-      }
-      &:last-child {
-        border-bottom: 0;
-      }
-      &:first-child {
-        margin-top: 4%;
-      }
-      &:first-of-type {
-        padding-left: 0;
-        margin: -10px -20px 8px -20px;
-        padding: 16px 20px 16px 20px;
-        background: mat.get-color-from-palette($arm-neutral, 300);
-        box-sizing: border-box;
-        height: auto;
-      }
-    }
-    td.mat-mdc-cell.action-buttons {
-      margin-bottom: 8px;
-    }
-  }
-  @content;
-}
-@media screen and (max-width: $mat-lt-md) {
-  .mat-responsive-table-override-sm {
-    @include mobile-responsive-table;
-  }
-}
-@media screen and (max-width: $mat-lt-lg) {
-  .mat-responsive-table-override-md {
-    @include mobile-responsive-table;
-  }
-}
-/** Calendar Settings */
-.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-  color: rgba(0, 0, 0, 0.38) !important;
-}
-.mat-calendar-previous-button,
-.mat-calendar-next-button,
-.mat-calendar-period-button {
-  color: #000000 !important;
-  font-weight: 600 !important;
-  font-size: 14px !important;
-  letter-spacing: 0px !important;
-}
-.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-  background-color: mat.get-color-from-palette($arm-primary, 500) !important;
-  color: white;
-}
-body .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-  color: white;
-}
-.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-  border: none;
-}
-body .mat-calendar-body-today.mat-calendar-body-selected {
-  box-shadow: none;
-}
-.mat-calendar-body-in-range::before {
-  background: mat.get-color-from-palette($arm-primary, 50) !important;
-}
-.mat-calendar-body-selected {
-  background-color: mat.get-color-from-palette($arm-primary, 500) !important;
-  border: none;
-}
-.mat-datepicker-content {
-  border-radius: 10px !important;
-}
-.mat-calendar-previous-button.mat-button-disabled,
-.mat-calendar-next-button.mat-button-disabled {
-  color: rgba(0, 0, 0, 0.54) !important;
-}
-.mat-calendar-table-header th {
-  font-size: 14px !important;
-  line-height: 30px;
-  color: rgba(0, 0, 0, 0.6) !important;
-}
-.mat-calendar-table-header-divider {
-  position: absolute !important;
-  left: 20px;
-  width: -webkit-fill-available;
-  right: 20px;
-}
-/** text emphasis classes (per design) */
-[text-high-emphasis],
-.text-high-emphasis {
-  color: $text-high-emphasis;
-}
-[text-medium-emphasis],
-.text-medium-emphasis {
-  color: $text-medium-emphasis;
-}
-[text-low-emphasis],
-.text-low-emphasis {
-  color: $text-low-emphasis;
-}
+@use "@angular/material" as mat;
-[text-inverse],
-.text-inverse {
-  color: $text-inverse;
-}
+/** Defines the main theme / color palettes for your app. */
+@use "./arm-theme";
+@forward "./arm-theme";
+/** Responsive design rules, ensuring styles adapt to different screen sizes. */
+@use "./responsive";
+/** Sets custom fonts, sizes, and styles to create a unified look across the library. */
+@use "./typography";
+/** Utility classes for spacing, alignment, and other common styles. */
+@use "./utility";
+/** SCSS variables (like colors, breakpoints, etc.) used throughout the library for easy customization and consistency. */
+@use "./variables";
+@forward "./variables";
+/**
+  The 'material-override' folder contains overrides for specific Angular Material components.
+*/
+@use "./material-override/button";
+@use "./material-override/button-toggle-group";
+@use "./material-override/calendar";
+@use "./material-override/checkbox";
+@use "./material-override/chip";
+@use "./material-override/form-field";
+@use "./material-override/radio-button";
+@use "./material-override/slider";
+@use "./material-override/switch";
+@use "./material-override/tooltip";
+/**
+  The 'deprecated' folder contains styles that are deprecated but still available for backward compatibility.
+  Comments indicate the preferred alternative, helping users transition away from deprecated classes in favor of newer components or styles.
+*/
+@use "./deprecated/button-deprecated"; // replace with "/material-override/button"
+@use "./deprecated/dialog-deprecated"; // replace with "sof-modal" component
+@use "./deprecated/material-override-deprecated"; // currently no replacement
+@use "./deprecated/table-deprecated"; // replace with ag-grid table component
+@use "./deprecated/tooltip-deprecated"; // replace with "/material-override/tooltip"
+/**
+  Angular Material core mix-in,
+  Since it's included in this main file, applications using this library do not need to include it separately.
+*/
+@include mat.core();
-body.inheritCursors * {
-  cursor: inherit !important;
-}
+/**
+  This file acts as an index,
+  Please do not include any actual css code in this file.
+*/