ngx-vector-components 4.2.1 → 4.5.0

package/assets/styles/_primeng-custom-theme.scss

@@ -1,963 +1,959 @@
-.p-focus,
-.p-element:focus {
-  box-shadow: none !important;
-}
-
-.field {
-  margin-bottom: 0rem !important;
-}
-
-.p-button.p-button-icon-only {
-  padding: 0.4rem 0 !important;
-}
-
-.p-button:hover:not(:disabled) .p-button-icon,
-.p-button.success .p-button-icon {
-  color: #fff !important;
-}
-
-.p-button.p-button-link {
-  color: var(--theme-dark);
-  background: transparent;
-  border: transparent;
-}
-.p-button.p-button-link:enabled:hover {
-  background: transparent;
-  color: var(--theme-dark);
-  border-color: transparent;
-}
-.p-button.p-button-link:enabled:hover .p-button-label {
-  text-decoration: none;
-}
-.p-button.p-button-link:enabled:focus {
-  background: transparent;
-  box-shadow: 0 0 0 0.2rem #a6d5fa;
-  border-color: transparent;
-}
-.p-button.p-button-link:enabled:active {
-  background: transparent;
-  color: var(--theme-dark);
-  border-color: transparent;
-}
-
-p-button {
-  width: 100%;
-  border-width: 2px;
-  border-radius: var(--border-radius);
-  background-color: var(--theme-dark);
-  border-color: var(--theme-dark);
-  color: #ffffff;
-  box-shadow: 0px 5px 5px rgba(0, 70, 232, 0.5);
-
-
-  button{
-    width: 100% !important;
-  }
-
-  &:hover:not(:disabled) {
-    background-color: #003049;
-    border-color: #003049;
-  }
-
-  &:focus {
-    box-shadow: none;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-  .no-shadow {
-    box-shadow: none;
-  }
-
-  .p-button {
-    border-width: 2px !important;
-  }
-
-  .default {
-    background-color: #ffffff;
-    border-color: var(--theme-dark);
-
-    .p-button-label {
-      color: var(--theme-dark);
-    }
-
-    .p-button-icon {
-      color: var(--theme-dark);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--theme-dark);
-      border-color: var(--theme-dark);
-      .p-button-label {
-        color: #ffffff;
-      }
-    }
-  }
-
-  .default-filled {
-    background-color: var(--theme-primary);
-    border-color: var(--theme-primary);
-    .p-button-label {
-      color: #ffffff;
-    }
-    .p-button-icon {
-      color: #ffffff;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--theme-dark);
-      border-color: var(--theme-dark);
-    }
-  }
-
-  .cancel {
-    background-color: #ffffff;
-    border-color: var(--error-color);
-    .p-button-label {
-      color: var(--error-color);
-    }
-    .p-button-icon {
-      color: var(--error-color);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--error-color-dark);
-      border-color: var(--error-color-dark);
-      .p-button-label {
-        color: #ffffff;
-      }
-    }
-  }
-
-  .cancel-filled {
-    background-color: var(--error-color);
-    border-color: var(--error-color);
-    .p-button-label {
-      color: #ffffff;
-    }
-
-    .p-button-icon {
-      color: #ffffff;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--error-color-dark);
-      border-color: var(--error-color-dark);
-    }
-  }
-
-  .success {
-    background-color: var(--success-color);
-    border-color: var(--success-color);
-    .p-button-label {
-      color: #fff;
-    }
-    .p-button-icon {
-      color: #fff;
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--success-color-dark);
-      border-color: var(--success-color-dark);
-    }
-  }
-
-  .success-outlined {
-    background-color: #ffffff;
-    border-color: var(--success-color);
-
-    .p-button-label {
-      color: var(--success-color);
-    }
-    .p-button-icon {
-      color: var(--success-color);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--success-color-dark);
-      border-color: var(--success-color-dark);
-
-      .p-button-label {
-        color: #fff
-      }
-    }
-  }
-}
-
-
-.p-autocomplete-input {
-  border-right: none !important;
-  border-top-right-radius: 0px !important;
-  border-bottom-right-radius: 0px !important;
-  padding: 6px 0px 6px 12px !important;
-
-  &:focus + .p-autocomplete-dropdown {
-    background-color: #ffffff !important;
-    border-right: 2px solid var(--theme-dark) !important;
-    border-top: 2px solid var(--theme-dark) !important;
-    border-bottom: 2px solid var(--theme-dark) !important;
-  }
-}
-
-.p-inputwrapper-focus .p-autocomplete-dropdown {
-  background-color: #ffffff !important;
-  border-right: 2px solid var(--theme-dark) !important;
-  border-top: 2px solid var(--theme-dark) !important;
-  border-bottom: 2px solid var(--theme-dark) !important;
-}
-
-.p-autocomplete-dropdown {
-  background-color: var(--gray-light) !important;
-  border: none !important;
-  margin-left: -1px !important;
-  border-top-right-radius: var(--border-radius) !important;
-  border-bottom-right-radius: var(--border-radius) !important;
-  color: var(--gray-dark) !important;
-  padding-bottom: 5px !important;
-}
-
-.p-dropdown {
-  height: 40px;
-  background-color: var(--gray-medium) !important;
-
-  .p-dropdown-label {
-    font-family: 'Poppins';
-    font-size: 0.9em !important;
-    color: var(--theme-dark) !important;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-  }
-}
-
-
-p-inputnumber.currency-input:not(.outlined) {
-  &.ng-touched.ng-invalid input.p-inputnumber-input {
-    color: var(--error-color) !important;
-  }
-
-  &.rounded input.p-inputnumber-input {
-    font-size: 1rem !important;
-  }
-
-  input.p-inputnumber-input {
-    font-size: 2em !important;
-    border: none !important;
-    font-weight: 600 !important;
-    background-color: #ffffff !important;
-    color: var(--theme-dark) !important;
-    width: 100% !important;
-    padding: 0px !important;
-    height: 2em !important;
-
-    &:focus {
-      outline: 0 !important;
-      box-shadow: none !important;
-    }
-  }
-}
-
-input.p-inputtext:not(.currency-input),
-.p-inputtextarea {
-  &:not(:focus) {
-    border: none !important;
-    background-color: var(--gray-light) !important;
-  }
-  width: 100%;
-  padding: 6px 12px 6px 12px !important;
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-  height: 40px;
-  font-size: 0.9em !important;
-  color: var(--theme-dark) !important;
-  font-weight: 500;
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-
-  &:focus {
-    outline: 0 !important;
-    box-shadow: none !important;
-    border: 2px solid var(--theme-dark);
-    background-color: #ffffff;
-  }
-
-  &:hover,
-  &:focus:not(.ng-invalid):not(.p-inputmask) {
-    border-color: var(--theme-dark) !important;
-  }
-
-  &::placeholder {
-    color: var(--theme-dark);
-    opacity: 0.8;
-  }
-
-  &.ng-touched.ng-invalid {
-    border-color: var(--error-color) !important;
-    background-color: var(--error-color-transparent) !important;
-  }
-
-  &:not(.ng-invalid) {
-    border-color: var(--theme-dark) !important;
-  }
-}
-
-.p-inputtextarea {
-  padding-right: 62px !important;
-  resize: none;
-  height: unset !important;
-}
-
-.p-calendar {
-  width: 100% !important;
-  .p-inputtext {
-    color: var(--theme-dark) !important;
-    font-weight: 600 !important;
-    margin-left: -1px !important;
-    border-top-right-radius: 0px !important;
-    border-bottom-right-radius: 0px !important;
-
-    &:focus {
-      border-right: none !important;
-
-      + .p-datepicker-trigger {
-        border-right: 2px solid var(--theme-dark) !important;
-        border-top: 2px solid var(--theme-dark) !important;
-        border-bottom: 2px solid var(--theme-dark) !important;
-        background-color: #ffffff !important;
-      }
-    }
-  }
-
-  .p-datepicker-trigger {
-    background-color: var(--gray-light) !important;
-    border: none !important;
-    border-top-right-radius: var(--border-radius) !important;
-    border-bottom-right-radius: var(--border-radius) !important;
-
-    .p-button-icon {
-      color: var(--theme-dark) !important;
-    }
-  }
-}
-p-calendar.ng-touched.ng-invalid {
-  .p-calendar {
-    width: 100% !important;
-    input.p-inputtext:not(.currency-input),
-    .p-inputtextarea {
-      &:not(:focus) {
-        border: none !important;
-        background-color: var(--error-color-transparent) !important;
-      }
-    }
-  }
-
-  .p-datepicker-trigger {
-    border-color: var(--error-color) !important;
-    background-color: var(--error-color-transparent) !important;
-  }
-
-  .p-focus {
-    input.p-inputtext:not(.currency-input),
-    .p-inputtextarea {
-      border-color: var(--error-color) !important;
-      background-color: var(--error-color-transparent) !important;
-    }
-    .p-datepicker-trigger {
-      border-right: 2px solid var(--error-color) !important;
-      border-top: 2px solid var(--error-color) !important;
-      border-bottom: 2px solid var(--error-color) !important;
-      background-color: var(--error-color-transparent) !important;
-    }
-  }
-}
-
-p-inputmask {
-  flex: 1;
-}
-p-inputmask.ng-touched.ng-invalid input {
-  border-color: var(--error-color) !important;
-  background-color: var(--error-color-transparent) !important;
-}
-
-p-inputnumber:not(.currency-input),
-p-inputnumber.outlined {
-  display: block !important;
-
-  span {
-    width: 100%;
-  }
-}
-
-.p-radiobutton-box.p-highlight {
-  background-color: var(--success-color) !important;
-  border-color: var(--success-color) !important;
-
-  // &::before {
-  //   content: '\f00c';
-  //   color: #ffffff;
-  //   font-weight: 200;
-  //   width: 10px;
-  //   height: 10px;
-  // }
-  // .p-radiobutton-icon {
-  //   background-color: var(--success-color) !important;
-  // }
-}
-
-.p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-  border-color: var(--success-color) !important;
-}
-
-.p-highlight {
-  background-color: var(--theme-primary) !important;
-  border-color: var(--theme-primary) !important;
-}
-
-.p-button:focus {
-  box-shadow: unset !important;
-}
-
-.p-button.button {
-  display: flex !important;
-  flex-direction: row !important;
-  justify-content: center !important;
-
-  .p-button-label {
-    flex: unset !important;
-  }
-}
-
-.p-datepicker table td > span:focus {
-  box-shadow: unset !important;
-}
-
-.p-datepicker table td > span.p-highlight {
-  color: #ffffff !important;
-}
-
-.p-datepicker table td > span {
-  color: var(--font-color) !important;
-}
-
-.p-datepicker {
-  border: 2px solid var(--theme-dark) !important;
-  border-radius: var(--border-radius) !important;
-  z-index: 15000 !important;
-
-  .p-datepicker-calendar thead tr th span {
-    color: var(--theme-dark) !important;
-  }
-}
-
-.p-overlaypanel {
-  background-color: #01529b !important;
-}
-
-.p-overlaypanel-content {
-  padding: 6px 8px 6px 8px !important;
-}
-
-.p-overlaypanel::after,
-.p-overlaypanel::before {
-  border-bottom-color: #01529b !important;
-}
-
-.p-dialog:not(.p-confirm-dialog) {
-  .p-dialog-header {
-    padding: 3px !important;
-    border-top-left-radius: 9px !important;
-    border-top-right-radius: 9px !important;
-  }
-
-  .p-dialog-content {
-    border-bottom-left-radius: 9px !important;
-    border-bottom-right-radius: 9px !important;
-  }
-}
-
-.p-dialog .p-dialog-header .p-dialog-title {
-  font-size: 1em !important;
-  text-align: center !important;
-}
-
-.p-dialog-header-close-icon {
-  font-weight: 600 !important;
-}
-
-.p-confirm-dialog {
-  .p-dialog-footer .actions {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .p-confirm-dialog-icon {
-    display: none !important;
-  }
-
-  .p-confirm-dialog-message {
-    margin-left: 0px !important;
-  }
-}
-
-.p-selectbutton {
-  background-color: var(--gray-light) !important;
-  border-radius: 10px !important;
-  width: fit-content !important;
-
-  .p-ripple {
-    border: none !important;
-    margin: 3px !important;
-    border-radius: 8px !important;
-
-    .p-button-label {
-      color: var(--gray-dark) !important;
-      font-weight: 500 !important;
-    }
-
-    &:not(.p-highlight) {
-      background-color: transparent !important;
-    }
-
-    &.p-highlight {
-      background-color: #fff !important;
-
-      .p-button-label {
-        color: var(--theme-medium) !important;
-      }
-    }
-  }
-}
-
-.p-multiselect {
-  border: 2px solid var(--theme-dark) !important;
-}
-
-.p-multiselect-header {
-  .p-checkbox {
-    width: max-content;
-    &::after {
-      content: 'Mostrar Todos';
-      margin-left: 0.5rem;
-    }
-  }
-}
-
-.p-multiselect-label {
-  color: var(--theme-dark) !important;
-  font-weight: 600 !important;
-}
-
-.p-multiselect-item.p-highlight {
-  background-color: #ffffff !important;
-  font-weight: 600 !important;
-}
-
-.p-multiselect-item {
-  box-shadow: unset !important;
-  color: var(--theme-dark) !important;
-}
-
-.p-multiselect-trigger-icon {
-  height: 24px !important;
-}
-
-.rounded-checkbox .p-checkbox-box {
-  border-radius: 20px !important;
-  border: none !important;
-  background-color: var(--gray-light) !important;
-
-  .p-checkbox-icon {
-    font-size: 0.8em !important;
-    padding-top: 2px !important;
-  }
-}
-
-.p-checkbox-box.p-highlight {
-  background: var(--theme-primary) !important;
-  border-color: var(--theme-primary) !important;
-}
-
-.p-checkbox-box {
-  border-width: 2px !important;
-  border-color: var(--gray-dark) !important;
-
-  &:hover:not(.p-highlight) {
-    border-color: var(--gray-dark) !important;
-  }
-}
-
-.p-dropdown,
-.p-autocomplete {
-  width: 100%;
-}
-p-autocomplete.ng-touched.ng-invalid {
-  input.p-inputtext:not(.currency-input),
-  .p-inputtextarea {
-    &:not(:focus) {
-      border: none !important;
-      background-color: var(--error-color-transparent) !important;
-    }
-
-    &:focus:not(.ng-invalid):not(.p-inputmask) {
-      border-color: var(--error-color) !important;
-    }
-  }
-}
-
-p-autocomplete.ng-touched.ng-invalid .p-autocomplete-dropdown {
-  border-color: var(--error-color) !important;
-  background-color: var(--error-color-transparent) !important;
-}
-
-.p-dropdown-panel,
-.p-autocomplete-panel {
-  max-width: 250px !important;
-  border: 2px solid var(--theme-dark) !important;
-  margin-top: -2px !important;
-  border-radius: var(--border-radius) !important;
-
-  & .p-autocomplete-items {
-    padding-top: 0px !important;
-    padding-bottom: 0px !important;
-    padding-right: 1px !important;
-  }
-
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--gray-light);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--theme-dark);
-    border-radius: 8px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--theme-dark);
-  }
-}
-
-.p-dropdown-item,
-.p-autocomplete-item {
-  text-overflow: ellipsis;
-  color: var(--theme-dark) !important;
-
-  &:hover {
-    background-color: var(--theme-dark) !important;
-    color: #ffffff !important;
-  }
-}
-
-.p-dropdown {
-  // background-color: #ffffff;
-  border: none !important;
-  .p-highlight {
-    background-color: #ffffff !important;
-  }
-}
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
-  background-color: var(--theme-dark) !important;
-  color: #ffffff !important;
-}
-
-.p-slider {
-  background-color: #01529b;
-  .p-slider-range {
-    background-color: var(--success-color) !important;
-    border-radius: inherit !important;
-  }
-  .p-slider-handle {
-    border-color: var(--success-color) !important;
-
-    &:hover {
-      background-color: var(--success-color) !important;
-    }
-    &:focus {
-      box-shadow: unset !important;
-    }
-  }
-}
-
-.p-fileupload {
-  p-messages {
-    display: none !important;
-  }
-  .p-fileupload-choose {
-    background: transparent !important;
-    border: 2px solid var(--theme-dark) !important;
-    border-radius: var(--border-radius) !important;
-
-    .p-button-label {
-      color: var(--theme-dark) !important;
-      max-width: 200px !important;
-      text-overflow: ellipsis !important;
-      white-space: nowrap !important;
-      overflow: hidden !important;
-
-      @media (max-width: 768px) {
-        max-width: 150px !important;
-      }
-    }
-
-    .p-button-icon {
-      display: none !important;
-    }
-  }
-}
-
-vector-data-table {
-  vector-panel.data-table-panel .p-panel,
-  vector-panel.data-table-panel .p-panel-content,
-  vector-panel.data-table-panel .p-panel-content > div {
-    border-radius: 15px !important;
-  }
-
-  p-table {
-    .p-datatable-wrapper {
-      max-height: 300px;
-    }
-
-    .p-datatable-table {
-      border-radius: 15px !important;
-    }
-
-    .p-datatable-thead {
-      border-radius: 15px !important;
-      z-index: 0 !important;
-
-      .header {
-        th {
-          white-space: normal !important;
-          position: relative;
-          padding: 10px 10px 10px 35px !important;
-          background-color: var(--gray-light) !important;
-
-          &:first-child {
-            border-top-left-radius: 15px !important;
-            padding: 10px !important;
-          }
-
-          &:last-child {
-            border-top-right-radius: 15px !important;
-          }
-
-          p-sorticon {
-            position: absolute;
-            left: 0px;
-
-            .p-sortable-column-icon {
-              display: flex;
-              flex-direction: column;
-              font-size: 10px;
-
-              &::before {
-                content: "\e903" !important;
-              }
-
-              &::after {
-                content: "\e902" !important;
-              }
-            }
-          }
-
-          &.p-highlight {
-            color: var(--theme-primary) !important;
-          }
-        }
-      }
-    }
-
-    .p-datatable-tbody{
-
-      .p-highlight{
-        background-color: #EFF6FF !important;
-      }
-    }
-
-    .row {
-      background: transparent !important;
-
-      .cell {
-        white-space: normal !important;
-
-        .boolean-value-positive {
-          color: var(--success-color);
-        }
-
-        .boolean-value-negative {
-          color: var(--error-color);
-        }
-
-        .status-table-field {
-          font-size: 1.4em;
-        }
-
-        .success {
-          color: var(--success-color);
-        }
-        .error {
-          color: var(--error-color);
-        }
-        .warning {
-          color: var(--warning-color);
-        }
-
-        .table-button {
-          cursor: pointer;
-          color: var(--theme-primary);
-        }
-      }
-
-      .no-results {
-        border-bottom-left-radius: 15px;
-        border-bottom-right-radius: 15px;
-      }
-    }
-
-    .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-      color: #fff !important;
-    }
-
-    .p-paginator-bottom {
-      border-radius: 15px !important;
-    }
-  }
-
-  p-tabview {
-    .p-tabview-panels {
-      display: none !important;
-    }
-
-    .p-tabview-nav {
-      li {
-        flex: 1;
-        overflow-x: auto;
-        overflow-y: hidden;
-        
-        .p-tabview-nav-link {
-          justify-content: center;
-        }
-      }
-    }
-  }
-
-  vector-panel p-panel .p-panel .p-panel-content {
-    padding: 0px !important;
-  }
-}
-
-p-tabview {
-  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
-    border-top-right-radius: 0px !important;
-    border-top-left-radius: 0px !important;
-  }
-}
-
-.p-accordion-header {
-  .p-accordion-header-link {
-    border-radius: 16px !important;
-    box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.06) !important;
-    border: none !important;
-
-    .p-accordion-toggle-icon {
-      margin-right: 0.5rem !important;
-      position: absolute !important;
-      right: 0.5em !important;
-    }
-  }
-  &.p-highlight {
-    background: none !important;
-  }
-}
-
-.p-accordion .p-accordion-content {
-  border: none !important;
-  background: #ffffff !important;
-  border-radius: 16px !important;
-  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.06) !important;
-  margin-top: -25px !important;
-  padding-top: 35px !important;
-}
-
-.p-accordion-tab {
-  margin: 20px 0px;
-}
-
-.p-chip {
-  display: inline-block;
-  padding: 0 16px !important;
-  height: 40px;
-  font-weight: 500;
-  font-size: 13px;
-  line-height: 40px;
-  border-radius: 25px !important;
-  background-color: #e5e5ea !important;
-  color: #002463 !important;
-  opacity: 0.5;
-
-  span {
-    border: 2px solid;
-    border-radius: 50%;
-    width: 25px;
-    height: 25px;
-    margin-left: 5px;
-    margin-top: 7px;
-    color: #abaab5;
-
-    i {
-      position: relative;
-      top: -11px;
-      left: -6px;
-      font-size: 12px;
-    }
-  }
-
-  .closebtn {
-    padding-left: 10px;
-    font-weight: bold;
-    float: right;
-    font-size: 20px;
-    cursor: pointer;
-  }
-
-  .closebtn:hover {
-    color: #000;
-  }
-}
-
-.p-menu.p-menu-overlay {
-  width: fit-content;
-  padding: 0px;
-  border-radius: 9px;
-  background-color: var(--theme-medium) !important;
-
-  ul {
-    display: flex;
-
-    li {
-      border-radius: 9px;
-    }
-
-    .p-menuitem-link {
-      border-radius: 9px;
-    }
-
-    .p-menuitem-link:hover {
-      background-color: var(--theme-dark) !important;
-    }
-
-    .p-menuitem-icon, .p-menuitem-text {
-      color: #fff !important;
-    }
-  }
-}
+.p-focus,
+.p-element:focus {
+  box-shadow: none !important;
+}
+
+.field {
+  margin-bottom: 0rem !important;
+}
+
+.p-button.p-button-icon-only {
+  padding: 0.4rem 0 !important;
+}
+
+.p-button:hover:not(:disabled) .p-button-icon,
+.p-button.success .p-button-icon {
+  color: #fff !important;
+}
+
+.p-button.p-button-link {
+  color: var(--theme-dark);
+  background: transparent;
+  border: transparent;
+}
+.p-button.p-button-link:enabled:hover {
+  background: transparent;
+  color: var(--theme-dark);
+  border-color: transparent;
+}
+.p-button.p-button-link:enabled:hover .p-button-label {
+  text-decoration: none;
+}
+.p-button.p-button-link:enabled:focus {
+  background: transparent;
+  box-shadow: 0 0 0 0.2rem #a6d5fa;
+  border-color: transparent;
+}
+.p-button.p-button-link:enabled:active {
+  background: transparent;
+  color: var(--theme-dark);
+  border-color: transparent;
+}
+
+p-button {
+  width: 100%;
+  border-width: 2px;
+  border-radius: var(--border-radius);
+  background-color: var(--theme-dark);
+  border-color: var(--theme-dark);
+  color: #ffffff;
+  box-shadow: 0px 5px 5px rgba(0, 70, 232, 0.5);
+
+  button {
+    width: 100% !important;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: #003049;
+    border-color: #003049;
+  }
+
+  &:focus {
+    box-shadow: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+  .no-shadow {
+    box-shadow: none;
+  }
+
+  .p-button {
+    border-width: 2px !important;
+  }
+
+  .default {
+    background-color: #ffffff;
+    border-color: var(--theme-dark);
+
+    .p-button-label {
+      color: var(--theme-dark);
+    }
+
+    .p-button-icon {
+      color: var(--theme-dark);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--theme-dark);
+      border-color: var(--theme-dark);
+      .p-button-label {
+        color: #ffffff;
+      }
+    }
+  }
+
+  .default-filled {
+    background-color: var(--theme-primary);
+    border-color: var(--theme-primary);
+    .p-button-label {
+      color: #ffffff;
+    }
+    .p-button-icon {
+      color: #ffffff;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--theme-dark);
+      border-color: var(--theme-dark);
+    }
+  }
+
+  .cancel {
+    background-color: #ffffff;
+    border-color: var(--error-color);
+    .p-button-label {
+      color: var(--error-color);
+    }
+    .p-button-icon {
+      color: var(--error-color);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--error-color-dark);
+      border-color: var(--error-color-dark);
+      .p-button-label {
+        color: #ffffff;
+      }
+    }
+  }
+
+  .cancel-filled {
+    background-color: var(--error-color);
+    border-color: var(--error-color);
+    .p-button-label {
+      color: #ffffff;
+    }
+
+    .p-button-icon {
+      color: #ffffff;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--error-color-dark);
+      border-color: var(--error-color-dark);
+    }
+  }
+
+  .success {
+    background-color: var(--success-color);
+    border-color: var(--success-color);
+    .p-button-label {
+      color: #fff;
+    }
+    .p-button-icon {
+      color: #fff;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--success-color-dark);
+      border-color: var(--success-color-dark);
+    }
+  }
+
+  .success-outlined {
+    background-color: #ffffff;
+    border-color: var(--success-color);
+
+    .p-button-label {
+      color: var(--success-color);
+    }
+    .p-button-icon {
+      color: var(--success-color);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--success-color-dark);
+      border-color: var(--success-color-dark);
+
+      .p-button-label {
+        color: #fff;
+      }
+    }
+  }
+}
+
+.p-autocomplete-input {
+  border-right: none !important;
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+  padding: 6px 0px 6px 12px !important;
+
+  &:focus + .p-autocomplete-dropdown {
+    background-color: #ffffff !important;
+    border-right: 2px solid var(--theme-dark) !important;
+    border-top: 2px solid var(--theme-dark) !important;
+    border-bottom: 2px solid var(--theme-dark) !important;
+  }
+}
+
+.p-inputwrapper-focus .p-autocomplete-dropdown {
+  background-color: #ffffff !important;
+  border-right: 2px solid var(--theme-dark) !important;
+  border-top: 2px solid var(--theme-dark) !important;
+  border-bottom: 2px solid var(--theme-dark) !important;
+}
+
+.p-autocomplete-dropdown {
+  background-color: var(--gray-light) !important;
+  border: none !important;
+  margin-left: -1px !important;
+  border-top-right-radius: var(--border-radius) !important;
+  border-bottom-right-radius: var(--border-radius) !important;
+  color: var(--gray-dark) !important;
+  padding-bottom: 5px !important;
+}
+
+.p-dropdown {
+  height: 40px;
+  background-color: var(--gray-medium) !important;
+
+  .p-dropdown-label {
+    font-family: 'Poppins';
+    font-size: 0.9em !important;
+    color: var(--theme-dark) !important;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+  }
+}
+
+p-inputnumber.currency-input:not(.outlined) {
+  &.ng-touched.ng-invalid input.p-inputnumber-input {
+    color: var(--error-color) !important;
+  }
+
+  &.rounded input.p-inputnumber-input {
+    font-size: 1rem !important;
+  }
+
+  input.p-inputnumber-input {
+    font-size: 2em !important;
+    border: none !important;
+    font-weight: 600 !important;
+    background-color: #ffffff !important;
+    color: var(--theme-dark) !important;
+    width: 100% !important;
+    padding: 0px !important;
+    height: 2em !important;
+
+    &:focus {
+      outline: 0 !important;
+      box-shadow: none !important;
+    }
+  }
+}
+
+input.p-inputtext:not(.currency-input),
+.p-inputtextarea {
+  &:not(:focus) {
+    border: none !important;
+    background-color: var(--gray-light) !important;
+  }
+  width: 100%;
+  padding: 6px 12px 6px 12px !important;
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+  border-top-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+  height: 40px;
+  font-size: 0.9em !important;
+  color: var(--theme-dark) !important;
+  font-weight: 500;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &:focus {
+    outline: 0 !important;
+    box-shadow: none !important;
+    border: 2px solid var(--theme-dark);
+    background-color: #ffffff;
+  }
+
+  &:hover,
+  &:focus:not(.ng-invalid):not(.p-inputmask) {
+    border-color: var(--theme-dark) !important;
+  }
+
+  &::placeholder {
+    color: var(--theme-dark);
+    opacity: 0.8;
+  }
+
+  &.ng-touched.ng-invalid {
+    border-color: var(--error-color) !important;
+    background-color: var(--error-color-transparent) !important;
+  }
+
+  &:not(.ng-invalid) {
+    border-color: var(--theme-dark) !important;
+  }
+}
+
+.p-inputtextarea {
+  padding-right: 62px !important;
+  resize: none;
+  height: unset !important;
+}
+
+.p-calendar {
+  width: 100% !important;
+  .p-inputtext {
+    color: var(--theme-dark) !important;
+    font-weight: 600 !important;
+    margin-left: -1px !important;
+    border-top-right-radius: 0px !important;
+    border-bottom-right-radius: 0px !important;
+
+    &:focus {
+      border-right: none !important;
+
+      + .p-datepicker-trigger {
+        border-right: 2px solid var(--theme-dark) !important;
+        border-top: 2px solid var(--theme-dark) !important;
+        border-bottom: 2px solid var(--theme-dark) !important;
+        background-color: #ffffff !important;
+      }
+    }
+  }
+
+  .p-datepicker-trigger {
+    background-color: var(--gray-light) !important;
+    border: none !important;
+    border-top-right-radius: var(--border-radius) !important;
+    border-bottom-right-radius: var(--border-radius) !important;
+
+    .p-button-icon {
+      color: var(--theme-dark) !important;
+    }
+  }
+}
+p-calendar.ng-touched.ng-invalid {
+  .p-calendar {
+    width: 100% !important;
+    input.p-inputtext:not(.currency-input),
+    .p-inputtextarea {
+      &:not(:focus) {
+        border: none !important;
+        background-color: var(--error-color-transparent) !important;
+      }
+    }
+  }
+
+  .p-datepicker-trigger {
+    border-color: var(--error-color) !important;
+    background-color: var(--error-color-transparent) !important;
+  }
+
+  .p-focus {
+    input.p-inputtext:not(.currency-input),
+    .p-inputtextarea {
+      border-color: var(--error-color) !important;
+      background-color: var(--error-color-transparent) !important;
+    }
+    .p-datepicker-trigger {
+      border-right: 2px solid var(--error-color) !important;
+      border-top: 2px solid var(--error-color) !important;
+      border-bottom: 2px solid var(--error-color) !important;
+      background-color: var(--error-color-transparent) !important;
+    }
+  }
+}
+
+p-inputmask {
+  flex: 1;
+}
+p-inputmask.ng-touched.ng-invalid input {
+  border-color: var(--error-color) !important;
+  background-color: var(--error-color-transparent) !important;
+}
+
+p-inputnumber:not(.currency-input),
+p-inputnumber.outlined {
+  display: block !important;
+
+  span {
+    width: 100%;
+  }
+}
+
+.p-radiobutton-box.p-highlight {
+  background-color: var(--success-color) !important;
+  border-color: var(--success-color) !important;
+
+  // &::before {
+  //   content: '\f00c';
+  //   color: #ffffff;
+  //   font-weight: 200;
+  //   width: 10px;
+  //   height: 10px;
+  // }
+  // .p-radiobutton-icon {
+  //   background-color: var(--success-color) !important;
+  // }
+}
+
+.p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
+  border-color: var(--success-color) !important;
+}
+
+.p-highlight {
+  background-color: var(--theme-primary) !important;
+  border-color: var(--theme-primary) !important;
+}
+
+.p-button:focus {
+  box-shadow: unset !important;
+}
+
+.p-button.button {
+  display: flex !important;
+  flex-direction: row !important;
+  justify-content: center !important;
+
+  .p-button-label {
+    flex: unset !important;
+  }
+}
+
+.p-datepicker table td > span:focus {
+  box-shadow: unset !important;
+}
+
+.p-datepicker table td > span.p-highlight {
+  color: #ffffff !important;
+}
+
+.p-datepicker table td > span {
+  color: var(--font-color) !important;
+}
+
+.p-datepicker {
+  border: 2px solid var(--theme-dark) !important;
+  border-radius: var(--border-radius) !important;
+  z-index: 15000 !important;
+
+  .p-datepicker-calendar thead tr th span {
+    color: var(--theme-dark) !important;
+  }
+}
+
+.p-overlaypanel {
+  background-color: #01529b !important;
+}
+
+.p-overlaypanel-content {
+  padding: 6px 8px 6px 8px !important;
+}
+
+.p-overlaypanel::after,
+.p-overlaypanel::before {
+  border-bottom-color: #01529b !important;
+}
+
+.p-dialog:not(.p-confirm-dialog) {
+  .p-dialog-header {
+    padding: 3px !important;
+    border-top-left-radius: 9px !important;
+    border-top-right-radius: 9px !important;
+  }
+
+  .p-dialog-content {
+    border-bottom-left-radius: 9px !important;
+    border-bottom-right-radius: 9px !important;
+  }
+}
+
+.p-dialog .p-dialog-header .p-dialog-title {
+  font-size: 1em !important;
+  text-align: center !important;
+}
+
+.p-dialog-header-close-icon {
+  font-weight: 600 !important;
+}
+
+.p-confirm-dialog {
+  .p-dialog-footer .actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .p-confirm-dialog-icon {
+    display: none !important;
+  }
+
+  .p-confirm-dialog-message {
+    margin-left: 0px !important;
+  }
+}
+
+.p-selectbutton {
+  background-color: var(--gray-light) !important;
+  border-radius: 10px !important;
+  width: fit-content !important;
+
+  .p-ripple {
+    border: none !important;
+    margin: 3px !important;
+    border-radius: 8px !important;
+
+    .p-button-label {
+      color: var(--gray-dark) !important;
+      font-weight: 500 !important;
+    }
+
+    &:not(.p-highlight) {
+      background-color: transparent !important;
+    }
+
+    &.p-highlight {
+      background-color: #fff !important;
+
+      .p-button-label {
+        color: var(--theme-medium) !important;
+      }
+    }
+  }
+}
+
+.p-multiselect {
+  border: 2px solid var(--theme-dark) !important;
+}
+
+.p-multiselect-header {
+  .p-checkbox {
+    width: max-content;
+    &::after {
+      content: 'Mostrar Todos';
+      margin-left: 0.5rem;
+    }
+  }
+}
+
+.p-multiselect-label {
+  color: var(--theme-dark) !important;
+  font-weight: 600 !important;
+}
+
+.p-multiselect-item.p-highlight {
+  background-color: #ffffff !important;
+  font-weight: 600 !important;
+}
+
+.p-multiselect-item {
+  box-shadow: unset !important;
+  color: var(--theme-dark) !important;
+}
+
+.p-multiselect-trigger-icon {
+  height: 24px !important;
+}
+
+.rounded-checkbox .p-checkbox-box {
+  border-radius: 20px !important;
+  border: none !important;
+  background-color: var(--gray-light) !important;
+
+  .p-checkbox-icon {
+    font-size: 0.8em !important;
+    padding-top: 2px !important;
+  }
+}
+
+.p-checkbox-box.p-highlight {
+  background: var(--theme-primary) !important;
+  border-color: var(--theme-primary) !important;
+}
+
+.p-checkbox-box {
+  border-width: 2px !important;
+  border-color: var(--gray-dark) !important;
+
+  &:hover:not(.p-highlight) {
+    border-color: var(--gray-dark) !important;
+  }
+}
+
+.p-dropdown,
+.p-autocomplete {
+  width: 100%;
+}
+p-autocomplete.ng-touched.ng-invalid {
+  input.p-inputtext:not(.currency-input),
+  .p-inputtextarea {
+    &:not(:focus) {
+      border: none !important;
+      background-color: var(--error-color-transparent) !important;
+    }
+
+    &:focus:not(.ng-invalid):not(.p-inputmask) {
+      border-color: var(--error-color) !important;
+    }
+  }
+}
+
+p-autocomplete.ng-touched.ng-invalid .p-autocomplete-dropdown {
+  border-color: var(--error-color) !important;
+  background-color: var(--error-color-transparent) !important;
+}
+
+.p-dropdown-panel,
+.p-autocomplete-panel {
+  max-width: 250px !important;
+  border: 2px solid var(--theme-dark) !important;
+  margin-top: -2px !important;
+  border-radius: var(--border-radius) !important;
+
+  & .p-autocomplete-items {
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+    padding-right: 1px !important;
+  }
+
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--gray-light);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--theme-dark);
+    border-radius: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--theme-dark);
+  }
+}
+
+.p-dropdown-item,
+.p-autocomplete-item {
+  text-overflow: ellipsis;
+  color: var(--theme-dark) !important;
+
+  &:hover {
+    background-color: var(--theme-dark) !important;
+    color: #ffffff !important;
+  }
+}
+
+.p-dropdown {
+  // background-color: #ffffff;
+  border: none !important;
+  .p-highlight {
+    background-color: #ffffff !important;
+  }
+}
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+  background-color: var(--theme-dark) !important;
+  color: #ffffff !important;
+}
+
+.p-slider {
+  background-color: #01529b;
+  .p-slider-range {
+    background-color: var(--success-color) !important;
+    border-radius: inherit !important;
+  }
+  .p-slider-handle {
+    border-color: var(--success-color) !important;
+
+    &:hover {
+      background-color: var(--success-color) !important;
+    }
+    &:focus {
+      box-shadow: unset !important;
+    }
+  }
+}
+
+.p-fileupload {
+  p-messages {
+    display: none !important;
+  }
+  .p-fileupload-choose {
+    background: transparent !important;
+    border: 2px solid var(--theme-dark) !important;
+    border-radius: var(--border-radius) !important;
+
+    .p-button-label {
+      color: var(--theme-dark) !important;
+      max-width: 200px !important;
+      text-overflow: ellipsis !important;
+      white-space: nowrap !important;
+      overflow: hidden !important;
+
+      @media (max-width: 768px) {
+        max-width: 150px !important;
+      }
+    }
+
+    .p-button-icon {
+      display: none !important;
+    }
+  }
+}
+
+vector-data-table {
+  vector-panel.data-table-panel .p-panel,
+  vector-panel.data-table-panel .p-panel-content,
+  vector-panel.data-table-panel .p-panel-content > div {
+    border-radius: 15px !important;
+  }
+
+  p-table {
+    .p-datatable-wrapper {
+    }
+
+    .p-datatable-table {
+      border-radius: 15px !important;
+    }
+
+    .p-datatable-thead {
+      border-radius: 15px !important;
+      z-index: 0 !important;
+
+      .header {
+        th {
+          white-space: normal !important;
+          position: relative;
+          padding: 10px 10px 10px 35px !important;
+          background-color: var(--gray-light) !important;
+
+          &:first-child {
+            border-top-left-radius: 15px !important;
+            padding: 10px !important;
+          }
+
+          &:last-child {
+            border-top-right-radius: 15px !important;
+          }
+
+          p-sorticon {
+            position: absolute;
+            left: 0px;
+
+            .p-sortable-column-icon {
+              display: flex;
+              flex-direction: column;
+              font-size: 10px;
+
+              &::before {
+                content: '\e903' !important;
+              }
+
+              &::after {
+                content: '\e902' !important;
+              }
+            }
+          }
+
+          &.p-highlight {
+            color: var(--theme-primary) !important;
+          }
+        }
+      }
+    }
+
+    .p-datatable-tbody {
+      .p-highlight {
+        background-color: #eff6ff !important;
+      }
+    }
+
+    .row {
+      background: transparent !important;
+
+      .cell {
+        white-space: normal !important;
+
+        .boolean-value-positive {
+          color: var(--success-color);
+        }
+
+        .boolean-value-negative {
+          color: var(--error-color);
+        }
+
+        .status-table-field {
+          font-size: 1.4em;
+        }
+
+        .success {
+          color: var(--success-color);
+        }
+        .error {
+          color: var(--error-color);
+        }
+        .warning {
+          color: var(--warning-color);
+        }
+
+        .table-button {
+          cursor: pointer;
+          color: var(--theme-primary);
+        }
+      }
+
+      .no-results {
+        border-bottom-left-radius: 15px;
+        border-bottom-right-radius: 15px;
+      }
+    }
+
+    .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+      color: #fff !important;
+    }
+
+    .p-paginator-bottom {
+      border-radius: 15px !important;
+    }
+  }
+
+  p-tabview {
+    .p-tabview-panels {
+      display: none !important;
+    }
+
+    .p-tabview-nav {
+      li {
+        flex: 1;
+        overflow-x: auto;
+        overflow-y: hidden;
+
+        .p-tabview-nav-link {
+          justify-content: center;
+        }
+      }
+    }
+  }
+
+  vector-panel p-panel .p-panel .p-panel-content {
+    padding: 0px !important;
+  }
+}
+
+p-tabview {
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border-top-right-radius: 0px !important;
+    border-top-left-radius: 0px !important;
+  }
+}
+
+.p-accordion-header {
+  .p-accordion-header-link {
+    border-radius: 16px !important;
+    box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.06) !important;
+    border: none !important;
+
+    .p-accordion-toggle-icon {
+      margin-right: 0.5rem !important;
+      position: absolute !important;
+      right: 0.5em !important;
+    }
+  }
+  &.p-highlight {
+    background: none !important;
+  }
+}
+
+.p-accordion .p-accordion-content {
+  border: none !important;
+  background: #ffffff !important;
+  border-radius: 16px !important;
+  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.06) !important;
+  margin-top: -25px !important;
+  padding-top: 35px !important;
+}
+
+.p-accordion-tab {
+  margin: 20px 0px;
+}
+
+.p-chip {
+  display: inline-block;
+  padding: 0 16px !important;
+  height: 40px;
+  font-weight: 500;
+  font-size: 13px;
+  line-height: 40px;
+  border-radius: 25px !important;
+  background-color: #e5e5ea !important;
+  color: #002463 !important;
+  opacity: 0.5;
+
+  span {
+    border: 2px solid;
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+    margin-left: 5px;
+    margin-top: 7px;
+    color: #abaab5;
+
+    i {
+      position: relative;
+      top: -11px;
+      left: -6px;
+      font-size: 12px;
+    }
+  }
+
+  .closebtn {
+    padding-left: 10px;
+    font-weight: bold;
+    float: right;
+    font-size: 20px;
+    cursor: pointer;
+  }
+
+  .closebtn:hover {
+    color: #000;
+  }
+}
+
+.p-menu.p-menu-overlay {
+  width: fit-content;
+  padding: 0px;
+  border-radius: 9px;
+  background-color: var(--theme-medium) !important;
+
+  ul {
+    display: flex;
+
+    li {
+      border-radius: 9px;
+    }
+
+    .p-menuitem-link {
+      border-radius: 9px;
+    }
+
+    .p-menuitem-link:hover {
+      background-color: var(--theme-dark) !important;
+    }
+
+    .p-menuitem-icon,
+    .p-menuitem-text {
+      color: #fff !important;
+    }
+  }
+}