@softheon/armature 10.27.2 → 10.28.1

package/assets/styles/sof-styles.scss

@@ -0,0 +1,1023 @@
+@import "../../../../../node_modules/@angular/material/theming";
+@import "./arm-theme.scss";
+@import "./utility";
+@import "./variables";
+
+// Theme pallets
+@include mat-core();
+$main-theme: mat-light-theme($arm-primary, $arm-accent, $arm-error);
+$main-theme-dark: mat-dark-theme($arm-primary, $arm-accent, $arm-error);
+
+body {
+  letter-spacing: 0px;
+  font-family: "Poppins", sans-serif !important;
+  font-size: 14px;
+  @include angular-material-theme($main-theme);
+  margin: 0 !important;
+}
+
+h1.merriweather {
+  font-family: "Merriweather", 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;
+  }
+}
+
+h1.poppins {
+  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;
+  @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-color($arm-primary);
+}
+
+.input-icon {
+  font-size: 1.5em !important;
+}
+
+.delete-icon {
+  cursor: pointer;
+  font-size: 1.5em;
+  color: mat-color($arm-warn);
+}
+
+.tooltip {
+  cursor: pointer;
+}
+
+.relative {
+  position: relative;
+}
+
+.left-align {
+  text-align: left;
+}
+
+.center-align {
+  text-align: center;
+}
+
+mat-button-toggle-group {
+  &.mat-button-toggle-group {
+    ::ng-deep &.sof-toggle-group {
+      width: 230px !important;
+      border: 1px solid mat-color($arm-primary, 500) !important;
+      border-radius: 6px !important;
+      mat-button-toggle {
+        flex: 1 1 100% !important;
+        box-sizing: border-box !important;
+        align-items: center !important;
+        flex-direction: row !important;
+        display: flex !important;
+        &.mat-button-toggle-checked {
+          background-color: mat-color($arm-primary, 100) !important;
+          color: mat-contrast($arm-primary, 500) !important;
+        }
+        button.mat-button-toggle-button {
+          .mat-button-toggle-label-content {
+            text-transform: uppercase !important;
+            font-weight: bold !important;
+            color: #000000de !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+/** Material Overrides */
+
+button.mat-flat-button {
+  &.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 his is to match specific sizing
+    }
+
+    &.full-width {
+      width: 100% !important; // Use this is button width will take size of flex percentage
+    }
+
+    &:enabled {
+      color: #ffffff !important;
+      &.mat-primary {
+        background: mat-color($arm-primary);
+        &:hover {
+          background-color: mat-color($arm-primary, 700);
+        }
+        &:focus {
+          background-color: mat-color($arm-primary, 900);
+        }
+      }
+      &.mat-accent {
+        background: mat-color($arm-accent);
+        &:hover {
+          background-color: mat-color($arm-accent, 700);
+        }
+        &:focus {
+          background-color: mat-color($arm-accent, 900);
+        }
+      }
+      &.mat-warn {
+        background: mat-color($arm-warn);
+        &:hover {
+          background-color: mat-color($arm-warn, 700);
+        }
+        &:focus {
+          background-color: mat-color($arm-warn, 900);
+        }
+      }
+      i {
+        color: #ffffff !important;
+      }
+    }
+
+    &:disabled {
+      background: #f7f7f7 !important;
+      color: rgba(0, 0, 0, 0.6) !important;
+      opacity: 1 !important;
+    }
+  }
+  &.sof-flat-button-small {
+    padding: 0px 24px !important;
+    height: 36px !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;
+
+    &:enabled {
+      color: #ffffff !important;
+      &.mat-primary {
+        background: mat-color($arm-primary);
+        &:hover {
+          background-color: mat-color($arm-primary, 700);
+        }
+        &:focus {
+          background-color: mat-color($arm-primary, 900);
+        }
+      }
+      &.mat-accent {
+        background: mat-color($arm-accent);
+        &:hover {
+          background-color: mat-color($arm-accent, 700);
+        }
+        &:focus {
+          background-color: mat-color($arm-accent, 900);
+        }
+      }
+      &.mat-warn {
+        background: mat-color($arm-warn);
+        &:hover {
+          background-color: mat-color($arm-warn, 700);
+        }
+        &:focus {
+          background-color: mat-color($arm-warn, 900);
+        }
+      }
+      i {
+        color: #ffffff !important;
+      }
+    }
+
+    &:disabled {
+      background: #f7f7f7 !important;
+      color: rgba(0, 0, 0, 0.6) !important;
+      opacity: 1 !important;
+    }
+  }
+}
+
+button.mat-stroked-button {
+  &.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 his 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-color($arm-primary, 50) !important;
+        color: mat-color($arm-primary) !important;
+        i {
+          color: mat-color($arm-primary) !important;
+        }
+        &:hover {
+          background-color: mat-color($arm-primary, 100) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+        &:focus {
+          background-color: mat-color($arm-primary, 200) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+      }
+      &.mat-accent {
+        background-color: mat-color($arm-accent, 50) !important;
+        color: mat-color($arm-accent) !important;
+        i {
+          color: mat-color($arm-accent) !important;
+        }
+        &:hover {
+          background-color: mat-color($arm-accent, 100) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+        &:focus {
+          background-color: mat-color($arm-accent, 200) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+      }
+      &.mat-warn {
+        background-color: mat-color($arm-warn, 50) !important;
+        color: mat-color($arm-warn) !important;
+        i {
+          color: mat-color($arm-warn) !important;
+        }
+        &:hover {
+          background-color: mat-color($arm-warn, 100) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+        &:focus {
+          background-color: mat-color($arm-warn, 200) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+      }
+    }
+
+    &:disabled {
+      background: #f7f7f7 !important;
+      color: rgba(0, 0, 0, 0.6) !important;
+      opacity: 1 !important;
+    }
+  }
+  &.sof-stroked-button-small {
+    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;
+
+    &:enabled {
+      &.mat-primary {
+        background-color: mat-color($arm-primary, 50) !important;
+        color: mat-color($arm-primary) !important;
+        i {
+          color: mat-color($arm-primary) !important;
+        }
+        &:hover {
+          background-color: mat-color($arm-primary, 100) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+        &:focus {
+          background-color: mat-color($arm-primary, 200) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+      }
+      &.mat-accent {
+        background-color: mat-color($arm-accent, 50) !important;
+        color: mat-color($arm-accent) !important;
+        i {
+          color: mat-color($arm-accent) !important;
+        }
+        &:hover {
+          background-color: mat-color($arm-accent, 100) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+        &:focus {
+          background-color: mat-color($arm-accent, 200) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+      }
+      &.mat-warn {
+        background-color: mat-color($arm-warn, 50) !important;
+        color: mat-color($arm-warn) !important;
+        i {
+          color: mat-color($arm-warn) !important;
+        }
+        &:hover {
+          background-color: mat-color($arm-warn, 100) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+        &:focus {
+          background-color: mat-color($arm-warn, 200) !important;
+          color: white !important;
+          i {
+            color: white !important;
+          }
+        }
+      }
+    }
+
+    &:disabled {
+      background: #f7f7f7 !important;
+      color: rgba(0, 0, 0, 0.6) !important;
+      opacity: 1 !important;
+    }
+  }
+  &.action-btn {
+    font-family: Poppins !important;
+    font-style: normal !important;
+    font-weight: 600 !important;
+    font-size: 16px !important;
+    line-height: 24px !important;
+    padding: 0px 24px !important;
+    height: 36px !important;
+    letter-spacing: 0.05em !important;
+    text-transform: uppercase !important;
+    background: white !important;
+    border: 2px solid black !important;
+    box-sizing: border-box !important;
+    border-radius: 6px !important;
+    color: black !important;
+    white-space: normal !important;
+    i {
+      color: black !important;
+    }
+    &.mat-primary {
+      color: mat-color($arm-primary) !important;
+      border: 2px solid mat-color($arm-primary) !important;
+      i {
+        color: mat-color($arm-primary) !important;
+      }
+    }
+    &.mat-accent {
+      color: mat-color($arm-accent) !important;
+      border: 2px solid mat-color($arm-accent) !important;
+      i {
+        color: mat-color($arm-accent) !important;
+      }
+    }
+    &.mat-warn {
+      color: mat-color($arm-warn) !important;
+      border: 2px solid mat-color($arm-warn) !important;
+      i {
+        color: mat-color($arm-warn) !important;
+      }
+    }
+  }
+}
+
+mat-card {
+  &.mat-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-dialog-title {
+  font-family: Poppins !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  font-size: 24px !important;
+  line-height: 36px !important;
+  letter-spacing: normal !important;
+}
+
+.mat-dialog-content {
+  display: block !important;
+  margin: 0 -24px !important;
+  padding: 0 0px !important ;
+  max-height: 65vh !important;
+  overflow: auto !important;
+}
+
+.mat-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;
+}
+
+.mat-list-base {
+  padding-top: 0px !important;
+}
+
+::ng-deep .mat-tooltip {
+  cursor: pointer !important;
+  width: 234px !important;
+  height: auto !important;
+  font-family: "Poppins", sans-serif !important;
+  font-size: 12px !important;
+  font-style: normal !important;
+  font-weight: 400 !important;
+  line-height: 18px !important;
+  letter-spacing: 0.4px !important;
+  text-align: left !important;
+  display: flex !important;
+  align-items: center !important;
+  color: #ffffff !important;
+  background-color: #333333 !important;
+}
+
+.mat-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;
+}
+
+// We want to avoid using ng-deep, but until we organize our css cascading and get a set override file,
+// it may need to be used or at the very least used with the combination of a custom class (to prevent it from bleeding into other components)
+// in this case we used ng-deep on 'sof-form-field'. Doing it on the mat-form-field level (i.e. ::ng-deep mat-form-field.sof-form-field,
+// still bleeds into other components
+mat-form-field {
+  ::ng-deep &.sof-form-field {
+    .mat-form-field-wrapper {
+      padding: 0px !important;
+    }
+    .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix {
+      padding-left: 0.5em !important;
+      padding-right: 0.5em !important;
+    }
+    .mat-form-field-wrapper
+      .mat-form-field-flex
+      .mat-form-field-infix
+      .mat-form-field-label-wrapper
+      .mat-form-field-label {
+      padding-left: 0.5em !important;
+      padding-right: 0.5em !important;
+    }
+    .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-prefix {
+      top: 0em !important;
+    }
+    .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-suffix {
+      top: 0em !important;
+    }
+  }
+}
+
+.toggle-button-left {
+  border: 1px solid mat-color($arm-primary, 500);
+  border-radius: 3px 0px 0px 3px;
+  width: 120px;
+}
+
+.toggle-button-right {
+  border: 1px solid mat-color($arm-primary, 500);
+  border-radius: 0px 3px 3px 0px;
+  width: 120px;
+}
+
+::ng-deep .mat-button-toggle-checked {
+  background-color: mat-color($arm-primary, 100) !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;
+  }
+}
+
+.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 .mat-checkbox-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-form-field-infix,
+    .mat-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: $light-grey;
+  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-table {
+    border: 0;
+    vertical-align: middle;
+
+    .mat-header-row {
+      min-height: 0;
+      height: 0;
+    }
+
+    .mat-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-row {
+      padding: 10px 20px 0 20px;
+      border-bottom: 5px solid #ddd;
+      display: block;
+      min-height: 1px;
+      height: auto;
+    }
+
+    td.mat-cell:first-of-type {
+      height: 48px;
+    }
+
+    .mat-cell {
+      display: block;
+      font-size: initial;
+      height: auto;
+      padding: 8px 0;
+      border-bottom-color: transparent;
+      text-align: initial;
+
+      &.action-buttons {
+        border-top: 1px solid $light-grey;
+        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: $light-grey;
+        box-sizing: border-box;
+        height: auto;
+      }
+    }
+
+    td.mat-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;
+  }
+}