ngx-vector-components 5.173.0 → 6.0.0

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

@@ -1,1302 +1,1858 @@
-.ch {
-  cursor: help;
-}
-.cp {
-  cursor: pointer;
-}
-.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;
-  }
-
-  &.round {
-    button {
-      border-radius: 8px;
-    }
-  }
-
-  &: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);
-    }
-  }
-
-  .light-outline {
-    background-color: var(--background);
-    border-color: var(--gray-medium);
-    .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;
-      }
-    }
-  }
-
-  .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;
-      }
-    }
-  }
-
-  .default-outlined {
-    background-color: #ffffff;
-    border-color: var(--theme-light);
-
-    .p-button-label {
-      color: var(--theme-light);
-    }
-    .p-button-icon {
-      color: var(--theme-light);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--theme-primary);
-      border-color: var(--theme-primary);
-
-      .p-button-label {
-        color: #fff;
-      }
-    }
-  }
-  .default-outlined-gray {
-    background-color: #ffffff;
-    border-color: var(--gray-medium);
-
-    .p-button-label {
-      color: var(--theme-light);
-    }
-    .p-button-icon {
-      color: var(--theme-light);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--theme-primary);
-      border-color: var(--theme-primary);
-
-      .p-button-label {
-        color: #fff;
-      }
-    }
-  }
-  .default-outlined-gray-icon-red {
-    background-color: #ffffff;
-    border-color: var(--gray-medium);
-
-    .p-button-label {
-      color: var(--theme-light);
-    }
-    .p-button-icon {
-      color: var(--cancel-color);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--cancel-color);
-      border-color: var(--cancel-color);
-
-      .p-button-label {
-        color: #fff;
-      }
-    }
-  }
-  .default-outlined-gray-icon-gray {
-    background-color: #ffffff;
-    border-color: var(--gray-medium);
-
-    .p-button-label {
-      color: var(--form-labels-color);
-    }
-    .p-button-icon {
-      color: var(--form-labels-color);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--gray-medium);
-      border-color: var(--gray-medium);
-
-      .p-button-label {
-        color: var(--form-labels-color);
-      }
-      .p-button-icon {
-        color: var(--form-labels-color);
-      }
-    }
-  }
-}
-
-.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,
-.p-multiselect {
-  height: 40px;
-  background-color: var(--gray-medium) !important;
-
-  .p-dropdown-label,
-  .p-multiselect-label {
-    font-family: 'Poppins';
-    color: var(--theme-dark) !important;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-  }
-}
-
-p-inputnumber:not(.currency-input).ng-touched.ng-invalid input.p-inputnumber-input {
-  border-color: var(--error-color) !important;
-  background-color: var(--error-color-transparent) !important;
-}
-
-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;
-    }
-  }
-}
-
-.p-inputnumber-buttons-horizontal .p-button {
-  color: var(--theme-primary) !important;
-  border: none !important;
-  background: var(--gray-light) !important;
-
-  span {
-    font-weight: 600 !important;
-  }
-}
-
-.p-multiselect {
-  padding: 6px 0px 6px 12px !important;
-
-  .p-multiselect-label {
-    padding: 0.3rem 0.5rem 0 0 !important;
-  }
-
-  .p-multiselect-trigger {
-    width: 12px !important;
-    &:hover {
-      color: #fff !important;
-    }
-  }
-}
-
-input.p-inputtext:not(.currency-input),
-.p-inputtextarea,
-.p-multiselect {
-  &: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;
-
-    span {
-      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-inputnumber .text-centered input {
-  text-align: center;
-}
-
-p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
-  border-color: var(--error-color) !important;
-}
-
-.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-steps .p-steps-item.p-highlight {
-  background-color: transparent !important;
-
-  .p-menuitem-link .p-steps-number {
-    color: #fff !important;
-    background-color: var(--theme-medium) !important;
-  }
-}
-
-.p-steps .p-steps-item:not(.p-highlight) {
-  .p-steps-title {
-    opacity: 0.4 !important;
-  }
-
-  .p-menuitem-link .p-steps-number {
-    color: var(--theme-medium) !important;
-  }
-}
-
-.p-steps .p-steps-item .p-steps-title {
-  color: var(--theme-medium) !important;
-}
-
-.p-steps .p-steps-item.p-disabled {
-  opacity: 1 !important;
-}
-
-.p-steps .p-steps-item .p-menuitem-link {
-  background: transparent !important;
-
-  .p-steps-number {
-    min-width: 2.6rem !important;
-    height: 2.6rem !important;
-    font-size: 1rem !important;
-    border: 2px solid var(--theme-medium) !important;
-  }
-}
-
-.p-steps ul > li:nth-child(1):only-child::before {
-  content: unset !important;
-}
-
-.p-steps ul > li:not(:only-child)::before {
-  border: 1px dashed var(--theme-medium) !important;
-}
-
-.p-steps .p-steps-item:first-child:before {
-  width: 50% !important;
-  left: 50% !important;
-}
-
-.p-steps .p-steps-item:last-child:before {
-  width: 50% !important;
-}
-
-.p-steps .p-steps-item.checked .p-steps-title {
-  color: var(--success-color-dark) !important;
-}
-
-.p-steps .p-steps-item.checked .p-menuitem-link .p-steps-number {
-  background-color: var(--success-color-dark) !important;
-  color: #fff !important;
-  border: 2px solid var(--success-color-dark) !important;
-}
-
-.p-steps .p-steps-item .p-menuitem-link .p-steps-number.disabled {
-  color: var(--gray-dark) !important;
-  border: 2px solid var(--gray-dark) !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:not(.background-white) {
-  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;
-    gap: 20px;
-  }
-
-  .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-panel:not(.has-filter) .p-multiselect-header {
-  .p-checkbox::after {
-    content: 'Selecionar Todos';
-    margin-left: 0.5rem;
-  }
-}
-
-.p-multiselect-header {
-  .p-checkbox {
-    width: max-content;
-  }
-}
-
-.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,
-p-multiselect.ng-touched.ng-invalid .p-multiselect {
-  border-color: var(--error-color) !important;
-  background-color: var(--error-color-transparent) !important;
-}
-
-.p-dropdown-panel,
-.p-autocomplete-panel,
-.p-multiselect-panel {
-  // max-width: 250px !important;
-  min-width: 100%;
-  border: 1px solid var(--theme-dark) !important;
-  margin-top: -2px !important;
-  border-radius: var(--border-radius) !important;
-
-  & .p-autocomplete-items,
-  & .p-multiselect-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,
-.p-multiselect-item {
-  text-overflow: ellipsis;
-  color: var(--theme-dark) !important;
-
-  &:hover {
-    background-color: var(--theme-dark) !important;
-    color: #ffffff !important;
-  }
-}
-
-.p-dropdown,
-.p-multiselect {
-  border: none !important;
-  .p-highlight {
-    background-color: #ffffff !important;
-  }
-}
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight,
-.p-multiselect-panel .p-multiselect-items .p-multiselect-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 {
-            svg {
-              height: 0.85rem !important;
-              width: 0.85rem !important;
-            }
-
-            sortamountupalticon svg,
-            sortamountdownicon svg {
-              color: var(--theme-primary) !important;
-            }
-          }
-
-          &.p-highlight {
-            color: var(--theme-primary) !important;
-          }
-        }
-      }
-    }
-
-    .p-datatable-tbody {
-      tr.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;
-        }
-
-        .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 {
-        .p-tabview-nav-link {
-          justify-content: center;
-        }
-
-        &.p-highlight .p-tabview-nav-link {
-          color: var(--theme-primary) !important;
-        }
-      }
-    }
-  }
-
-  vector-panel p-panel .p-panel .p-panel-content {
-    padding: 0px !important;
-  }
-}
-
-.success {
-  color: var(--success-color);
-}
-.error {
-  color: var(--error-color);
-}
-.warning {
-  color: var(--warning-color);
-}
-.info {
-  color: var(--theme-light);
-}
-
-p-tabview {
-  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
-    border-color: var(--theme-dark) !important;
-  }
-
-  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
-    border-top-right-radius: 0px !important;
-    border-top-left-radius: 0px !important;
-
-    &:hover {
-      border-color: var(--theme-dark) !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: 8px 0;
-  border-radius: 8px;
-  background-color: #ffffff !important;
-  border: 1px solid #d9dbe9 !important;
-  box-shadow:
-    0 1px 2px 0 rgba(31, 41, 55, 0.1),
-    0 2px 4px 0 rgba(31, 41, 55, 0.1),
-    0 4px 8px 0 rgba(31, 41, 55, 0.1),
-    0 8px 16px 0 rgba(31, 41, 55, 0.1);
-
-  ul {
-    display: flex;
-    flex-direction: column;
-    max-height: 200px !important;
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    &::-webkit-scrollbar {
-      width: 16px;
-    }
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: var(--theme-medium);
-      border-radius: 10px;
-      border: 5px solid transparent;
-      background-clip: padding-box;
-    }
-
-    li {
-      border-radius: 4px;
-    }
-
-    .p-menuitem-link {
-      border-radius: 4px;
-    }
-
-    .p-menuitem-content {
-      background-color: transparent !important;
-    }
-
-    .p-menuitem-icon,
-    .p-menuitem-text {
-      color: #434560 !important;
-    }
-
-    .p-menuitem-text {
-      font-weight: 500 !important;
-    }
-
-    .p-menuitem-link:hover,
-    .p-menuitem.p-focus > .p-menuitem-link {
-      background-color: var(--theme-medium) !important;
-
-      .p-menuitem-icon,
-      .p-menuitem-text {
-        color: #ffffff !important;
-      }
-    }
-  }
-}
-
-.p-inputswitch.p-focus .p-inputswitch-slider {
-  box-shadow: none !important;
-}
-
-.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-  background-color: var(--theme-primary) !important;
-}
-
-.custom-field-text {
-  input[type='text'],
-  input[type='password'] {
-    border-radius: 6px;
-    color: #757b8a !important;
-
-    &:focus:not(.ng-invalid):not(.p-inputmask) {
-      border: 2px solid #6690f3 !important;
-    }
-    &:not(.ng-invalid) {
-      border: 2px solid #e1e4ea !important;
-    }
-  }
-  &.input-otp {
-    justify-content: center;
-
-    input[type='text'] {
-      padding: 10px;
-      min-height: 54px;
-      width: 46px;
-      font-size: 1.6em !important;
-      font-weight: 600;
-      color: #363636 !important;
-
-      @media screen and (max-width: 576px) {
-        padding: 0;
-        width: 40px;
-        font-size: 1.2em !important;
-        font-weight: 600;
-      }
-    }
-  }
-  &.uppercase {
-    input[type='text'] {
-      text-transform: uppercase;
-    }
-    span {
-      text-transform: none;
-    }
-  }
-  &.centered {
-    input[type='text'] {
-      text-align: center;
-    }
-  }
-  &.size-lg {
-    input[type='text'] {
-      font-size: 1.3em !important;
-    }
-  }
-}
-
-.vector-text {
-  &.uppercase {
-    input[type='text'] {
-      text-transform: uppercase;
-    }
-    span {
-      text-transform: none;
-    }
-  }
-}
-
-.multiselect-flags {
-  .p-multiselect-panel .p-multiselect-items {
-    .p-multiselect-item {
-      span {
-        color: #757b8a;
-      }
-      &:hover {
-        background: #e1e4ea !important;
-      }
-      &:not(.p-highlight):not(.p-disabled).p-focus {
-        background: #e1e4ea !important;
-      }
-      &.p-highlight {
-        background: #e1e4ea !important;
-      }
-    }
-  }
-}
+.ch {
+  cursor: help;
+}
+.cp {
+  cursor: pointer;
+}
+.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;
+  }
+
+  &.round {
+    button {
+      border-radius: 8px;
+    }
+  }
+
+  &: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);
+    }
+  }
+
+  .light-outline {
+    background-color: var(--background);
+    border-color: var(--gray-medium);
+    .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;
+      }
+    }
+  }
+
+  .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;
+      }
+    }
+  }
+
+  .default-outlined {
+    background-color: #ffffff;
+    border-color: var(--theme-light);
+
+    .p-button-label {
+      color: var(--theme-light);
+    }
+    .p-button-icon {
+      color: var(--theme-light);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--theme-primary);
+      border-color: var(--theme-primary);
+
+      .p-button-label {
+        color: #fff;
+      }
+    }
+  }
+  .default-outlined-gray {
+    background-color: #ffffff;
+    border-color: var(--gray-medium);
+
+    .p-button-label {
+      color: var(--theme-light);
+    }
+    .p-button-icon {
+      color: var(--theme-light);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--theme-primary);
+      border-color: var(--theme-primary);
+
+      .p-button-label {
+        color: #fff;
+      }
+    }
+  }
+  .default-outlined-gray-icon-red {
+    background-color: #ffffff;
+    border-color: var(--gray-medium);
+
+    .p-button-label {
+      color: var(--theme-light);
+    }
+    .p-button-icon {
+      color: var(--cancel-color);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--cancel-color);
+      border-color: var(--cancel-color);
+
+      .p-button-label {
+        color: #fff;
+      }
+    }
+  }
+  .default-outlined-gray-icon-gray {
+    background-color: #ffffff;
+    border-color: var(--gray-medium);
+
+    .p-button-label {
+      color: var(--form-labels-color);
+    }
+    .p-button-icon {
+      color: var(--form-labels-color);
+    }
+
+    &:hover:not(:disabled) {
+      background-color: var(--gray-medium);
+      border-color: var(--gray-medium);
+
+      .p-button-label {
+        color: var(--form-labels-color);
+      }
+      .p-button-icon {
+        color: var(--form-labels-color);
+      }
+    }
+  }
+}
+
+.p-inputgroup {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+
+  > input,
+  > p-inputmask {
+    flex: 1 1 auto;
+    width: 1%;
+  }
+
+  vector-button {
+    flex: 0 0 auto;
+
+    p-button,
+    button {
+      width: auto !important;
+    }
+  }
+}
+
+.p-input-icon-left,
+.p-input-icon-right {
+  position: relative;
+}
+
+.p-input-icon-left > i,
+.p-input-icon-left > svg {
+  position: absolute;
+  top: 50%;
+  left: 0.75rem;
+  margin-top: -0.5rem;
+  z-index: 1;
+}
+
+.p-input-icon-right > i,
+.p-input-icon-right > svg {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  margin-top: -0.5rem;
+  z-index: 1;
+}
+
+.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-select,
+.p-multiselect {
+  height: 40px;
+  background-color: var(--gray-medium) !important;
+
+  .p-select-label,
+  .p-multiselect-label {
+    font-family: 'Poppins';
+    color: var(--theme-dark) !important;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.p-paginator .p-select {
+  width: auto !important;
+  height: auto !important;
+  background-color: transparent !important;
+  border: 1px solid var(--gray-medium) !important;
+  border-radius: 8px !important;
+
+  .p-select-label {
+    padding: 8px 12px !important;
+    color: var(--theme-dark) !important;
+    font-weight: 600;
+  }
+
+  .p-select-dropdown {
+    color: var(--theme-dark) !important;
+  }
+}
+
+.p-paginator .p-paginator-first,
+.p-paginator .p-paginator-prev,
+.p-paginator .p-paginator-next,
+.p-paginator .p-paginator-last {
+  color: var(--theme-dark) !important;
+}
+
+p-inputnumber:not(.currency-input).ng-touched.ng-invalid input.p-inputnumber-input {
+  border-color: var(--error-color) !important;
+  background-color: var(--error-color-transparent) !important;
+}
+
+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;
+    }
+  }
+}
+
+.p-inputnumber-buttons-horizontal,
+.p-inputnumber.p-inputnumber-horizontal {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: stretch !important;
+  width: 100% !important;
+
+  p-button,
+  .p-inputnumber-button-group {
+    width: auto !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    display: inline-flex !important;
+    align-items: stretch !important;
+  }
+
+  .p-inputnumber-input {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+    text-align: center !important;
+    border-radius: 0 !important;
+  }
+
+  .p-inputnumber-button,
+  button.p-inputnumber-increment-button,
+  button.p-inputnumber-decrement-button,
+  .p-button {
+    width: 36px !important;
+    min-width: 36px !important;
+    flex: 0 0 36px !important;
+    padding: 0 !important;
+    color: var(--theme-primary) !important;
+    border: none !important;
+    border-radius: 0 !important;
+    background: var(--gray-light) !important;
+    box-shadow: none !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+
+    &:hover:not(:disabled) {
+      background: var(--gray-medium) !important;
+      color: var(--theme-dark) !important;
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: none !important;
+      box-shadow: none !important;
+    }
+
+    span,
+    .p-button-icon,
+    svg {
+      color: inherit !important;
+      font-weight: 600 !important;
+      border-radius: 0 !important;
+    }
+  }
+
+  .p-inputnumber-decrement-button,
+  .p-inputnumber-button:first-of-type {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  .p-inputnumber-increment-button,
+  .p-inputnumber-button:last-of-type {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+}
+
+.p-multiselect {
+  padding: 6px 0px 6px 12px !important;
+
+  .p-multiselect-label {
+    padding: 0.3rem 0.5rem 0 0 !important;
+  }
+
+  .p-multiselect-trigger {
+    width: 12px !important;
+    &:hover {
+      color: #fff !important;
+    }
+  }
+
+  // PrimeNG 19: display="chip" renderiza <p-chip styleClass="p-multiselect-chip"> dentro do .p-multiselect-label
+  // Deixar inline, compacto, igual QA (PrimeNG 17 era assim por padrão)
+  &.p-multiselect-display-chip {
+    .p-multiselect-label {
+      display: inline-flex !important;
+      flex-wrap: wrap !important;
+      align-items: center !important;
+      gap: 4px !important;
+      padding: 0.15rem 0.5rem 0.15rem 0 !important;
+      min-height: 28px !important;
+    }
+
+    .p-multiselect-chip-item {
+      display: inline-flex !important;
+      align-items: center !important;
+    }
+
+    .p-multiselect-chip,
+    .p-chip {
+      height: 24px !important;
+      padding: 0 6px 0 10px !important;
+      background: #ffffff !important;
+      border: 1px solid #e5e7eb !important;
+      border-radius: 16px !important;
+      font-size: 12px !important;
+      font-weight: 500 !important;
+      line-height: 1 !important;
+      color: var(--theme-dark) !important;
+      gap: 4px !important;
+      display: inline-flex !important;
+      align-items: center !important;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
+
+      .p-chip-label,
+      .p-multiselect-chip-label {
+        max-width: 140px !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+        color: inherit !important;
+      }
+
+      .p-chip-remove-icon,
+      .p-multiselect-chip-icon,
+      svg {
+        width: 14px !important;
+        height: 14px !important;
+        color: var(--theme-dark) !important;
+        opacity: 0.6 !important;
+        cursor: pointer !important;
+
+        &:hover {
+          opacity: 1 !important;
+        }
+      }
+    }
+  }
+}
+
+input.p-inputtext:not(.currency-input),
+.p-inputtextarea,
+.p-multiselect {
+  &: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-datepicker {
+  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-dropdown {
+        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-dropdown {
+    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;
+
+    span {
+      color: var(--theme-dark) !important;
+    }
+  }
+}
+p-datepicker.ng-touched.ng-invalid {
+  .p-datepicker {
+    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-dropdown {
+    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-dropdown {
+      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-inputnumber .text-centered input {
+  text-align: center;
+}
+
+p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
+  border-color: var(--error-color) !important;
+}
+
+.p-radiobutton {
+  width: 24px;
+  height: 24px;
+
+  .p-radiobutton-box {
+    border: 2px solid #d1d5db !important;
+    background: #ffffff !important;
+    box-shadow: none !important;
+  }
+
+  &:not(.p-disabled):hover .p-radiobutton-box {
+    border-color: #1545de !important;
+  }
+
+  &.p-radiobutton-checked .p-radiobutton-box {
+    border-color: #1545de !important;
+    background: #1545de !important;
+
+    .p-radiobutton-icon {
+      background: #ffffff !important;
+    }
+  }
+
+  .p-radiobutton-input:focus-visible + .p-radiobutton-box,
+  &.p-focus .p-radiobutton-box {
+    border-color: #1545de !important;
+    box-shadow: 0 0 0 3px #ced9fa !important;
+  }
+}
+
+.p-steps .p-steps-item.p-highlight {
+  background-color: transparent !important;
+
+  .p-menu-item-link .p-steps-number {
+    color: #fff !important;
+    background-color: var(--theme-medium) !important;
+  }
+}
+
+.p-menu-list {
+  padding: 0px !important;
+}
+
+.p-menu-item-link {
+  padding: 0.75rem 1rem !important;
+}
+
+.p-steps .p-steps-item:not(.p-highlight) {
+  .p-steps-title {
+    opacity: 0.4 !important;
+  }
+
+  .p-menu-item-link .p-steps-number {
+    color: var(--theme-medium) !important;
+  }
+}
+
+.p-steps .p-steps-item .p-steps-title {
+  color: var(--theme-medium) !important;
+}
+
+.p-steps .p-steps-item.p-disabled {
+  opacity: 1 !important;
+}
+
+.p-steps .p-steps-item .p-menu-item-link {
+  background: transparent !important;
+
+  .p-steps-number {
+    min-width: 2.6rem !important;
+    height: 2.6rem !important;
+    font-size: 1rem !important;
+    border: 2px solid var(--theme-medium) !important;
+  }
+}
+
+.p-steps ul > li:nth-child(1):only-child::before {
+  content: unset !important;
+}
+
+.p-steps ul > li:not(:only-child)::before {
+  border: 1px dashed var(--theme-medium) !important;
+}
+
+.p-steps .p-steps-item:first-child:before {
+  width: 50% !important;
+  left: 50% !important;
+}
+
+.p-steps .p-steps-item:last-child:before {
+  width: 50% !important;
+}
+
+.p-steps .p-steps-item.checked .p-steps-title {
+  color: var(--success-color-dark) !important;
+}
+
+.p-steps .p-steps-item.checked .p-menu-item-link .p-steps-number {
+  background-color: var(--success-color-dark) !important;
+  color: #fff !important;
+  border: 2px solid var(--success-color-dark) !important;
+}
+
+.p-steps .p-steps-item .p-menu-item-link .p-steps-number.disabled {
+  color: var(--gray-dark) !important;
+  border: 2px solid var(--gray-dark) !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-panel {
+  border: 2px solid var(--theme-dark) !important;
+  border-radius: var(--border-radius) !important;
+  z-index: 15000 !important;
+
+  .p-datepicker-weekday {
+    color: var(--theme-dark) !important;
+  }
+
+  .p-datepicker-day {
+    color: var(--font-color) !important;
+
+    &:focus {
+      box-shadow: unset !important;
+    }
+  }
+
+  .p-datepicker-day-selected {
+    color: #ffffff !important;
+  }
+
+  p-button {
+    width: auto !important;
+    background: transparent !important;
+    box-shadow: none !important;
+
+    button {
+      width: auto !important;
+      min-width: 2rem !important;
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+      color: var(--theme-dark) !important;
+
+      &:hover:not(:disabled) {
+        background: var(--gray-light) !important;
+        border: none !important;
+      }
+    }
+
+    .p-button-icon {
+      color: var(--theme-dark) !important;
+    }
+  }
+}
+
+.p-toast {
+  .p-toast-message {
+    border-radius: 12px !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+    border: none !important;
+    padding: 16px !important;
+    color: #1f2937 !important;
+  }
+
+  .p-toast-message-content {
+    gap: 12px !important;
+    align-items: center !important;
+    padding: 0 !important;
+  }
+
+  .p-toast-message-text {
+    gap: 4px !important;
+  }
+
+  .p-toast-summary {
+    color: #111827 !important;
+    font-family: 'Poppins', 'Inter', sans-serif !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+  }
+
+  .p-toast-detail {
+    color: #4b5563 !important;
+    font-family: 'Poppins', 'Inter', sans-serif !important;
+    font-weight: 400 !important;
+    font-size: 12px !important;
+  }
+
+  .p-toast-message-icon {
+    width: 40px !important;
+    height: 40px !important;
+    min-width: 40px !important;
+    border-radius: 50% !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    color: #ffffff !important;
+
+    svg,
+    .p-icon {
+      width: 22px !important;
+      height: 22px !important;
+      color: #ffffff !important;
+      fill: #ffffff !important;
+    }
+  }
+
+  .p-toast-message-warn {
+    background: #fde6c0 !important;
+    .p-toast-message-icon {
+      background: #f59e0b !important;
+    }
+  }
+
+  .p-toast-message-error {
+    background: #fee2e2 !important;
+    .p-toast-message-icon {
+      background: #ef4444 !important;
+    }
+  }
+
+  .p-toast-message-success {
+    background: #dcfce7 !important;
+    .p-toast-message-icon {
+      background: #22c55e !important;
+    }
+  }
+
+  p-button,
+  .p-toast-close-button {
+    width: auto !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    align-self: center !important;
+
+    button {
+      width: 2rem !important;
+      min-width: 2rem !important;
+      height: 2rem !important;
+      padding: 0 !important;
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+      color: #6b7280 !important;
+      border-radius: 50% !important;
+
+      &:hover:not(:disabled) {
+        background: rgba(0, 0, 0, 0.06) !important;
+        border: none !important;
+        color: #1f2937 !important;
+      }
+    }
+
+    .p-button-icon,
+    .p-toast-close-icon {
+      color: inherit !important;
+      width: 1rem !important;
+      height: 1rem !important;
+    }
+  }
+}
+
+.p-overlaypanel:not(.background-white) {
+  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-dialog .p-dialog-header p-button,
+.p-drawer .p-drawer-header p-button {
+  width: auto !important;
+  background: transparent !important;
+  box-shadow: none !important;
+
+  button {
+    width: 2rem !important;
+    height: 2rem !important;
+    min-width: 2rem !important;
+    padding: 0 !important;
+    border-radius: 50% !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    color: var(--gray-dark) !important;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+  }
+
+  &:hover button:not(:disabled) {
+    background: var(--gray-light) !important;
+    color: var(--theme-dark) !important;
+  }
+
+  .p-dialog-header-close-icon,
+  .p-button-icon {
+    font-size: 1rem !important;
+  }
+}
+
+.p-confirm-dialog {
+  .p-dialog-footer .actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 20px;
+  }
+
+  .p-confirm-dialog-icon {
+    display: none !important;
+  }
+
+  .p-confirm-dialog-message {
+    margin-left: 0px !important;
+  }
+}
+
+.p-selectbutton {
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 4px !important;
+  padding: 4px !important;
+  height: 42px !important;
+  background-color: var(--gray-light) !important;
+  border-radius: 12px !important;
+  width: fit-content !important;
+
+  .p-togglebutton {
+    display: inline-flex !important;
+    align-items: center !important;
+    height: 34px !important;
+    margin: 0 !important;
+    padding: 0 16px !important;
+    border: none !important;
+    border-radius: 8px !important;
+    background: transparent !important;
+    transition: all 0.2s ease;
+
+    .p-togglebutton-content {
+      gap: 6px !important;
+      font-size: 14px !important;
+      font-weight: 500 !important;
+      line-height: 1 !important;
+    }
+
+    .p-togglebutton-label,
+    .p-togglebutton-icon {
+      color: var(--theme-dark) !important;
+    }
+
+    &:not(.p-togglebutton-checked) {
+      background-color: transparent !important;
+    }
+
+    &.p-togglebutton-checked {
+      background-color: #ffffff !important;
+      box-shadow:
+        0 1px 2px 0 rgba(17, 55, 178, 0.1),
+        0 2px 4px 0 rgba(17, 55, 178, 0.1),
+        0 4px 8px 0 rgba(17, 55, 178, 0.1) !important;
+
+      .p-togglebutton-label,
+      .p-togglebutton-icon {
+        color: var(--brand-blue) !important;
+        font-weight: 600 !important;
+      }
+    }
+
+    &:disabled,
+    &.p-disabled {
+      background-color: transparent !important;
+      box-shadow: none !important;
+
+      .p-togglebutton-label,
+      .p-togglebutton-icon {
+        color: var(--gray-dark) !important;
+      }
+    }
+  }
+}
+
+vector-select-button-field.is-secondary {
+  .p-selectbutton {
+    background-color: var(--brand-light) !important;
+    border-radius: 9999px !important;
+  }
+
+  .p-togglebutton {
+    padding: 0 20px !important;
+    border-radius: 9999px !important;
+  }
+}
+
+.p-multiselect-overlay:not(.has-filter) .p-multiselect-header p-checkbox::after {
+  content: 'Selecionar Todos';
+  display: inline-block;
+  margin-left: 0.5rem;
+  color: var(--theme-dark);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.p-multiselect-header {
+  .p-checkbox {
+    width: max-content;
+  }
+}
+
+p-checkbox.rounded-checkbox,
+.rounded-checkbox {
+  --p-checkbox-border-radius: 50%;
+  --p-checkbox-checked-border-radius: 50%;
+}
+
+.rounded-checkbox .p-checkbox,
+.rounded-checkbox .p-checkbox.p-checkbox-checked {
+  background: transparent !important;
+  border-radius: 50% !important;
+}
+
+.rounded-checkbox .p-checkbox-input {
+  background: transparent !important;
+  border-radius: 50% !important;
+}
+
+.rounded-checkbox .p-checkbox-box,
+.rounded-checkbox .p-checkbox.p-checkbox-checked .p-checkbox-box {
+  border-radius: 50% !important;
+  border: none !important;
+  overflow: hidden !important;
+}
+
+.rounded-checkbox .p-checkbox:not(.p-checkbox-checked) .p-checkbox-box {
+  background-color: var(--gray-light) !important;
+}
+
+.rounded-checkbox .p-checkbox.p-checkbox-checked .p-checkbox-box {
+  background-color: var(--brand-blue) !important;
+}
+
+p-checkbox.rounded-checkbox .p-checkbox-icon,
+.rounded-checkbox .p-checkbox-icon {
+  font-size: 0.8em !important;
+  padding-top: 2px !important;
+}
+
+.p-checkbox-box.p-highlight,
+.p-checkbox.p-checkbox-checked .p-checkbox-box {
+  background: var(--brand-blue) !important;
+  border-color: var(--brand-blue) !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-select,
+.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,
+p-multiselect.ng-touched.ng-invalid .p-multiselect {
+  border-color: var(--error-color) !important;
+  background-color: var(--error-color-transparent) !important;
+}
+
+.p-select-overlay,
+.p-autocomplete-panel,
+.p-multiselect-overlay {
+  // max-width: 250px !important;
+  min-width: 100%;
+  border: 1px solid var(--theme-dark) !important;
+  margin-top: -2px !important;
+  border-radius: var(--border-radius) !important;
+
+  & .p-autocomplete-items,
+  & .p-multiselect-list {
+    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-select-option,
+.p-autocomplete-item,
+.p-multiselect-item {
+  text-overflow: ellipsis;
+  color: var(--theme-dark) !important;
+
+  &:hover {
+    background-color: var(--theme-dark) !important;
+    color: #ffffff !important;
+  }
+}
+
+.p-select,
+.p-multiselect {
+  border: none !important;
+  .p-highlight {
+    background-color: #ffffff !important;
+  }
+}
+.p-select-overlay .p-select-list .p-select-option.p-highlight,
+.p-multiselect-overlay .p-multiselect-list .p-multiselect-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,
+  p-message {
+    display: none !important;
+  }
+
+  .p-fileupload-filelabel,
+  [class*='filelabel'] {
+    display: none !important;
+  }
+
+  input[type='file'] {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+    opacity: 0 !important;
+  }
+
+  p-button {
+    width: 100% !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
+
+  .p-fileupload-choose-button,
+  .p-fileupload-choose {
+    background: transparent !important;
+    border: 1px solid var(--theme-dark) !important;
+    border-radius: 30px !important;
+    box-shadow: none !important;
+    color: var(--theme-dark) !important;
+    width: 100% !important;
+    padding: 0.875rem 1.5rem !important;
+    font-weight: 600 !important;
+    justify-content: center !important;
+    gap: 0.5rem !important;
+
+    &:hover:not(:disabled) {
+      background: var(--theme-dark) !important;
+      border-color: var(--theme-dark) !important;
+      color: #ffffff !important;
+
+      .p-button-label,
+      .p-button-icon {
+        color: #ffffff !important;
+      }
+    }
+
+    .p-button-label {
+      color: inherit !important;
+      flex: 0 0 auto !important;
+      max-width: unset !important;
+      overflow: visible !important;
+    }
+
+    .p-button-icon {
+      color: inherit !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;
+    }
+
+    // PrimeNG 18 removeu o responsiveLayout: o .p-column-title (header embutido
+    // em cada celula por getCellContent) precisa ser escondido manualmente.
+    .p-column-title {
+      display: none;
+    }
+
+    .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;
+          color: #1f2937 !important;
+
+          > div {
+            gap: 8px;
+          }
+
+          &:first-child {
+            border-top-left-radius: 15px !important;
+            padding: 10px !important;
+          }
+
+          &:last-child {
+            border-top-right-radius: 15px !important;
+          }
+
+          p-sorticon {
+            svg {
+              height: 0.85rem !important;
+              width: 0.85rem !important;
+            }
+
+            sortamountupalticon svg,
+            sortamountdownicon svg {
+              color: var(--theme-primary) !important;
+            }
+          }
+
+          &.p-highlight {
+            color: var(--theme-primary) !important;
+          }
+        }
+      }
+    }
+
+    .p-datatable-tbody {
+      tr.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;
+        }
+
+        .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-tabpanels {
+      display: none !important;
+    }
+
+    .p-tablist .p-tab {
+      justify-content: center;
+
+      &.p-tab-active {
+        color: var(--theme-primary) !important;
+      }
+    }
+  }
+
+  vector-panel p-panel .p-panel .p-panel-content {
+    padding: 0px !important;
+  }
+}
+
+.success {
+  color: var(--success-color);
+}
+.error {
+  color: var(--error-color);
+}
+.warning {
+  color: var(--warning-color);
+}
+.info {
+  color: var(--theme-light);
+}
+
+p-tabview {
+  background: transparent !important;
+
+  .p-tabpanels,
+  .p-tabpanel,
+  .p-tabview-panel {
+    background: transparent !important;
+  }
+
+  .p-tablist-tab-list {
+    background: none !important;
+    .p-tab.p-tab-active {
+      border-color: var(--theme-primary) !important;
+    }
+
+    .p-tab {
+      border-top-right-radius: 0px !important;
+      border-top-left-radius: 0px !important;
+      color: var(--theme-primary) !important;
+
+      &:hover {
+        border-color: var(--theme-primary) !important;
+        border-bottom-width: 2px !important;
+      }
+    }
+    .p-tablist-active-bar {
+      height: 2px !important;
+      background: var(--theme-primary) !important;
+    }
+  }
+}
+
+.p-accordion {
+  .p-accordionpanel {
+    margin: 20px 0;
+    border: none !important;
+    background: transparent !important;
+    border-radius: 16px !important;
+    box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.06) !important;
+    overflow: hidden;
+  }
+
+  .p-accordionheader {
+    position: relative !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    background: #ffffff !important;
+    color: var(--theme-dark) !important;
+    padding: 1.25rem 1.5rem !important;
+    font-weight: 600 !important;
+
+    &:hover {
+      background: #ffffff !important;
+      color: var(--theme-dark) !important;
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: none !important;
+      box-shadow: none !important;
+    }
+  }
+
+  .p-accordionheader-toggle-icon {
+    position: absolute !important;
+    right: 1.5rem !important;
+    top: 50% !important;
+    left: auto !important;
+    margin: 0 !important;
+    color: var(--theme-dark) !important;
+    transform: translateY(-50%) rotate(-90deg);
+    transition: transform 0.2s ease;
+  }
+
+  .p-accordionheader[aria-expanded='true'] .p-accordionheader-toggle-icon {
+    transform: translateY(-50%) rotate(0deg);
+  }
+
+  .p-accordioncontent {
+    border: none !important;
+    background: #ffffff !important;
+  }
+
+  .p-accordioncontent-content {
+    border: none !important;
+    background: #ffffff !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    padding: 0 1.5rem 1.5rem !important;
+    color: inherit !important;
+  }
+}
+
+.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: 8px 0;
+  border-radius: 8px;
+  background-color: #ffffff !important;
+  border: 1px solid #d9dbe9 !important;
+  box-shadow:
+    0 1px 2px 0 rgba(31, 41, 55, 0.1),
+    0 2px 4px 0 rgba(31, 41, 55, 0.1),
+    0 4px 8px 0 rgba(31, 41, 55, 0.1),
+    0 8px 16px 0 rgba(31, 41, 55, 0.1);
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    max-height: 200px !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    &::-webkit-scrollbar {
+      width: 16px;
+    }
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: var(--theme-medium);
+      border-radius: 10px;
+      border: 5px solid transparent;
+      background-clip: padding-box;
+    }
+
+    li {
+      border-radius: 4px;
+    }
+
+    .p-menu-item-content {
+      border-radius: 4px;
+      background-color: transparent !important;
+    }
+
+    .p-menu-item-link {
+      border-radius: 4px;
+    }
+
+    .p-menu-item-icon,
+    .p-menu-item-label {
+      color: #434560 !important;
+    }
+
+    .p-menu-item-label {
+      font-weight: 500 !important;
+    }
+
+    .p-menu-item-content:hover,
+    .p-menu-item.p-focus .p-menu-item-content {
+      background-color: var(--theme-medium) !important;
+
+      .p-menu-item-icon,
+      .p-menu-item-label {
+        color: #ffffff !important;
+      }
+    }
+  }
+}
+
+.p-toggleswitch {
+  flex: 0 0 auto;
+}
+
+.p-toggleswitch.p-focus .p-toggleswitch-slider {
+  box-shadow: none !important;
+}
+
+.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
+  background-color: var(--theme-primary) !important;
+}
+
+.custom-field-text {
+  input[type='text'],
+  input[type='password'] {
+    border-radius: 6px;
+    color: #757b8a !important;
+
+    &:focus:not(.ng-invalid):not(.p-inputmask) {
+      border: 2px solid #6690f3 !important;
+    }
+    &:not(.ng-invalid) {
+      border: 2px solid #e1e4ea !important;
+    }
+  }
+  &.input-otp {
+    justify-content: center;
+
+    input[type='text'] {
+      padding: 10px;
+      min-height: 54px;
+      width: 46px;
+      font-size: 1.6em !important;
+      font-weight: 600;
+      color: #363636 !important;
+
+      @media screen and (max-width: 576px) {
+        padding: 0;
+        width: 40px;
+        font-size: 1.2em !important;
+        font-weight: 600;
+      }
+    }
+  }
+  &.uppercase {
+    input[type='text'] {
+      text-transform: uppercase;
+    }
+    span {
+      text-transform: none;
+    }
+  }
+  &.centered {
+    input[type='text'] {
+      text-align: center;
+    }
+  }
+  &.size-lg {
+    input[type='text'] {
+      font-size: 1.3em !important;
+    }
+  }
+}
+
+.vector-text {
+  &.uppercase {
+    input[type='text'] {
+      text-transform: uppercase;
+    }
+    span {
+      text-transform: none;
+    }
+  }
+}
+
+.multiselect-flags {
+  .p-multiselect-overlay .p-multiselect-list {
+    .p-multiselect-item {
+      span {
+        color: #757b8a;
+      }
+      &:hover {
+        background: #e1e4ea !important;
+      }
+      &:not(.p-highlight):not(.p-disabled).p-focus {
+        background: #e1e4ea !important;
+      }
+      &.p-highlight {
+        background: #e1e4ea !important;
+      }
+    }
+  }
+}