@unifylib/ui-lib 1.0.3 → 1.1.3

package/src/lib/styles/styles.scss

@@ -1,1723 +0,0 @@
-@use '@angular/material' as mat;
-@use "invoiceq-theme";
-
-@import '@angular/material/prebuilt-themes/indigo-pink.css';
-@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
-@include mat.core();
-
-
-html, body {
-  font-family: "Cairo";
-  background-color: white;
-  //overflow: hidden;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-}
-
-.hrdivider {
-  position: relative;
-  margin-top: 10vh;
-  width: 100%;
-  text-align: start;
-  color: var(--primary-color)
-}
-
-.hrdivider-mid {
-  @extend .hrdivider;
-  margin-top: 3vh !important;
-  margin-bottom: 3vh !important;
-}
-
-.hyper-link {
-  cursor: pointer;
-  color: -webkit-link
-}
-
-.hyper-link:hover {
-  text-decoration: underline;
-}
-
-.hrdivider-mini {
-  @extend .hrdivider;
-  margin-top: 1vh !important;
-  margin-bottom: 2vh !important;
-}
-
-.header-hr {
-  border-top: 1px solid rgba(0, 0, 0, 0.08);;
-}
-
-.hr-splitter {
-  border-top: 1px solid var(--primary-color-2nd);
-}
-
-.icon-design {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-}
-
-.hrdivider span {
-  position: absolute;
-  top: -11px;
-  background-color: #fff;
-  color: var(--primary-color);
-  padding: 0 10px;
-  font-weight: bold;
-  font-size: 16px;
-  margin-left: 30px;
-  margin-right: 30px;
-  text-align: center;
-}
-
-.iq_form_field {
-  border-radius: 12px !important;
-}
-
-.iq-input {
-  height: 25px;
-  margin-top: -10px !important;
-}
-
-.prefix-suffix {
-  color: #8c8c8c;
-}
-
-.iq-error {
-  font-size: 9px;
-  color: red;
-  margin-top: -15px !important;
-}
-
-.iq-company-title {
-  padding-top: 5px;
-  font-size: 16pt;
-  font-weight: bold;
-  color: var(--primary-color);
-  margin: 0.5em;
-}
-
-.tr-lang {
-  width: 24px;
-  height: 24px;
-  color: var(--accent-color);
-  font-size: 12px;
-  border-radius: 4px;
-  background: #F0F0F0;
-  font-weight: 700;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0 5px;
-}
-
-.iq-toolbar-profile {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 11px;
-  color: #222222;
-}
-
-.iq-button-action {
-  height: 48px !important;
-  @extend .iq_button !optional;
-  font-size: 1.5em !important;
-  margin-top: 4px !important;
-}
-
-.iq-button-action2 {
-  height: 52px;
-  font-weight: 600;
-  border-radius: 4px !important;
-  font-size: 1.25em !important;
-  margin-top: 10px !important;
-}
-
-.amount {
-  height: 3.69em !important;
-  border: dotted 2px !important;
-  margin-top: 4px !important;
-}
-
-.no-margin-bottom {
-  margin-bottom: 0 !important;
-}
-
-.iq-footr-button {
-  height: 48px !important;
-  @extend .iq_button !optional;
-  font-size: 1.15em !important;
-  margin-top: 4px !important;
-  border-right: solid 0px transparent;
-  border-left: solid 0px transparent;
-}
-
-.iq-items-action-button {
-  height: 48px !important;
-  @extend .iq_button !optional;
-  font-size: 1.0em !important;
-  width: 90%;
-
-}
-
-.iq-payment-method-action {
-  height: 90px !important;
-  @extend .iq_button !optional;
-  font-size: 1.50em !important;
-  margin-top: 4px !important;
-}
-
-.iq_button {
-  height: 52px;
-  font-size: 1.70em;
-  font-weight: 600;
-  border-radius: 12px !important;
-}
-
-.iq_button-small {
-  font-size: 1.10em;
-  font-weight: 600;
-  border-radius: 12px !important;
-}
-
-.iq-table-header {
-  font-size: medium;
-  background: var(--primary-color-2nd);
-  color: #FFFFFF;
-}
-
-.text-secondary {
-  font-size: medium;
-}
-
-.text-secondary-with-border {
-  font-size: medium;
-}
-
-.iq-snack-bar {
-  margin: auto !important;
-  position: absolute;
-  max-width: 60% !important;
-  top: 12vh;
-  width: 60%;
-  left: 20%;
-
-  .mat-simple-snackbar-action {
-    color: var(--accent-color) !important;
-  }
-
-}
-
-//    type: 'info' | 'success' | 'error' | 'warning';
-
-.iq-snack-bar-info {
-  @extend .iq-snack-bar;
-  border-color: #B3D4FF;
-  background-color: #DEEBFF !important;
-  color: var(--accent-color) !important;
-}
-
-.iq-snack-bar-success {
-  @extend .iq-snack-bar;
-  background-color: #d4edda !important;
-  color: #155724 !important;
-}
-
-.iq-snack-bar-error {
-  @extend .iq-snack-bar;
-  background-color: #eac6c6 !important;
-  color: #a42b2b !important;
-}
-
-.iq-snack-bar-warning {
-  @extend .iq-snack-bar;
-  color: var(--accent-color) !important;
-  border-color: #FFF0B3 !important;
-  background-color: #FFFAE6 !important;
-}
-
-.iq-lits-rows {
-  padding-left: 1%;
-  padding-right: 1%;
-  width: 100%;
-}
-
-.iq-mobile-main-title {
-  font-size: 18pt;
-}
-
-.iq-mobile-sub-title {
-  font-size: 10pt;
-}
-
-
-.invoice-label {
-  color: var(--primary-color);
-  margin: 0px;
-  font-weight: bold;
-  padding-bottom: 10px !important;
-  padding-top: 6px !important;
-  border-bottom: 1px solid lightgray;
-
-}
-
-.invoice-label-text {
-  color: var(--accent-color);
-  font-weight: normal;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  width: 100%;
-}
-
-.invoice-note-text {
-  color: var(--accent-color);
-  font-weight: normal;
-}
-
-.invoice-section {
-  font-size: 1.1em;
-}
-
-.table {
-  width: 100%;
-  margin-bottom: 1rem;
-  background-color: transparent;
-  border-collapse: collapse;
-}
-
-.row {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: 15px;
-  margin-left: 15px;
-}
-
-.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
-  float: left;
-}
-
-.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
-  position: relative;
-  min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
-  box-sizing: border-box;
-}
-
-.col-md-1 {
-  -ms-flex: 0 0 8.33333333%;
-  flex: 0 0 8.33333333%;
-  max-width: 8.33333333%;
-}
-
-.col-md-2 {
-  -ms-flex: 0 0 16.66666667%;
-  flex: 0 0 16.66666667%;
-  max-width: 16.66666667%;
-}
-
-.col-md-3 {
-  -ms-flex: 0 0 25%;
-  flex: 0 0 25%;
-  max-width: 25%;
-}
-
-.col-md-4 {
-  -ms-flex: 0 0 33.33333333%;
-  flex: 0 0 33.33333333%;
-  max-width: 33.33333333%;
-}
-
-.col-md-5 {
-  -ms-flex: 0 0 41.66666667%;
-  flex: 0 0 41.66666667%;
-  max-width: 41.66666667%;
-}
-
-.col-md-6 {
-  -ms-flex: 0 0 50%;
-  flex: 0 0 50%;
-  max-width: 50%;
-}
-
-.col-md-7 {
-  -ms-flex: 0 0 58.33333333%;
-  flex: 0 0 58.33333333%;
-  max-width: 58.33333333%;
-}
-
-.col-md-8 {
-  -ms-flex: 0 0 66.66666667%;
-  flex: 0 0 66.66666667%;
-  max-width: 66.66666667%;
-}
-
-.col-md-9 {
-  -ms-flex: 0 0 75%;
-  flex: 0 0 75%;
-  max-width: 75%;
-}
-
-.col-md-10 {
-  -ms-flex: 0 0 83.33333333%;
-  flex: 0 0 83.33333333%;
-  max-width: 83.33333333%;
-}
-
-.col-md-11 {
-  -ms-flex: 0 0 91.66666667%;
-  flex: 0 0 91.66666667%;
-  max-width: 91.66666667%;
-}
-
-.col-md-12 {
-  -ms-flex: 0 0 100%;
-  flex: 0 0 100%;
-  max-width: 100%;
-}
-
-.text-center {
-  text-align: center !important;
-}
-
-.pt-1 {
-  padding-top: 0.25rem;
-}
-
-.pt-2 {
-  padding-top: 0.5rem;
-}
-
-.pt-3 {
-  padding-top: 1rem;
-}
-
-.pt-4 {
-  padding-top: 1.5rem;
-}
-
-.pt-5 {
-  padding-top: 3rem;
-}
-
-.pb-1 {
-  padding-bottom: 0.25rem;
-}
-
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
-.pb-3 {
-  padding-bottom: 1rem;
-}
-
-.pb-4 {
-  padding-bottom: 1.5rem;
-}
-
-.pb-5 {
-  padding-bottom: 3rem;
-}
-
-//
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
-.mt-3 {
-  margin-top: 1rem;
-}
-
-.mt-4 {
-  margin-top: 1.5rem;
-}
-
-.mt-5 {
-  margin-top: 3rem;
-}
-
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
-
-.mb-2 {
-  margin-bottom: 0.5rem !important;
-}
-
-.mb-3 {
-  margin-bottom: 1rem;
-}
-
-.mb-4 {
-  margin-bottom: 1.5rem;
-}
-
-.mb-5 {
-  margin-bottom: 3rem;
-}
-
-.p-0 {
-  padding: 0;
-}
-
-.m-0 {
-  margin: 0;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.table-responsive {
-  display: block;
-  width: 100%;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-}
-
-.ag-sequence-generator-config ag-sequence-generator-config,
-.ag-sequence-generator-config > .example-box {
-  & .mat-form-field-label-wrapper,
-  & .mat-form-field-underline {
-    display: none !important;
-  }
-
-  & .mat-form-field-wrapper {
-    padding-bottom: 0 !important;
-  }
-
-  & .mat-form-field-appearance-fill .mat-form-field-infix {
-    padding: 0 !important;
-  }
-
-  & mat-form-field .mat-form-field-flex {
-    padding: 0 0 10px 0 !important;
-  }
-
-  & .mat-form-field-appearance-fill .mat-select-arrow-wrapper {
-    transform: translateY(0) !important;
-  }
-
-  & .mat-select-arrow {
-    margin: 0 15px !important;
-  }
-}
-
-@media screen and (max-width: 991px) {
-  .col-xs-1 {
-    -ms-flex: 0 0 8.33333333%;
-    flex: 0 0 8.33333333%;
-    max-width: 8.33333333%;
-  }
-  .col-xs-2 {
-    -ms-flex: 0 0 16.66666667%;
-    flex: 0 0 16.66666667%;
-    max-width: 16.66666667%;
-  }
-  .col-xs-3 {
-    -ms-flex: 0 0 25%;
-    flex: 0 0 25%;
-    max-width: 25%;
-  }
-  .col-xs-4 {
-    -ms-flex: 0 0 33.33333333%;
-    flex: 0 0 33.33333333%;
-    max-width: 33.33333333%;
-  }
-  .col-xs-5 {
-    -ms-flex: 0 0 41.66666667%;
-    flex: 0 0 41.66666667%;
-    max-width: 41.66666667%;
-  }
-  .col-xs-6 {
-    -ms-flex: 0 0 50%;
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-  .col-xs-7 {
-    -ms-flex: 0 0 58.33333333%;
-    flex: 0 0 58.33333333%;
-    max-width: 58.33333333%;
-  }
-  .col-xs-8 {
-    -ms-flex: 0 0 66.66666667%;
-    flex: 0 0 66.66666667%;
-    max-width: 66.66666667%;
-  }
-  .col-xs-9 {
-    -ms-flex: 0 0 75%;
-    flex: 0 0 75%;
-    max-width: 75%;
-  }
-  .col-xs-10 {
-    -ms-flex: 0 0 83.33333333%;
-    flex: 0 0 83.33333333%;
-    max-width: 83.33333333%;
-  }
-  .col-xs-11 {
-    -ms-flex: 0 0 91.66666667%;
-    flex: 0 0 91.66666667%;
-    max-width: 91.66666667%;
-  }
-  .col-xs-12 {
-    -ms-flex: 0 0 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-}
-
-.mat-form-field-wrapper {
-  padding-bottom: 12px !important;
-}
-
-.form-control {
-  display: block;
-  width: 100%;
-  padding: .375rem .75rem;
-  font-size: 14px;
-  line-height: 1.5;
-  color: #495057;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid #ced4da;
-  border-radius: .25rem;
-  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-  overflow: visible;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-ag-sequence-generator-config .input-group {
-  & .mat-select-value {
-    max-width: 100%;
-  }
-
-  & .mat-select-arrow-wrapper {
-    display: none;
-  }
-}
-
-/*.normal-appearance{
-  & .mat-select-arrow-wrapper{
-    display: block !important;
-    position: absolute;
-    top: 5px;
-    right: 0;
-  }
-  & .mat-select-trigger{
-    width: 100%;
-  }
-}*/
-.example-list > div > .example-box:last-child {
-  padding-bottom: 0;
-}
-
-.main-mat-form-field .mat-select-value {
-  text-align: left;
-  padding: 0 0 0 15px;
-}
-
-.w-100 {
-  width: 100% !important;
-}
-
-mat-form-field.error-field-border .mat-select-arrow {
-  color: rgba(255, 0, 0, 0.54) !important;
-}
-
-ag-sequence-generator-config {
-  padding-top: 7px;
-}
-
-ag-sequence-generator-config .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {
-  background-color: #a0dbdd;
-}
-
-ag-sequence-generator-config .mat-expansion-panel:first-of-type {
-  border-top-right-radius: 0 !important;
-  border-top-left-radius: 0 !important;
-}
-
-[dir=rtl] .text-right {
-  text-align: left !important;
-}
-
-[dir=rtl] .text-left {
-  text-align: right !important;
-}
-
-.error-input {
-  & .mat-form-field-outline-end {
-    border: 1px solid red !important;
-    border-left-style: none !important;
-  }
-
-  & .mat-form-field-outline-start {
-    border: 1px solid red !important;
-    border-right-style: none !important;
-  }
-}
-
-.rtl {
-  & .error-input {
-    & .mat-form-field-outline-end {
-      border: 1px solid red !important;
-      border-right-style: none !important;
-    }
-
-    & .mat-form-field-outline-start {
-      border: 1px solid red !important;
-      border-left-style: none !important;
-    }
-
-    & .small-box .icon {
-      left: 25px;
-      right: unset !important;
-    }
-  }
-}
-
-ag-sequence-generator-config mat-panel-description {
-  & .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
-    background-color: var(--primary-color);
-  }
-
-  & .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
-    background-color: #a0dbddc2;
-  }
-}
-
-@media only screen and (max-width: 991px) {
-  ag-sequence-generator-config .mat-expansion-panel-body {
-    padding: 0 10px 16px;
-  }
-}
-
-.rtl ag-sequence-generator-config {
-  & .new-sequence {
-    text-align: right;
-
-    & a span:last-child {
-      float: right;
-    }
-  }
-
-  & mat-panel-description .mat-slide-toggle {
-    margin-left: 0;
-    margin-right: 5px;
-  }
-
-  & .card .form-group a {
-    float: left;
-  }
-
-  & .input-group-text {
-    font-size: 14px;
-    border-top-right-radius: 0.25rem !important;
-    border-bottom-right-radius: 0.25rem !important;
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-    padding-top: 8px;
-  }
-
-  & .input-group .mat-select-value {
-    text-align: center !important;
-    font-size: 12px;
-  }
-
-  & .normal-appearance .mat-select-arrow-wrapper {
-    right: unset !important;
-    left: 0 !important;
-  }
-
-  & .pr-8px {
-    padding-right: 0 !important;
-    padding-left: 10px !important;
-  }
-
-  & .pl-8px {
-    padding-right: 10px !important;
-    padding-left: 0 !important;
-  }
-
-  .dateTimeRealTime {
-    padding-left: 0 !important;
-    padding-right: 10px !important;
-  }
-
-  & .table {
-    width: calc(100% - 1px);
-    margin: 0 auto;
-  }
-
-  mat-panel-description button {
-    font-family: 'Cairo';
-  }
-
-  & .card .mat-select-trigger {
-    padding: 0 15px 0 0;
-  }
-
-  & .new-tag {
-    margin-left: 0;
-    margin-right: 5px;
-  }
-}
-
-@media only screen and (max-width: 991px) {
-  ag-sequence-generator-config mat-expansion-panel mat-expansion-panel-header {
-    & .mat-content mat-panel-description {
-      display: none;
-    }
-
-    &.mat-expanded {
-      & mat-panel-description {
-        display: flex;
-        justify-content: space-around;
-      }
-
-      & .mat-content {
-        display: block;
-
-        & mat-panel-title {
-          display: block;
-          margin: 0;
-          margin-bottom: 10px;
-          margin-top: 15px;
-        }
-      }
-    }
-  }
-}
-
-@media only screen and (max-width: 991px) {
-  .rtl ag-sequence-generator-config {
-    & .input-group-text {
-      border-radius: 4px !important;
-    }
-
-    & .pt-0-xs > div:first-child {
-      padding-left: 10px !important;
-      padding-right: 10px !important;
-    }
-
-  }
-}
-
-ag-recaptcha.error > re-captcha > div {
-  border: 1px solid red;
-  border-radius: 5px;
-}
-
-.toggle-arraw-auto-complete {
-  content: " ";
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid;
-  margin: 0;
-  cursor: pointer;
-  position: absolute;
-  right: 5px;
-  top: 16px;
-  color: rgba(0, 0, 0, 0.54);
-}
-
-.rtl .toggle-arraw-auto-complete {
-  right: unset;
-  left: 5px;
-}
-
-ag-currencies {
-  & .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
-    background-color: var(--primary-color);
-  }
-
-  & .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
-    background-color: rgba(0, 0, 0, 0.10);
-  }
-
-  & .mat-form-field-underline {
-    display: none;
-  }
-
-  & .mat-form-field-flex {
-    padding: 0 !important;
-  }
-
-  & .mat-select-arrow-wrapper {
-    transform: translateY(0) !important;
-    padding-right: 10px;
-  }
-
-  & .form-control {
-    height: 41px;
-    background-color: #f5f5f5;
-    border: 0;
-  }
-
-  & .error-field.form-control {
-    height: 43px;
-  }
-
-  & .error-field .mat-form-field-wrapper .mat-form-field-flex {
-    border: 1px solid #ea4335;
-    border-radius: 5px;
-  }
-}
-
-#full-page {
-  min-height: 100vh;
-}
-
-.crop-image mat-dialog-container {
-  padding: 0 !important;
-  position: relative;
-  overflow: hidden !important;
-
-  & > h2 {
-    background-color: white;
-    margin: 0;
-    padding: 10px 24px;
-    font-size: 22px;
-    color: #505050;
-    font-weight: 500;
-  }
-
-  & > span {
-    position: absolute;
-    top: 2px;
-    right: 24px;
-    font-size: 26px;
-    font-weight: 500;
-    color: #505050;
-    cursor: pointer;
-  }
-
-  & mat-dialog-actions {
-    background-color: white;
-    display: flex;
-    padding: 10px 24px;
-    padding-top: 0 !important;
-    padding-bottom: 20px !important;
-  }
-
-  & mat-dialog-content {
-    padding: 0;
-
-    & .cr-slider-wrap {
-      & .cr-slider {
-        -webkit-appearance: none;
-        width: 100%;
-        height: auto;
-        background: #ffffff;
-        outline: none;
-        opacity: 1;
-        -webkit-transition: .2s;
-        transition: opacity .2s;
-        padding-bottom: 0;
-        padding-top: 0;
-      }
-
-      & .cr-slider:hover {
-        opacity: 1;
-      }
-
-      & .cr-slider::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        appearance: none;
-        width: 25px;
-        height: 25px;
-        background: #7de5b3;
-        cursor: pointer;
-        margin-top: -10px;
-      }
-
-      & .cr-slider::-moz-range-thumb {
-        margin-top: -10px;
-        width: 25px;
-        height: 25px;
-        background: #7de5b3;
-        cursor: pointer;
-      }
-    }
-  }
-}
-
-.croppie-container {
-  & .cr-slider-wrap {
-    width: 90% !important;
-    margin: 5px auto !important;
-
-    & .cr-slider {
-      width: 100%;
-      margin: 0;
-    }
-  }
-}
-
-.crop-image .mat-dialog-container,
-.croppie-container .cr-boundary {
-  background: #000;
-}
-
-ag-home {
-  & .mat-drawer-inner-container {
-    //overflow: hidden !important;
-  }
-
-  & .mat-drawer.mat-drawer-side {
-    position: relative;
-    float: left;
-    height: 100%;
-  }
-
-  & .mat-drawer-inner-container > div {
-    max-width: 100% !important;
-    box-shadow: 0 0 0 0 #000;
-  }
-
-  & mat-drawer {
-    display: none !important;
-  }
-
-  & mat-drawer.mat-drawer-opened {
-    display: block !important;
-
-    & .mat-tab-label .mat-tab-label-content {
-      font-size: 16px;
-    }
-  }
-}
-
-.rtl ag-home .mat-drawer.mat-drawer-side {
-  float: right !important;
-}
-
-mat-drawer,
-.mat-elevation-z8 {
-  box-shadow: 0 0 10px .5px #e0e0e0;
-}
-
-ag-home mat-drawer-container > mat-drawer > .mat-drawer-inner-container > div > mat-tab-group {
-  width: 100%;
-}
-
-.overflow-hidden {
-  overflow: hidden !important;
-}
-
-/* in your styles.css or component styles (use ::ng-deep) */
-::ng-deep .mdc-floating-label--required {
-  color: red; /* label text */
-}
-
-::ng-deep .mdc-floating-label--required::after {
-  color: red; /* asterisk */
-  margin-left: 2px;
-}
-
-.arrow_drop_down_autocomplete {
-  position: absolute;
-  right: 0;
-  top: 7px;
-  color: rgba(0, 0, 0, 0.54);
-  cursor: pointer;
-  font-size: 28px;
-}
-
-.rtl {
-  & .arrow_drop_down_autocomplete {
-    right: unset;
-    left: 0;
-  }
-
-  & ag-currencies {
-    & .pl-0 {
-      padding-left: 10px !important;
-      padding-right: 0 !important;
-    }
-
-    & .pr-0 {
-      padding-left: 0 !important;
-      padding-right: 10px !important;
-    }
-
-    & .main-mat-form-field .mat-select-value {
-      text-align: right;
-      padding: 0 15px 0 15px;
-    }
-
-    & .mat-select-arrow-wrapper {
-      padding-right: 0;
-      padding-left: 10px;
-    }
-
-    & .head-control button {
-      margin-left: 0;
-      margin-right: 5px;
-    }
-
-    & .head-control > span {
-      margin-right: 0;
-      margin-left: 5px;
-    }
-  }
-
-  & .group-input {
-    & .col-md-5 {
-      padding-right: 15px !important;
-      padding-left: 0;
-    }
-  }
-
-  &.crop-image {
-    & mat-dialog-container {
-      & > h2 {
-        text-align: right;
-      }
-
-      & > span {
-        right: unset;
-        left: 24px;
-      }
-
-      & mat-dialog-content .cr-slider-wrap .cr-slider {
-        direction: rtl;
-      }
-
-      & mat-dialog-actions {
-        flex-direction: row-reverse;
-      }
-    }
-  }
-}
-
-@media only screen and (max-width: 600px) {
-  ag-home mat-drawer-container > mat-drawer > .mat-drawer-inner-container > div > mat-tab-group {
-    height: 100%;
-    width: 275px;
-  }
-  .signature-img-container span {
-    left: unset !important;
-    right: 10px;
-  }
-  .xs-pl {
-    padding-right: 15px !important;
-    padding-left: 0;
-  }
-}
-
-.preview_button {
-  background-color: var(--primary-color-2nd) !important;
-  cursor: pointer;
-  color: white !important;
-}
-
-.enabled_status {
-  background-color: green !important;
-  cursor: pointer;
-  color: white !important;
-}
-
-.disabled_status {
-  background-color: red !important;
-  cursor: pointer;
-  color: white !important;
-}
-
-
-.mat-form-field-appearance-outline .mat-form-field-outline {
-  background-color: white;
-  border-radius: 5px;
-  margin: 3px
-}
-
-.hidePanelBody .mat-expansion-panel-body {
-  padding: 0 !important;
-}
-
-
-::-webkit-scrollbar {
-  width: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #939393;
-  border-radius: 10px;
-}
-
-
-
-
-.btn-none-background-primary {
-  background: transparent;
-  color: var(--primary-color-2nd);
-  height: 40px;
-  width: 130px;
-  border: var(--primary-color-2nd) solid 1px !important;
-  border-radius: 5px;
-  box-shadow: none !important;
-  font-size: 16px;
-  cursor: pointer;
-}
-
-.btn-background-primary {
-  background: var(--primary-color-2nd) !important;
-  color: white !important;
-  height: 40px;
-  width: 130px;
-  border-radius: 5px;
-  box-shadow: none !important;
-  font-size: 16px;
-  cursor: pointer;
-}
-
-.main-title {
-  font-style: normal;
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 24px;
-  color: var(--accent-color);
-}
-
-.main-table-th {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
-  background-color: var(--primary-color-2nd);
-  color: white;
-}
-
-.main-table-td {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
-}
-
-.main-search {
-  height: 48px;
-  background-color: #FFFFFF;
-  padding: 0 2px;
-  border: #D1D1D1 solid 1px;
-  border-radius: 5px;
-}
-
-.main-search-field {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
-  flex: none;
-  margin: 2px 7px;
-  order: 0;
-  flex-grow: 0;
-  color: #D1D1D1;
-  background: transparent !important;
-}
-
-.main-search-ctrl {
-  width: 100%;
-  height: 40px;
-  border: none;
-  background: transparent;
-  color: var(--primary-color) !important;
-  outline: none;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
-  -webkit-appearance: none;
-}
-
-.main-search-ctrl::placeholder {
-  color: #D1D1D1 !important;
-}
-
-.main-search-advanced {
-  width: 100%;
-  color: #D1D1D1 !important;
-  margin: 7px
-}
-
-.main-search-advanced span {
-  cursor: pointer;
-}
-
-.main-border-left {
-  margin: auto;
-  border-left: #D1D1D1 solid 1px;
-  height: 100%;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
-  color: #9B9B9B;
-}
-
-.main-border-right {
-  margin: auto;
-  border-right: #D1D1D1 solid 1px;
-  height: 100%;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 24px;
-  color: #9B9B9B;
-}
-
-.main-content-center {
-  justify-content: center;
-  align-items: center;
-}
-
-
-.Completed, .Updated {
-  @extend .wfStatus;
-  background-color: #E9FFE9 !important;
-  color: #15AB51 !important;
-}
-
-.Terminated, .Default {
-  @extend .wfStatus-style;
-  background-color: #FFEDED !important;
-  color: #FF7878 !important;
-}
-
-.Create {
-  @extend .wfStatus-style;
-  background-color: #E4EEFF !important;
-  color: #1C355E !important;
-}
-
-.wfStatus {
-  @extend .wfStatus-style;
-  background-color: #F7F0FF;
-  color: #652CAC;
-}
-
-.New {
-  @extend .stateType;
-  background-color: #1C355E !important;
-}
-
-.COMPLETED {
-  @extend .stateType;
-  background-color: #42454a !important;
-}
-.PENDING {
-  @extend .stateType;
-  background-color: #10451d !important;
-}
-
-.stateType {
-  @extend .wfStatus-style;
-  background-color: #F7F0FF;
-  color: #E4EEFF !important;
-}
-
-@media (max-width: 1024px) {
-  .wfStatus-style {
-    font-size: 9px !important;
-  }
-}
-
-.wfStatus-style {
-  border-radius: 5px;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 0 !important;
-  height: 28px;
-}
-
-
-.Cleared, .Reported {
-  @extend .integStatus;
-  background-color: #E9FFE9 !important;
-  color: #15AB51 !important;
-}
-
-.UnCleared, .Default {
-  @extend .integStatus;
-  background-color: #FFEDED !important;
-  color: red !important;
-}
-
-.Signed {
-  @extend .integStatus;
-  background-color: #FFEDED !important;
-  color: blue !important;
-}
-
-.UnReported {
-  @extend .integStatus;
-  background-color: #FFEDED !important;
-  color: blue !important;
-}
-
-.integStatus {
-  @extend .integStatus-style;
-
-  background-color: #F7F0FF;
-  color: #652CAC;
-}
-
-.integStatus-style {
-  border-radius: 5px;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 0 !important;
-  height: 28px;
-}
-
-
-.ngx-pagination {
-  float: right;
-}
-
-.ngx-pagination a {
-  text-align: center !important;
-  border-radius: 5px !important;
-  font-weight: 400 !important;
-  font-size: 14px;
-}
-
-.ngx-pagination li {
-  margin: 0 6px !important;
-}
-
-.ngx-pagination .current {
-  background: #00ABC8 !important;
-  border-radius: 5px !important;
-  text-align: center !important;
-}
-
-
-.ngx-pagination .pagination-next a::after, .ngx-pagination .pagination-next.disabled::after {
-  content: '' !important;
-}
-
-.ngx-pagination .pagination-previous a::before, .ngx-pagination .pagination-previous.disabled::before {
-  content: '' !important;
-}
-
-
-.toolbar-pdf-invoice {
-  height: 80px;
-  background: whitesmoke;
-  border-bottom: #d9d9d9 solid 1px;
-
-  .button-check-circle {
-    border: green solid 1px;
-    cursor: default;
-  }
-
-  .button-warning {
-    border: #FFD42A solid 1px;
-    cursor: default;
-  }
-
-  .status {
-    justify-content: start;
-    font-size: 16px;
-    padding: 0 5px;
-
-    .check-circle {
-      color: green;
-      padding: 0 3px;
-    }
-
-    .warning {
-      color: #FFD42A;
-      padding: 0 3px;
-    }
-
-  }
-
-  .action {
-    justify-content: end !important;
-
-  }
-
-  .example-spacer {
-    flex: 1 1 auto;
-    text-align: center;
-  }
-
-}
-
-.mat-tab-label-active {
-  color: var(--primary-color);
-}
-
-[dir=ltr] .border-not-answer {
-  border-left: red solid 3px !important;
-  padding: 0 5px;
-}
-
-[dir=rtl] .border-not-answer {
-  border-right: red solid 3px !important;
-  padding: 0 5px;
-}
-
-.question {
-  background: #e2edff;
-}
-
-.answer {
-  background: #E2FBFF;
-}
-
-hr.divider {
-  border-top: 1px solid #d6d1d1;
-  width: 100%;
-}
-
-.Cleared, .Reported {
-  @extend .integStatus;
-  background-color: #E9FFE9 !important;
-  color: #15AB51 !important;
-}
-
-.UnCleared, .Default {
-  @extend .integStatus;
-  background-color: #FFEDED !important;
-  color: red !important;
-}
-
-.Signed {
-  @extend .integStatus;
-  background-color: #FFEDED !important;
-  color: blue !important;
-}
-
-.UnReported {
-  @extend .integStatus;
-  background-color: #FFEDED !important;
-  color: blue !important;
-}
-
-.integStatus {
-  @extend .integStatus-style;
-
-  background-color: #F7F0FF;
-  color: #652CAC;
-}
-
-.integStatus-style {
-  border-radius: 5px;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 0 !important;
-  height: 28px;
-}
-
-.searchbox-custom-field .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
-.searchbox-custom-field .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
-.searchbox-custom-field .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
-  border:none;
-}
-
-
-
-.baseTable {
-  &__marginColumn {
-    flex-direction: column;
-  }
-
-  &__detailsColumn {
-    .advancedSearchLg {
-      padding-left: 10px;
-      font-weight: 400;
-      font-size: 16px;
-      color: var(--primary-color-2nd);
-      cursor: pointer;
-
-      &__details-lt-sm {
-        margin-top: 5px;
-        text-align: center;
-      }
-
-      &__icon {
-        margin-top: 5px;
-        width: 20px
-      }
-    }
-
-    .border-default-close {
-      border: #D9D9D9 solid 1px;
-      border-radius: 5px;
-    }
-
-    .border-advanced-search{
-      display: inline-block;
-      position: relative;
-      border-left: solid 1px #D9D9D9;
-      border-right: solid 1px #D9D9D9;
-      border-top: solid 1px #D9D9D9;
-      border-top-left-radius: 5px;
-      border-top-right-radius: 5px;
-    }
-    .advancedSearchSm {
-      &__open {
-        height: 48px;
-
-        &__details {
-          margin: auto;
-
-          &__icon {
-            width: 20px;
-            padding: 0 5px
-          }
-        }
-      }
-    }
-
-    .filterBuilder {
-      display: inline-block;
-      position: relative;
-      border-left: solid 1px #D9D9D9;
-      border-right: solid 1px #D9D9D9;
-
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        height: 5px;
-        width: 85.2%;
-        border-top: solid 1px #D9D9D9;
-      }
-
-      &::after {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 0;
-        border-bottom: solid 1px #D9D9D9;
-      }
-    }
-
-    .mainTable {
-      margin-top: 2vh;
-
-      table thead {
-        outline: #D1D1D1 solid 1px;
-        height: 48px;
-        background: #F7F7F7 !important;
-        border: 1px solid #D1D1D1;
-        border-radius: 5px;
-      }
-
-      &__th {
-        .mat-sort-header-arrow {
-          color: var(--primary-color-2nd) !important;
-        }
-      }
-
-      &__td {
-        font-style: normal;
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 24px;
-
-        &__text-secondary {
-          font-size: medium;
-        }
-
-        &__icon-darkorange {
-          color: darkorange;
-        }
-
-        &__icon-red {
-          color: red;
-        }
-
-        &__icon-green {
-          color: green;
-        }
-
-        &__currency {
-          padding-right: 3px;
-          padding-left: 3px;
-        }
-
-        &__property {
-          color: red;
-        }
-      }
-
-      &__mat-cell {
-        height: 60px !important;
-        font-style: normal !important;
-        font-weight: 400 !important;
-        font-size: 14px !important;
-        line-height: 24px !important;
-        color: #4E4E4E !important;
-      }
-
-      &__mat-header-row {
-        box-shadow: none !important;
-      }
-
-      &__mat-sort-header-indicator {
-        color: var(--primary-color-2nd) !important;
-      }
-
-      &__mat-sort-header-stem {
-        color: var(--primary-color-2nd) !important;
-      }
-
-      &__highlight {
-        background: #ffe9bc;
-      }
-    }
-
-    .main-pagination {
-      .countItem {
-        &__totalElement {
-          text-align: end;
-          margin: 20px 0;
-          color: rgba(0, 0, 0, 0.54);
-          font-size: 14px;
-        }
-      }
-    }
-
-
-    .dataNotFound {
-      &__details {
-        text-align: center;
-        padding: 20px 0;
-        font-weight: 500;
-        &__icon {
-          vertical-align: middle;
-          color: var(--primary-color);
-          align-items: center;
-        }
-      }
-    }
-  }
-}