new-front-common-library 0.0.75 → 0.0.77-ERGO-ROBOTO

package/assets/css/_global.scss

@@ -1,692 +1,692 @@
-@import url('https://fonts.googleapis.com/css2?family=Oxygen&display=swap');
-@import url('https://fonts.googleapis.com/css?family=Poppins');
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
-
-@import "~@ng-select/ng-select/themes/default.theme.css";
-
-@import "mat-palettes";
-
-body, html {
-  margin: 0;
-  padding: 0;
-  font-family: 'Sofia Pro' !important;
-}
-
-.page-container {
-  flex: 1;
-  margin-top: 64px;
-  position: relative;
-  z-index: 1;
-  display: block;
-  height: 100%;
-  overflow: auto;
-}
-
-.spacer {
-  flex: 1 1 auto;
-}
-
-.toolbar-spacer {
-  flex: 1 1 auto;
-}
-
-// Removes arrow in mat-selech
-.withoutArrow {
-  .mat-select-arrow {
-    border: none;
-  }
-}
-
-// Striped alt colors for rows in mat-table
-.highlight {
-  background: #f4f4f6 !important;
-}
-
-// Bottom border for mat card
-.mat-card-border-bottom {
-  border-bottom: 1px solid #e2e5e8;
-}
-
-.custom-colored-checkbox .mat-checkbox-frame {
-  border-color: ghostwhite !important;
-}
-
-//Text next to icons
-.icon-text {
-  display: flex !important;
-  align-items: center !important;
-  font-size: 20px !important;
-  margin-bottom: 5px;
-  line-height: 25px;
-  font-style: normal;
-  font-weight: 900;
-}
-
-
-.custom-switch {
-  font-family: 'Poppins' !important;
-
-  .switch-small:focus {
-    outline: none;
-  }
-}
-
-.card-header-title-icon {
-  margin-right: 7px;
-
-}
-
-.mat-table {
-  box-shadow: none !important;
-  //border: 2px solid;
-}
-
-.mat-form-field {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 2px;
-
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  line-height: 12px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.25px;
-}
-
-.mat-form-field-outline {
-  border-style: none;
-  border-radius: 4px;
-}
-
-.mat-form-field button {
-  height: 1em !important;
-}
-
-.mat-row .mat-form-field .mat-datepicker-toggle-default-icon {
-  height: 15px !important;
-  margin-top: -8px;
-}
-
-.datepicker .mat-datepicker-toggle-default-icon {
-  height: 15px !important;
-  margin: 0 0 0 5px !important
-}
-
-.mat-form-field-suffix .mat-datepicker-toggle-default-icon {
-  height: 15px !important;
-}
-
-.mat-select-trigger {
-  height: 12px !important;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.form-group > mat-label {
-  text-transform: uppercase;
-  font-size: 9px;
-}
-
-input {
-  font-size: 12px !important;
-}
-
-textarea {
-  font-size: 12px !important;
-}
-
-.mat-select-value {
-  font-size: 12px;
-}
-
-.mat-select-arrow {
-  margin: 2px 0 0 0;
-}
-
-.mat-option-text {
-  font-size: 12px;
-}
-
-.mat-input-value {
-  font-size: 12px;
-}
-
-.mat-form-field-appearance-outline .mat-form-field-infix {
-  padding: 0 !important;
-  border-top: 8px solid transparent !important;
-  border-bottom: 5px solid transparent !important;
-}
-
-.mat-form-field-appearance-outline .mat-form-field-suffix {
-
-}
-
-.mat-form-field .mat-icon {
-  font-size: 15px !important;
-}
-
-.mat-form-field-suffix .mat-icon-button {
-  width: 1em !important;
-}
-
-.table .mat-form-field-infix {
-  width: 100px;
-}
-
-//.mat-form-field-appearance-outline .mat-form-field-flex {
-//  margin-top: -1em !important;
-//}
-//
-//.mat-input-element {
-//  margin-top: -0.5em !important;
-//}
-//
-.mat-form-field-appearance-outline .mat-select-arrow-wrapper {
-  transform: none;
-}
-
-.mat-form-field-wrapper {
-  padding-bottom: 0.9em !important;
-  width: 100%;
-}
-
-.mat-form-field-appearance-outline .mat-form-field-wrapper {
-  margin: -2px;
-}
-
-.consult-info-label {
-  height: 8px;
-
-  font-family: Sofia Pro;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 8px;
-  line-height: 8px;
-
-
-  align-items: center;
-  letter-spacing: 0.25px;
-  text-transform: uppercase;
-}
-
-.consult-info-data {
-  height: 18px;
-
-  font-family: Source Sans Pro;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 18px;
-
-  align-items: center;
-  letter-spacing: 0.25px;
-}
-
-.label-consult label {
-  height: 8px;
-
-  font-family: Sofia Pro;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 9px;
-  line-height: 8px;
-
-
-  align-items: center;
-  text-align: left;
-  letter-spacing: 0.25px;
-  text-transform: uppercase;
-}
-
-.span-consult span {
-  height: 18px;
-
-  font-family: Source Sans Pro;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 18px;
-
-  align-items: center;
-  text-align: left;
-  letter-spacing: 0.25px;
-}
-
-.consult-info .form-group {
-  margin-bottom: 10px;
-}
-
-.sub-toolbar {
-  height: 48px !important;
-}
-
-.sub-toolbar .title {
-  height: 52px !important;
-
-  //font-family: Source Sans Pro;
-  font-style: normal;
-  font-weight: 900;
-  font-size: 24px;
-  line-height: 30px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.25px;
-}
-
-.sub-toolbar i {
-  font-size: 30px;
-}
-
-.home-button button {
-  height: 32px;
-}
-
-.ellipsis {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden
-}
-
-.btn {
-  height: 24px;
-  padding: 2px;
-  box-shadow: 0px 1px 2px rgba(68, 93, 123, 0.16), inset 0px 2px 4px rgba(255, 255, 255, 0.08), inset 0px -2px 4px rgba(68, 93, 123, 0.08);
-  border-radius: 4px;
-
-  font-family: Sofia Pro;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 12px;
-  line-height: 12px;
-
-  align-items: center;
-  letter-spacing: 0.25px;
-}
-
-.mat-chip {
-  height: 22px;
-  min-height: 22px;
-  padding: 2px;
-  box-shadow: 0px 1px 2px rgba(68, 93, 123, 0.16), inset 0px 2px 4px rgba(255, 255, 255, 0.08), inset 0px -2px 4px rgba(68, 93, 123, 0.08);
-
-  font-family: Sofia Pro;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 12px !important;
-  line-height: 14px;
-
-  align-items: center;
-  letter-spacing: 0.25px;
-}
-
-.mat-chip.mat-standard-chip {
-  border-radius: 5px;
-}
-
-.mat-standard-chip.mat-chip-with-trailing-icon{
-  padding-right: 2px;
-  padding-left: 4px;
-}
-
-.mat-standard-chip .mat-chip-remove, .mat-standard-chip .mat-chip-trailing-icon{
-  margin-left: 4px;
-}
-
-
-.mat-row .mat-input-element {
-  padding: 4px;
-  border-radius: 4px;
-}
-
-.mat-row .mat-select {
-  padding: 4px 4px 4px 2px;
-  border-radius: 4px;
-}
-
-.mat-cell .btn-delete {
-  font-size: 16px;
-  height: auto;
-}
-
-.mat-cell input.mat-input-element {
-  margin-top: 0.08em !important;
-}
-
-.mat-cell .mat-form-field-invalid .mat-input-element, .mat-cell .mat-form-field-invalid .mat-select{
-  border: 2px solid red;
-}
-
-.mat-table .mat-checkbox-inner-container {
-  height: 12px;
-  width: 12px;
-  margin-top: -4px;
-}
-
-.mat-drag-panel {
-  font-size: 14px;
-}
-
-.mat-table .mat-cell {
-  font-size: 12px !important;
-  font-style: normal;
-  font-weight: normal;
-  height: auto !important;
-  padding-right: 2px;
-}
-
-.mat-expansion-panel-header {
-  font-size: 12px !important;
-}
-
-.clickable {
-  cursor: pointer !important;
-}
-
-.mat-sort-header-arrow {
-  transform: translateY(0%) !important;
-}
-
-.mat-form-field-underline {
-  display: none !important;
-}
-
-.mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline {
-  background-image: none !important;
-}
-
-.mat-raised-button {
-  min-width: 48px !important;
-}
-
-// PAGINATOR
-.mat-paginator-page-size .mat-select-trigger {
-  padding: 2px;
-}
-
-mat-paginator .mat-select-trigger {
-  height: 17.5px !important;
-}
-
-// BUTTONS
-
-.action-button {
-  font-family: Sofia Pro;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 32px;
-  box-shadow: 0px 2px 2px rgba(68, 93, 123, 0.16), inset 0px 3px 6px rgba(255, 255, 255, 0.08), inset 0px -3px 6px rgba(68, 93, 123, 0.08);
-  border-radius: 6px;
-  width: auto;
-  padding: 0 8px 0 8px;
-}
-
-.action-menu .mat-menu-item {
-  height: 24px;
-  line-height: 24px;
-}
-
-.action-menu .material-icons-outlined {
-  font-size: 15px;
-  margin-right: 10px;
-  margin-bottom: 2px;
-}
-
-.action-menu span {
-  vertical-align: middle;
-}
-
-.mat-menu-panel {
-  min-height: auto !important;
-}
-
-.save-button {
-  font-family: Sofia Pro;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 32px;
-  box-shadow: 0px 2px 2px rgba(68, 93, 123, 0.16), inset 0px 3px 6px rgba(255, 255, 255, 0.08), inset 0px -3px 6px rgba(68, 93, 123, 0.08);
-  border-radius: 6px;
-  width: auto;
-  padding: 0 8px 0 8px;
-}
-
-.cancel-button {
-  font-style: normal;
-  font-size: 32px;
-  line-height: 32px;
-  box-shadow: 0px 2px 2px rgba(68, 93, 123, 0.16), inset 0px 3px 6px rgba(255, 255, 255, 0.08), inset 0px -3px 6px rgba(68, 93, 123, 0.08);
-  border-radius: 6px;
-  width: auto;
-  padding: 0 8px 0 8px;
-  cursor: pointer;
-}
-
-.expand-button {
-  background-color: $gray-blue-primary !important;
-  color: white !important;
-  font-family: Sofia Pro;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 12px;
-  line-height: 12px;
-  height: 24px;
-  padding: 5px;
-}
-
-.expand-button span {
-  color: #FFFFFF;
-  font-size: 12px;
-}
-
-// END BUTTONS
-
-.transparent {
-  color: transparent !important;
-}
-
-// remove black line under header
-.mat-sort-header-container {
-  border-bottom: None !important;
-}
-
-.btn-title {
-  height: 24px !important;
-  font-size: 12px !important;
-  line-height: 14px;
-  box-shadow: 0px 1px 2px rgba(68, 93, 123, 0.16), inset 0px 2px 4px rgba(255, 255, 255, 0.08), inset 0px -2px 4px rgba(68, 93, 123, 0.08) !important;
-  border-radius: 4px;
-  padding: 0 5px;
-}
-
-.btn-title-icon {
-  font-size: 15px !important;
-  margin-right: 2px !important;
-}
-
-.block-title {
-  margin-bottom: 10px;
-}
-
-.block-title .title {
-  margin: 0;
-  height: 24px;
-  font-style: normal;
-  font-weight: bold !important;
-  font-size: 20px;
-  line-height: 25px;
-  display: flex;
-  align-items: center;
-  letter-spacing: 0.25px;
-}
-
-.block-title .icon {
-  margin-right: 5px;
-}
-
-.sub-toolbar .icon {
-  margin-right: 5px;
-}
-
-.table-icon {
-  font-size: 16px !important;
-}
-
-// POPUP
-
-.mat-dialog-container .btn-primary {
-  height: 24px !important;
-  color: white !important;
-  background: $blue-primary !important;
-  border: none;
-  padding: 5px 10px 5px 10px;
-  border-radius: 4px;
-  min-width: 64px;
-  margin-right: 10px;
-  cursor: pointer;
-  line-height: 15px;
-}
-
-.mat-dialog-container .btn-danger {
-  height: 24px !important;
-  color: white !important;
-  background: $red-primary !important;
-  border: none;
-  padding: 5px 10px 5px 10px;
-  border-radius: 4px;
-  min-width: 64px;
-  margin-right: 10px;
-  cursor: pointer;
-  line-height: 15px;
-}
-
-.mat-dialog-container .btn-secondary {
-  height: 24px !important;
-  color: white !important;
-  background: $purple-primary !important;
-  border: none;
-  padding: 5px 10px 5px 10px;
-  border-radius: 4px;
-  min-width: 64px;
-  margin-right: 10px;
-  cursor: pointer;
-  line-height: 15px;
-}
-
-.btn-secondary {
-  height: 24px !important;
-  color: white !important;
-  background: $purple-primary !important;
-  border: none;
-  padding: 5px 10px 5px 10px;
-  border-radius: 4px;
-  min-width: 64px;
-  margin-right: 10px;
-  cursor: pointer;
-  line-height: 15px;
-}
-
-// END POPUP
-
-.mat-select-panel {
-  max-height: 300px !important;
-  max-width: 450px !important;
-  min-width: auto !important;
-  width: auto !important;
-}
-
-// NG-SELECT
-.ng-select {
-  padding-bottom: 0.9em;
-  font-size: 12px;
-}
-
-.ng-select.ng-select-opened>.ng-select-container .ng-arrow {
-  border-color: transparent transparent $blue-primary !important;
-}
-
-.ng-select .ng-arrow-wrapper .ng-arrow {
-  border-color: $blue-primary transparent transparent !important;
-}
-
-.ng-select .ng-clear-wrapper {
-  color: $blue-primary;
-}
-
-.ng-select input {
-  font-size: 12px !important;
-  font-family: 'Sofia Pro' !important;
-  background: transparent;
-}
-
-.ng-dropdown-panel .ng-option {
-  height: 25px !important;
-  font-size: 12px;
-  padding: 2px 10px !important;
-  display: flex !important;
-  align-items: center;
-}
-
-.ng-select:not(.ng-select-focused) .ng-select-container:hover {
-  border-color: $blue-primary !important;
-  box-shadow: inset 0 0 0 rgb(0, 0, 0, 0.2), 0 0 0 1px $blue-primary;
-}
-
-// END NG-SELECT
-
-.multiline-mat-option.mat-option {
-  white-space: normal;
-  line-height: normal;
-  margin-bottom: 7px !important;
-}
-
-.thirdParty-name {
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.thirdParty-address{
-  margin-top: 0px;
-  margin-bottom: 1px;
-  font-size: 9px;
-  text-transform: capitalize;
-}
-
-
-.status-blue {
-  background: #2485ba;
-  color: white;
-}
-
-.status-green {
-  background: #60ba42;
-  color: white;
-}
-
-.status-orange {
-  background: #e8be6e;
-  color: white;
-}
-
-.status-grey {
-  background: #696969;
-  color: white;
-}
-
-.status-pink {
-  background: #a0329a;
-  color: white;
-}
-
-.status-red {
-  background: #f44336;
-  color: white;
-}
+@import url('https://fonts.googleapis.com/css2?family=Oxygen&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Poppins');
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
+
+@import "~@ng-select/ng-select/themes/default.theme.css";
+
+@import "mat-palettes";
+
+body, html {
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto' !important;
+}
+
+.page-container {
+  flex: 1;
+  margin-top: 64px;
+  position: relative;
+  z-index: 1;
+  display: block;
+  height: 100%;
+  overflow: auto;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+.toolbar-spacer {
+  flex: 1 1 auto;
+}
+
+// Removes arrow in mat-selech
+.withoutArrow {
+  .mat-select-arrow {
+    border: none;
+  }
+}
+
+// Striped alt colors for rows in mat-table
+.highlight {
+  background: #f4f4f6 !important;
+}
+
+// Bottom border for mat card
+.mat-card-border-bottom {
+  border-bottom: 1px solid #e2e5e8;
+}
+
+.custom-colored-checkbox .mat-checkbox-frame {
+  border-color: ghostwhite !important;
+}
+
+//Text next to icons
+.icon-text {
+  display: flex !important;
+  align-items: center !important;
+  font-size: 20px !important;
+  margin-bottom: 5px;
+  line-height: 25px;
+  font-style: normal;
+  font-weight: 900;
+}
+
+
+.custom-switch {
+  font-family: 'Poppins' !important;
+
+  .switch-small:focus {
+    outline: none;
+  }
+}
+
+.card-header-title-icon {
+  margin-right: 7px;
+
+}
+
+.mat-table {
+  box-shadow: none !important;
+  //border: 2px solid;
+}
+
+.mat-form-field {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2px;
+
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 12px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.25px;
+}
+
+.mat-form-field-outline {
+  border-style: none;
+  border-radius: 4px;
+}
+
+.mat-form-field button {
+  height: 1em !important;
+}
+
+.mat-row .mat-form-field .mat-datepicker-toggle-default-icon {
+  height: 15px !important;
+  margin-top: -8px;
+}
+
+.datepicker .mat-datepicker-toggle-default-icon {
+  height: 15px !important;
+  margin: 0 0 0 5px !important
+}
+
+.mat-form-field-suffix .mat-datepicker-toggle-default-icon {
+  height: 15px !important;
+}
+
+.mat-select-trigger {
+  height: 12px !important;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group > mat-label {
+  text-transform: uppercase;
+  font-size: 9px;
+}
+
+input {
+  font-size: 12px !important;
+}
+
+textarea {
+  font-size: 12px !important;
+}
+
+.mat-select-value {
+  font-size: 12px;
+}
+
+.mat-select-arrow {
+  margin: 2px 0 0 0;
+}
+
+.mat-option-text {
+  font-size: 12px;
+}
+
+.mat-input-value {
+  font-size: 12px;
+}
+
+.mat-form-field-appearance-outline .mat-form-field-infix {
+  padding: 0 !important;
+  border-top: 8px solid transparent !important;
+  border-bottom: 5px solid transparent !important;
+}
+
+.mat-form-field-appearance-outline .mat-form-field-suffix {
+
+}
+
+.mat-form-field .mat-icon {
+  font-size: 15px !important;
+}
+
+.mat-form-field-suffix .mat-icon-button {
+  width: 1em !important;
+}
+
+.table .mat-form-field-infix {
+  width: 100px;
+}
+
+//.mat-form-field-appearance-outline .mat-form-field-flex {
+//  margin-top: -1em !important;
+//}
+//
+//.mat-input-element {
+//  margin-top: -0.5em !important;
+//}
+//
+.mat-form-field-appearance-outline .mat-select-arrow-wrapper {
+  transform: none;
+}
+
+.mat-form-field-wrapper {
+  padding-bottom: 0.9em !important;
+  width: 100%;
+}
+
+.mat-form-field-appearance-outline .mat-form-field-wrapper {
+  margin: -2px;
+}
+
+.consult-info-label {
+  height: 8px;
+
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 8px;
+
+
+  align-items: center;
+  letter-spacing: 0.25px;
+  text-transform: uppercase;
+}
+
+.consult-info-data {
+  height: 18px;
+
+  font-family: Source Sans Pro;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 18px;
+
+  align-items: center;
+  letter-spacing: 0.25px;
+}
+
+.label-consult label {
+  height: 8px;
+
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 9px;
+  line-height: 8px;
+
+
+  align-items: center;
+  text-align: left;
+  letter-spacing: 0.25px;
+  text-transform: uppercase;
+}
+
+.span-consult span {
+  height: 18px;
+
+  font-family: Source Sans Pro;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 18px;
+
+  align-items: center;
+  text-align: left;
+  letter-spacing: 0.25px;
+}
+
+.consult-info .form-group {
+  margin-bottom: 10px;
+}
+
+.sub-toolbar {
+  height: 48px !important;
+}
+
+.sub-toolbar .title {
+  height: 52px !important;
+
+  //font-family: Source Sans Pro;
+  font-style: normal;
+  font-weight: 900;
+  font-size: 24px;
+  line-height: 30px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.25px;
+}
+
+.sub-toolbar i {
+  font-size: 30px;
+}
+
+.home-button button {
+  height: 32px;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden
+}
+
+.btn {
+  height: 24px;
+  padding: 2px;
+  box-shadow: 0px 1px 2px rgba(68, 93, 123, 0.16), inset 0px 2px 4px rgba(255, 255, 255, 0.08), inset 0px -2px 4px rgba(68, 93, 123, 0.08);
+  border-radius: 4px;
+
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 12px;
+
+  align-items: center;
+  letter-spacing: 0.25px;
+}
+
+.mat-chip {
+  height: 22px;
+  min-height: 22px;
+  padding: 2px;
+  box-shadow: 0px 1px 2px rgba(68, 93, 123, 0.16), inset 0px 2px 4px rgba(255, 255, 255, 0.08), inset 0px -2px 4px rgba(68, 93, 123, 0.08);
+
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 12px !important;
+  line-height: 14px;
+
+  align-items: center;
+  letter-spacing: 0.25px;
+}
+
+.mat-chip.mat-standard-chip {
+  border-radius: 5px;
+}
+
+.mat-standard-chip.mat-chip-with-trailing-icon{
+  padding-right: 2px;
+  padding-left: 4px;
+}
+
+.mat-standard-chip .mat-chip-remove, .mat-standard-chip .mat-chip-trailing-icon{
+  margin-left: 4px;
+}
+
+
+.mat-row .mat-input-element {
+  padding: 4px;
+  border-radius: 4px;
+}
+
+.mat-row .mat-select {
+  padding: 4px 4px 4px 2px;
+  border-radius: 4px;
+}
+
+.mat-cell .btn-delete {
+  font-size: 16px;
+  height: auto;
+}
+
+.mat-cell input.mat-input-element {
+  margin-top: 0.08em !important;
+}
+
+.mat-cell .mat-form-field-invalid .mat-input-element, .mat-cell .mat-form-field-invalid .mat-select{
+  border: 2px solid red;
+}
+
+.mat-table .mat-checkbox-inner-container {
+  height: 12px;
+  width: 12px;
+  margin-top: -4px;
+}
+
+.mat-drag-panel {
+  font-size: 14px;
+}
+
+.mat-table .mat-cell {
+  font-size: 12px !important;
+  font-style: normal;
+  font-weight: normal;
+  height: auto !important;
+  padding-right: 2px;
+}
+
+.mat-expansion-panel-header {
+  font-size: 12px !important;
+}
+
+.clickable {
+  cursor: pointer !important;
+}
+
+.mat-sort-header-arrow {
+  transform: translateY(0%) !important;
+}
+
+.mat-form-field-underline {
+  display: none !important;
+}
+
+.mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline {
+  background-image: none !important;
+}
+
+.mat-raised-button {
+  min-width: 48px !important;
+}
+
+// PAGINATOR
+.mat-paginator-page-size .mat-select-trigger {
+  padding: 2px;
+}
+
+mat-paginator .mat-select-trigger {
+  height: 17.5px !important;
+}
+
+// BUTTONS
+
+.action-button {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 32px;
+  box-shadow: 0px 2px 2px rgba(68, 93, 123, 0.16), inset 0px 3px 6px rgba(255, 255, 255, 0.08), inset 0px -3px 6px rgba(68, 93, 123, 0.08);
+  border-radius: 6px;
+  width: auto;
+  padding: 0 8px 0 8px;
+}
+
+.action-menu .mat-menu-item {
+  height: 24px;
+  line-height: 24px;
+}
+
+.action-menu .material-icons-outlined {
+  font-size: 15px;
+  margin-right: 10px;
+  margin-bottom: 2px;
+}
+
+.action-menu span {
+  vertical-align: middle;
+}
+
+.mat-menu-panel {
+  min-height: auto !important;
+}
+
+.save-button {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 32px;
+  box-shadow: 0px 2px 2px rgba(68, 93, 123, 0.16), inset 0px 3px 6px rgba(255, 255, 255, 0.08), inset 0px -3px 6px rgba(68, 93, 123, 0.08);
+  border-radius: 6px;
+  width: auto;
+  padding: 0 8px 0 8px;
+}
+
+.cancel-button {
+  font-style: normal;
+  font-size: 32px;
+  line-height: 32px;
+  box-shadow: 0px 2px 2px rgba(68, 93, 123, 0.16), inset 0px 3px 6px rgba(255, 255, 255, 0.08), inset 0px -3px 6px rgba(68, 93, 123, 0.08);
+  border-radius: 6px;
+  width: auto;
+  padding: 0 8px 0 8px;
+  cursor: pointer;
+}
+
+.expand-button {
+  background-color: $gray-blue-primary !important;
+  color: white !important;
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 12px;
+  height: 24px;
+  padding: 5px;
+}
+
+.expand-button span {
+  color: #FFFFFF;
+  font-size: 12px;
+}
+
+// END BUTTONS
+
+.transparent {
+  color: transparent !important;
+}
+
+// remove black line under header
+.mat-sort-header-container {
+  border-bottom: None !important;
+}
+
+.btn-title {
+  height: 24px !important;
+  font-size: 12px !important;
+  line-height: 14px;
+  box-shadow: 0px 1px 2px rgba(68, 93, 123, 0.16), inset 0px 2px 4px rgba(255, 255, 255, 0.08), inset 0px -2px 4px rgba(68, 93, 123, 0.08) !important;
+  border-radius: 4px;
+  padding: 0 5px;
+}
+
+.btn-title-icon {
+  font-size: 15px !important;
+  margin-right: 2px !important;
+}
+
+.block-title {
+  margin-bottom: 10px;
+}
+
+.block-title .title {
+  margin: 0;
+  height: 24px;
+  font-style: normal;
+  font-weight: bold !important;
+  font-size: 20px;
+  line-height: 25px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.25px;
+}
+
+.block-title .icon {
+  margin-right: 5px;
+}
+
+.sub-toolbar .icon {
+  margin-right: 5px;
+}
+
+.table-icon {
+  font-size: 16px !important;
+}
+
+// POPUP
+
+.mat-dialog-container .btn-primary {
+  height: 24px !important;
+  color: white !important;
+  background: $blue-primary !important;
+  border: none;
+  padding: 5px 10px 5px 10px;
+  border-radius: 4px;
+  min-width: 64px;
+  margin-right: 10px;
+  cursor: pointer;
+  line-height: 15px;
+}
+
+.mat-dialog-container .btn-danger {
+  height: 24px !important;
+  color: white !important;
+  background: $red-primary !important;
+  border: none;
+  padding: 5px 10px 5px 10px;
+  border-radius: 4px;
+  min-width: 64px;
+  margin-right: 10px;
+  cursor: pointer;
+  line-height: 15px;
+}
+
+.mat-dialog-container .btn-secondary {
+  height: 24px !important;
+  color: white !important;
+  background: $purple-primary !important;
+  border: none;
+  padding: 5px 10px 5px 10px;
+  border-radius: 4px;
+  min-width: 64px;
+  margin-right: 10px;
+  cursor: pointer;
+  line-height: 15px;
+}
+
+.btn-secondary {
+  height: 24px !important;
+  color: white !important;
+  background: $purple-primary !important;
+  border: none;
+  padding: 5px 10px 5px 10px;
+  border-radius: 4px;
+  min-width: 64px;
+  margin-right: 10px;
+  cursor: pointer;
+  line-height: 15px;
+}
+
+// END POPUP
+
+.mat-select-panel {
+  max-height: 300px !important;
+  max-width: 450px !important;
+  min-width: auto !important;
+  width: auto !important;
+}
+
+// NG-SELECT
+.ng-select {
+  padding-bottom: 0.9em;
+  font-size: 12px;
+}
+
+.ng-select.ng-select-opened>.ng-select-container .ng-arrow {
+  border-color: transparent transparent $blue-primary !important;
+}
+
+.ng-select .ng-arrow-wrapper .ng-arrow {
+  border-color: $blue-primary transparent transparent !important;
+}
+
+.ng-select .ng-clear-wrapper {
+  color: $blue-primary;
+}
+
+.ng-select input {
+  font-size: 12px !important;
+  font-family: 'Roboto' !important;
+  background: transparent;
+}
+
+.ng-dropdown-panel .ng-option {
+  height: 25px !important;
+  font-size: 12px;
+  padding: 2px 10px !important;
+  display: flex !important;
+  align-items: center;
+}
+
+.ng-select:not(.ng-select-focused) .ng-select-container:hover {
+  border-color: $blue-primary !important;
+  box-shadow: inset 0 0 0 rgb(0, 0, 0, 0.2), 0 0 0 1px $blue-primary;
+}
+
+// END NG-SELECT
+
+.multiline-mat-option.mat-option {
+  white-space: normal;
+  line-height: normal;
+  margin-bottom: 7px !important;
+}
+
+.thirdParty-name {
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.thirdParty-address{
+  margin-top: 0px;
+  margin-bottom: 1px;
+  font-size: 9px;
+  text-transform: capitalize;
+}
+
+
+.status-blue {
+  background: #2485ba;
+  color: white;
+}
+
+.status-green {
+  background: #60ba42;
+  color: white;
+}
+
+.status-orange {
+  background: #e8be6e;
+  color: white;
+}
+
+.status-grey {
+  background: #696969;
+  color: white;
+}
+
+.status-pink {
+  background: #a0329a;
+  color: white;
+}
+
+.status-red {
+  background: #f44336;
+  color: white;
+}