* {
  box-sizing: border-box;
}

:root {
  font-family: Nunito Sans, -apple-system, Helvetica, Arial, sans-serif;
}

body, main {
  width: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-color);
  overflow-y: hidden;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 1.375rem;
  font-weight: 800;
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}

h3.optional:after {
  font-weight: lighter;
  font-size: 1rem;
  content: " (optional)";
  color: var(--sublabel);
}

.wrapper {
  overflow: hidden;
  position: relative;
  transition-duration: var(--transition-time);
  transition-property: padding-right;
  width: 100%;
}

[v-cloak] {
  display: none;
}

aside {
  box-shadow: var(--box-shadow-default);
  z-index: 1000;
}

main {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  background-color: var(--background-default);
}

/* mobile menu */
@media (max-width: 992px) {
  body {
    overflow-y: auto;
  }
  body #body-wrapper {
    flex-direction: column;
  }
  body #body-wrapper #menu-container {
    width: 100%;
    height: auto;
    padding: 1rem 2rem 0rem;
  }
  body #body-wrapper #menu-container aside:not(.local) {
    display: none;
  }
  body #body-wrapper #menu-container .mobile-menu-btn {
    padding: 0;
  }
}
.footer {
  display: flex;
  flex-shrink: 0;
  background-color: var(--footer-bg);
  color: var(--surface-a);
  margin-top: auto;
}
.footer a {
  color: var(--secondary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.footer .separator {
  padding: 0 0.5rem;
}

.p-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}

.p-avatar-xl {
  border: 3px solid var(--border-black-700);
  height: 6.2rem;
  width: 6.2rem;
  font-size: 2rem;
}

.p-avatar.p-avatar-circle {
  border-radius: 50%;
}

.p-avatar-image {
  border-radius: 50%;
  box-sizing: border-box;
  overflow: hidden;
}

.p-avatar-image img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.p-avatar.p-avatar-image {
  background-color: transparent;
}

.p-avatar img {
  width: 100%;
  height: 100%;
}

.p-avatar-circle img {
  border-radius: 50%;
}

.user-name {
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
}

.user-position {
  font-size: 0.9rem;
}

.grid-title {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.4rem;
}
.grid-title.clickable:hover {
  color: var(--sublabel);
}

.grid-sort-icon {
  font-size: 0.7rem;
  margin: 0 0.2rem 0 0.2rem;
}

.grid-clickable-cell {
  cursor: pointer;
}
.grid-clickable-cell:hover {
  color: var(--sublabel);
}

.p-autocomplete-empty-message {
  padding-left: 1rem;
}

/* fix colors */
body, .p-card {
  color: var(--text-color);
}

/* nav menu */
#main-menu {
  /* trick to convert svg image of any color to white */
}
#main-menu .has-submenu + .nav-submenu {
  height: auto;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
#main-menu .has-submenu.expanded + .nav-submenu {
  max-height: 500px;
  transition: max-height 0.3s ease-in;
}
#main-menu .nav-link,
#main-menu .subnav-link {
  padding-bottom: 0.7rem;
  padding-top: 0.7rem;
  width: 100%;
  border-radius: var(--border-radius) !important;
  margin-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  align-items: center;
  text-decoration: none;
  display: flex;
  color: var(--text-color);
  transition: background-color 0.3s ease;
}
#main-menu .nav-link {
  background-color: var(--surface-100);
  font-weight: 700 !important;
}
#main-menu .nav-link:hover,
#main-menu .subnav-link:hover {
  background-color: var(--surface-400);
  cursor: pointer;
}
#main-menu .subnav-link {
  font-size: 0.9em;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}
#main-menu .nav-link.active {
  color: var(--primary-color-text);
  background-color: var(--primary-color);
}
#main-menu .nav-link.active:hover {
  background-color: var(--primary-color-darker);
}
#main-menu .nav-link.active .icon {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(13%) hue-rotate(237deg) brightness(104%) contrast(104%);
}

#page-header {
  padding: 1.2rem 2rem;
  background-color: var(--surface-a);
}

.content-wrapper {
  background-color: var(--background-default);
  padding: 1rem 1rem 2rem;
}

.back-btn {
  color: var(--primary-color);
  font-size: 1rem;
  font-weight: normal;
  text-decoration: none;
}

.back-btn:before {
  content: "\e900";
  font-family: "primeicons";
  font-weight: normal;
  font-style: normal;
  margin-right: 0.4rem;
  font-size: 0.875rem;
  line-height: 1;
}

/* animations */
@keyframes slideInFromBottom {
  0% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideOutFromBottom {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(50%);
  }
}
.slideFromBottom {
  animation: 0.25s ease-out 0s 1 slideInFromBottom;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

/* search input */
.p-card + .p-card {
  margin-top: 18px;
}

/* misc */
.tl-fixed {
  table-layout: fixed;
}

/* imports */
/* variables */
/* checkbox */
.p-checkbox {
  width: 22px;
  height: 22px;
}

.p-checkbox .p-checkbox-box {
  width: 22px;
  height: 22px;
  border: 1px solid var(--checkbox-border);
  box-shadow: inset 0px 0px 1px var(--gray-500);
  border-radius: 4px;
}

.p-checkbox .p-checkbox-box.p-highlight {
  border-color: var(--primary-color);
  background: var(--primary-color);
  box-shadow: none;
}

.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
  border-color: var(--primary-color);
}

/* calendar */
.p-calendar.p-invalid input {
  border-color: var(--validation-error-color);
}

/* input text */
.p-inputtext {
  border-radius: 4px;
  border: 1px solid var(--input-border);
  color: var(--text-color);
  padding: 0.5rem 0.75rem;
}
.p-inputtext.p-invalid {
  border-color: var(--validation-error-color);
}
.p-inputtext:disabled {
  background-color: var(--disabled-input-bg);
  border-color: var(--disabled-input-border);
  color: var(--disabled-input-color);
  box-shadow: none;
  opacity: 1;
}
.p-inputtext:not([disabled]) {
  box-shadow: 0px 2px 4px 0px var(--box-shadow-color);
}
.p-inputtext[readonly] {
  background-color: var(--disabled-input-bg);
  border-color: var(--disabled-input-border);
  color: var(--disabled-input-color);
  box-shadow: none;
  opacity: 1;
  padding-left: 2.25rem;
  background-image: url("../images/icon_lock.svg");
  background-position: 0.75rem center;
  background-repeat: no-repeat;
  background-size: 0.8125rem;
}

.p-input-icon-left > .p-inputtext {
  padding-left: 2rem;
}

/* input number */
.p-inputnumber.p-invalid input {
  border-color: var(--validation-error-color);
}

/* custom select */
.select-wrapper {
  position: relative;
  background: none;
}

.select-wrapper::after {
  font-family: "primeicons";
  font-size: 0.8125em;
  color: var(--text-color);
  content: "\e902";
  position: absolute;
  top: 1em;
  right: 1em;
  pointer-events: none;
}

.select-wrapper select {
  appearance: none !important; /* this hides the default dropdown arrow */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: white;
  padding-right: 2em;
}

/* input labels */
label.required:after {
  content: " (required)";
  color: var(--sublabel);
}

label.optional:after {
  content: " (optional)";
  color: var(--sublabel);
}

label.optional-color, h3.optional-color,
label.red {
  color: var(--validation-error-color) !important;
}

label.optional-color-orange, h3.optional-color-orange {
  color: var(--msg-warning);
}

label + input,
label + span,
label + select,
label + .select-wrapper {
  margin-top: 0.5rem;
}

/* dropdown */
.p-dropdown {
  border-radius: 4px;
  border: 1px solid var(--input-border);
}
.p-dropdown:not([disabled]) {
  box-shadow: 0px 2px 4px 0px var(--box-shadow-color);
}
.p-dropdown .p-dropdown-label.p-inputtext {
  box-shadow: none;
  border-radius: 4px;
  border: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-dropdown .p-dropdown-trigger svg {
  width: 0.8125em;
  color: var(--text-color);
}

.p-dropdown-panel {
  max-width: 100%;
}
@media (min-width: 900px) {
  .p-dropdown-panel {
    max-width: 50%;
  }
}
.p-dropdown-panel .p-dropdown-item {
  white-space: normal !important;
  overflow: visible !important;
}

/* multiselect */
.p-multiselect.p-invalid {
  border-color: var(--validation-error-color) !important;
}

.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
  font-weight: 600;
  background: inherit;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
  margin-right: 0.875rem;
}
.p-multiselect-panel.p-multiselect-panel-wrapped .p-multiselect-item {
  white-space: normal;
}

/* Styles for inputs/selects when their associated label has optional-color class */
label.optional-color ~ .p-inputtext,
label.optional-color ~ .select-wrapper select,
label.optional-color + .select-wrapper select,
label.optional-color ~ .p-dropdown,
label.optional-color ~ .p-multiselect,
label.optional-color + * .p-inputtext,
label.optional-color + * select.p-inputtext,
label.optional-color + .p-dropdown,
label.optional-color + * .p-multiselect,
label.optional-color + div .p-dropdown,
.label-container:has(label.optional-color) + .p-multiselect {
  background-color: var(--tag-light-red) !important; /* Light red background */
  border-color: var(--validation-error-color) !important; /* Red border */
}

label.optional-color + div .p-dropdown .p-dropdown-trigger,
label.optional-color + .p-dropdown .p-dropdown-trigger,
label.optional-color ~ .p-dropdown .p-dropdown-trigger {
  border-color: var(--validation-error-color) !important;
}

/* Special handling for select elements within select-wrapper */
.select-wrapper select.p-inputtext {
  /* This targets select elements that also have p-inputtext class */
}

.p-button {
  border: 2px solid;
  border-radius: 3px;
  padding: 10px 22px;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  background: var(--primary-color);
  border-color: var(--primary-color);
}
.p-button.p-button-grayed-out {
  background-color: var(--disabled-button-color);
  border-color: var(--disabled-button-color);
  opacity: 1 !important;
}
.p-button.edit {
  width: 2.625rem;
  height: 2.24988rem;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
}
.p-button.remove {
  width: 2.625rem;
  height: 2.24988rem;
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  background: var(--text-notification-error);
  border-color: var(--text-notification-error);
}
.p-button.p-button-text {
  background-color: transparent;
  color: var(--primary-color);
  border-color: transparent;
}
.p-button.p-button-outlined {
  background: var(--surface-a);
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.p-button.p-button-outlined.p-button-grayed-out {
  border-color: var(--disabled-button-color);
  color: var(--disabled-button-color);
}
.p-button.p-button-danger {
  background: var(--btn-error-bg);
  border-color: var(--btn-error-bg);
}
.p-button.p-button-secondary {
  background: var(--btn-alt-bg);
  border-color: var(--btn-alt-bg);
}
.p-button.no-bg {
  background: none;
  border: none;
}
.p-button.p-button-icon-only.delete-btn {
  background: var(--btn-error-bg);
  border-color: var(--btn-error-bg);
}
.p-button.p-button-icon-only.delete-btn .delete-icon {
  content: url("../images/icon_delete.svg");
  width: 1rem;
  display: inline-block;
  cursor: pointer;
}
.p-button.p-button-icon-only.delete-btn.transparent {
  background: none;
  border-color: transparent;
}
.p-button.p-button-icon-only.delete-btn.transparent .delete-icon {
  content: url("../images/icon_delete_red.svg");
}
.p-button .edit-icon {
  content: url("../images/icon_edit_green.svg");
}
.p-button.reorder-btn {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.p-button.reorder-btn .reorder-icon {
  content: url("../images/icon_updown_chevron.svg");
}
.p-button:focus {
  box-shadow: none;
}
.p-button.small {
  padding: 4px 10px;
  font-size: 12px;
}

.p-button + .p-button {
  margin-left: 12px;
}

.btn-chevron-updown::before {
  content: "";
  display: inline-block;
  width: 3rem;
  height: 2.5625rem;
  margin-left: 0.25rem;
  background: url("../images/btn_updown_chevron.svg");
  background-size: contain;
}

.btn-chevron-updown {
  align-items: center;
  position: absolute;
}

.breadcrumb {
  font-size: 1.125rem;
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}
.breadcrumb li {
  display: inline-block;
  color: var(--text-color);
  font-weight: 400;
}
.breadcrumb li.home a {
  cursor: pointer;
}
.breadcrumb li:after {
  content: "\e901";
  font-family: "primeicons";
  font-size: 0.75rem;
  margin: 0 0.875rem;
  font-weight: 700;
}
.breadcrumb li:last-child:after {
  content: "";
}
.breadcrumb li:last-child {
  font-weight: 800;
}
.breadcrumb li a {
  text-decoration: none;
  color: var(--text-color);
}
.breadcrumb li a:hover {
  opacity: 0.8;
}

.ex-table {
  border-radius: var(--border-radius);
}
.ex-table .p-datatable-wrapper {
  overflow: hidden;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-all);
}
.ex-table.p-datatable {
  /* separation between expanded row's content and another row */
}
.ex-table.p-datatable .p-datatable-table {
  table-layout: fixed;
}
.ex-table.p-datatable .p-datatable-thead > tr > th {
  background-color: var(--surface-300);
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ex-table.p-datatable .p-datatable-thead > tr > th:not(:last-child) {
  border-right: 2px solid var(--surface-350);
}
.ex-table.p-datatable .p-datatable-thead > tr > th.p-datatable-col-select {
  width: 3.5rem;
  text-overflow: unset;
}
.ex-table.p-datatable .p-datatable-thead > tr > th.p-datatable-col-select.no-select-all .p-checkbox {
  display: none;
}
.ex-table.p-datatable .p-datatable-thead > tr > th.p-datatable-col-expander {
  width: 4rem;
  text-overflow: unset;
}
.ex-table.p-datatable .p-datatable-thead > tr > th .p-column-header-content {
  gap: 0.25rem;
}
.ex-table.p-datatable .p-datatable-thead > tr > th .p-column-header-content .p-column-title:not(.wrap) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ex-table.p-datatable .p-datatable-thead > tr > th .p-column-header-content .p-column-title.wrap {
  white-space: normal;
}
.ex-table.p-datatable .p-datatable-thead > tr > th.header-center .p-column-header-content {
  display: flex;
  justify-content: center !important;
}
.ex-table.p-datatable .p-datatable-tbody > tr > td {
  color: var(--table-cell-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ex-table.p-datatable .p-datatable-tbody > tr > td:not(:last-child) {
  border-right: 2px solid var(--surface-300);
}
.ex-table.p-datatable .p-datatable-tbody > tr > td.p-selection-column {
  text-overflow: unset;
}
.ex-table.p-datatable .p-datatable-tbody > tr.grayed-out > td *:not(.not-grayed-out):not(.not-grayed-out *) {
  opacity: 0.35;
}
.ex-table.p-datatable .p-datatable-tbody > tr {
  background: var(--table-row-background);
}
.ex-table.p-datatable .p-datatable-tbody > tr:not(:last-child) > td {
  border-bottom: 2px solid var(--surface-300);
}
.ex-table.p-datatable .p-datatable-tbody > tr.p-highlight {
  background-color: var(--surface-a);
}
.ex-table.p-datatable.first-bold > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tbody > tr > td:first-child {
  font-weight: 700;
}
.ex-table.p-datatable.sec-bold > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tbody > tr > td:nth-child(2) {
  font-weight: 700;
}
.ex-table.p-datatable .p-datatable-tbody > tr > td:first-child,
.ex-table.p-datatable .p-datatable-thead > tr > th:first-child {
  padding-left: 1.25rem;
}
.ex-table.p-datatable .p-datatable-tbody > tr > td:first-child.p-datatable-col-select,
.ex-table.p-datatable .p-datatable-thead > tr > th:first-child.p-datatable-col-select {
  padding-left: 1rem;
  padding-right: 1rem;
}
.ex-table.p-datatable .p-row-toggler .p-icon {
  display: none;
}
.ex-table.p-datatable .p-row-toggler:after {
  font-family: "primeicons";
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-color);
  content: "\e902";
  transition: transform 0.5s;
}
.ex-table.p-datatable .p-row-toggler[aria-expanded=true]:after {
  transform: rotateX(180deg);
}
.ex-table.p-datatable .p-datatable-footer {
  border-top: 2px solid var(--table-border);
  display: flex;
  justify-content: center;
  padding: 0.4rem;
}
.ex-table.p-datatable .p-datatable-footer .p-button.p-button-text {
  color: var(--table-cell-text);
}
.ex-table.p-datatable .p-datatable-footer .p-button-more {
  font-weight: 800;
  text-transform: none;
  font-size: 1rem;
  padding: 0.2rem;
}
.ex-table.p-datatable .p-datatable-footer .p-button-more:before {
  content: "More";
}
.ex-table.p-datatable .p-datatable-footer .p-button-more:after {
  font-family: "primeicons";
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-color);
  transition: transform 0.5s;
  content: "\e902";
  padding-left: 0.5rem;
}
.ex-table.p-datatable .p-datatable-footer .p-button-more[aria-showing-more=true]:before {
  content: "Less";
}
.ex-table.p-datatable .p-datatable-footer .p-button-more[aria-showing-more=true]:after {
  transform: rotateX(180deg);
}
.ex-table.p-datatable .p-sortable-column.p-highlight {
  color: unset;
}
.ex-table.p-datatable .p-sortable-column span[data-pc-section=sort] svg {
  display: none;
}
.ex-table.p-datatable .p-sortable-column[aria-sort=none] span[data-pc-section=sort]:before {
  font-family: "primeicons";
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-color);
  transition: transform 0.5s;
  content: "\e903";
  padding-left: 0.5rem;
  display: inline-block;
  visibility: hidden;
}
.ex-table.p-datatable .p-sortable-column[aria-sort=ascending] span[data-pc-section=sort]:before {
  font-family: "primeicons";
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-color);
  transition: transform 0.5s;
  content: "\e903";
  padding-left: 0.5rem;
  display: inline-block;
}
.ex-table.p-datatable .p-sortable-column[aria-sort=descending] span[data-pc-section=sort]:before {
  font-family: "primeicons";
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-color);
  transition: transform 0.5s;
  content: "\e903";
  padding-left: 0.5rem;
  display: inline-block;
  transform: rotateX(180deg);
}
.ex-table.p-datatable tr.p-datatable-row-expansion > td {
  border-bottom: 2px solid var(--panel-border);
}
.ex-table.p-datatable-striped .p-datatable-tbody > tr:not(.p-datatable-row-expansion):nth-child(2n) {
  background: var(--table-row-background-alt);
}

.p-progress-spinner {
  position: relative;
  margin: 0 auto;
  width: 64px;
  height: 64px;
  display: inline-block;
}
.p-progress-spinner.center {
  display: flex;
}

.p-progress-spinner-circle {
  stroke: var(--primary-color);
  animation: p-progress-spinner-dash 1.5s ease-in-out infinite;
}

.p-paginator {
  background: none;
  margin-top: 0.8rem;
  padding-left: 0;
  padding-right: 0;
  font-size: 0.875rem;
  color: var(--text-color);
  justify-content: left;
}
.p-paginator .p-paginator-left-content {
  margin-right: unset;
}
.p-paginator .p-paginator-current {
  font-size: 0.875rem;
  color: var(--text-color);
  padding-left: 0;
}
.p-paginator .p-paginator-page-input {
  height: 1.5rem;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}
.p-paginator .p-paginator-page-input .p-inputtext {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-color);
  background: #ffffff;
  padding: 0.5rem 0.5rem;
  max-width: 3rem;
  text-align: center;
}
.p-paginator .p-paginator-page-input:before {
  content: "Page ";
  font-size: 0.875rem;
  color: var(--text-color);
  padding-right: 0.625rem;
  display: flex;
  align-items: center;
}
.p-paginator .p-dropdown {
  height: 1.5rem;
  border-color: var(--inputBorder);
  margin-right: 1.5rem;
}
.p-paginator .p-dropdown .p-dropdown-trigger {
  width: 2rem;
  justify-content: right;
  padding-right: 0.5rem;
  color: var(--text-color);
}
.p-paginator .p-dropdown .p-dropdown-trigger-icon {
  width: 0.7rem;
}
.p-paginator .p-dropdown .p-dropdown-label {
  padding: 0.075rem 0.5rem 0rem 0.3rem;
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  box-shadow: none !important;
}
.p-paginator .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
  font-size: 0.875rem;
}
.p-paginator .p-dropdown .p-paginator-pages .p-paginator-page {
  min-width: 1.1rem;
  height: 1.2rem;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  font-size: 0.875rem;
}
.p-paginator .p-dropdown .p-paginator-pages .p-paginator-page.p-highlight {
  background: var(--highlight-bg-alt);
  border-color: var(--highlight-bg-alt);
  font-weight: 700;
}
.p-paginator .p-paginator-first,
.p-paginator .p-paginator-prev,
.p-paginator .p-paginator-next,
.p-paginator .p-paginator-last {
  color: var(--text-color);
  min-width: 1.5rem;
}

.p-tabview .p-tabview-nav {
  border: none;
  background: none;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
}
.p-tabview .p-tabview-nav li .p-tabview-nav-link {
  border: none;
  background: none;
  padding: 0;
  transition: box-shadow 0.2s;
}
.p-tabview .p-tabview-nav li .p-tabview-nav-link .tab-pill {
  border: none;
  background: var(--tab-pill-bg);
  margin: 0 5px;
  color: var(--text-color);
  padding: 0.8rem 1.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  display: block;
  transition: background-color 0.3s linear;
  white-space: nowrap;
}
.p-tabview .p-tabview-nav .p-tabview-header .p-tabview-nav-link .tab-pill.error {
  color: var(--text-color);
}
.p-tabview .p-tabview-nav li.p-disabled .p-tabview-nav-link {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}
.p-tabview .p-tabview-nav .p-tabview-header .p-tabview-nav-link .tab-pill.error::after {
  content: url("../images/icon_error.svg");
  width: 1rem;
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.p-tabview .p-tabview-nav .p-tabview-header .p-tabview-nav-link .tab-pill.warning {
  color: var(--text-color);
}
.p-tabview .p-tabview-nav .p-tabview-header .p-tabview-nav-link .tab-pill.warning::after {
  content: url("../images/icon_error_orange_tab.svg");
  width: 1rem;
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.p-tabview .p-tabview-nav .p-tabview-header.p-highlight .p-tabview-nav-link .tab-pill {
  background-color: var(--blue-700);
  color: var(--surface-a);
}
.p-tabview .filter-pill {
  background: var(--tab-pill-bg);
  color: var(--text-color);
  border-color: transparent;
  border-radius: 2rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.p-tabview .filter-pill:hover {
  opacity: 0.8;
}
.p-tabview .filter-pill.selected {
  background-color: var(--blue-700);
  color: var(--surface-a);
}
.p-tabview.no-bg .p-tabview-panels {
  background: none;
  padding: 0;
  color: var(--text-color);
}

.p-panel {
  background-color: var(--surface-a);
  border-radius: 3px;
  box-shadow: 0px 2px 8px 0px var(--panel-shadow);
  border: 1px solid var(--panel-border);
}
.p-panel.no-header > .p-panel-header {
  display: none;
}
.p-panel.header-bg > .p-panel-header {
  background-color: var(--surface-300);
}
.p-panel.no-border {
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.p-panel.no-border .p-panel-footer {
  border: none;
}
.p-panel.no-bg {
  background: none;
}
.p-panel.alt-bg {
  background-color: var(--background-default);
}
.p-panel.error-bg {
  background-color: var(--msg-error-bg);
}
.p-panel.no-padding > .p-panel-header {
  padding-left: 0;
  padding-right: 0;
}
.p-panel .p-panel-title {
  font-size: 1.125rem;
  font-weight: 700;
}
.p-panel .p-panel-gray {
  background: var(--gray-panel);
}
.p-panel .p-panel-gray .p-panel-footer {
  background: var(--gray-panel);
}
.p-panel .p-panel-header {
  font-size: 1.125rem;
  color: var(--text-color);
  background: none;
  border: none;
}
.p-panel .p-panel-header h3.section-header {
  margin-bottom: 0.5rem;
}
.p-panel .p-panel-header .p-panel-icons .p-panel-header-icon.p-panel-close {
  width: auto;
  color: var(--close-color);
  font-weight: 700;
}
.p-panel .p-panel-header .p-panel-icons .p-panel-header-icon.p-panel-close:after {
  content: "Close";
  font-size: 1.125rem;
  font-weight: 600;
  padding-left: 0.5rem;
  width: auto;
}
.p-panel .p-panel-header .p-panel-icons .p-panel-header-icon.p-panel-close:enabled:hover {
  color: var(--close-color);
  border: none;
  background: inherit;
}
.p-panel .p-panel-header .p-panel-icons .p-panel-header-icon.p-panel-close .pi {
  font-size: 0.875rem;
}
.p-panel .p-panel-header .p-panel-icons .p-panel-header-icon.p-panel-close .pi.pi-times {
  font-weight: 800;
}
.p-panel .p-panel-toggler .p-icon {
  display: none;
}
.p-panel .p-panel-toggler[aria-expanded=true]::before {
  font-family: "primeicons";
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-color);
  transition: transform 0.5s;
  content: "\e903";
  display: inline-flex;
}
.p-panel .p-panel-toggler[aria-expanded=false]::before {
  font-family: "primeicons";
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-color);
  transition: transform 0.5s;
  content: "\e903";
  display: inline-flex;
  transform: rotateX(180deg);
}
.p-panel .p-panel-content {
  color: var(--text-color);
  border: none;
  background: none;
  padding-top: 0.5rem;
}
.p-panel.no-header .p-panel-content {
  padding-top: 1rem;
}
.p-panel.no-padding-content .p-panel-content {
  padding: 0;
}
.p-panel.no-padding-content-x .p-panel-content {
  padding-left: 0;
  padding-right: 0;
}
.p-panel.no-padding-content-y .p-panel-content {
  padding-top: 0;
  padding-bottom: 0;
}
.p-panel.no-padding > .p-toggleable-content > .p-panel-content:first-of-type {
  padding-left: 0;
  padding-right: 0;
  padding-top: 1rem;
}
.p-panel.backgroud-color {
  background: var(--background-default);
}

.uploader {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
.uploader.error-bg {
  background-color: var(--msg-error-bg);
}
.uploader .file-drop-area {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 100%;
  background-color: var(--drop-area-bg);
  border: 2px dashed var(--primary-color);
  justify-content: center;
  transition: 0.3s;
  padding: 2rem 1rem;
}
.uploader .file-drop-area.active {
  background-color: var(--drop-area-active-bg);
}
.uploader .file-drop-area.active * {
  opacity: 0.7;
}
.uploader .file-drop-area .file-btn {
  flex-shrink: 0;
  margin-right: 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  z-index: 101;
  text-transform: none;
  font-family: "Nunito Sans";
}
.uploader .file-drop-area .file-msg {
  display: flex;
  align-items: center;
  line-height: 1.5rem;
}
.uploader .file-drop-area .file-msg .file-msg-text {
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uploader .file-drop-area .file-msg .file-info {
  font-weight: 400;
  padding-left: 0.625rem;
  border-left: 2px solid var(--divider-color);
  margin-left: 0.625rem;
  line-height: 1.25rem;
}
.uploader .file-drop-area .file-msg .file-icon {
  width: 1rem;
  margin-right: 0.5rem;
  display: inline-block;
  margin-right: 0.5rem;
}
.uploader .file-drop-area .file-delete-btn {
  padding: 0.375rem 0.5rem;
  margin-left: 1rem;
  z-index: 101;
  cursor: pointer;
  margin-left: auto;
}
.uploader .file-drop-area .file-download-btn {
  cursor: pointer;
  margin-right: 1rem;
  z-index: 101;
  text-decoration: none;
  padding: 0.375rem 1rem;
}
.uploader .file-drop-area .file-input {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: 100;
}
.uploader .file-drop-area .file-input:focus {
  outline: none;
}
.uploader.uploaded .file-drop-area {
  background-color: var(--background-default);
  border: none;
  justify-content: left;
  padding: 1rem 1.75rem 1rem 1.75rem;
  border-radius: 8px;
}
.uploader.uploaded.no-padding .file-drop-area {
  padding: 0;
}
.uploader.uploaded.error-bg .file-drop-area {
  background-color: var(--msg-error-bg);
}
.uploader .p-progress-spinner {
  margin-top: 1rem;
  margin-left: 1rem;
  width: 32px;
  height: 32px;
}

.p-badge {
  border: 2px solid var(--tag-green);
  background: var(--tag-light-green);
  color: var(--tag-green);
  font-weight: 800;
  font-size: 0.875rem;
  min-width: 1.25rem;
  height: 1.25rem;
  line-height: 1.1rem;
}
.p-badge.p-badge-lg {
  font-size: 1.125rem;
  min-width: 1.875rem;
  height: 1.875rem;
  line-height: 1.75rem;
}
.p-badge.p-badge-xl {
  font-size: 1.5rem;
  min-width: 3rem;
  height: 3rem;
  line-height: 2.875rem;
}
.p-badge.p-badge-wide {
  min-width: 2rem;
  border-radius: 16px;
}
.p-badge.p-badge-lg.p-badge-wide {
  font-size: 1.125rem;
  min-width: 2.875rem;
  height: 1.875rem;
  line-height: 1.75rem;
}
.p-badge.p-badge-xl.p-badge-wide {
  min-width: 4.625rem;
  border-radius: 1.5rem;
}
.p-badge.p-badge-blue {
  border: 2px solid var(--tag-blue);
  background: var(--tag-light-blue);
  color: var(--tag-blue);
}
.p-badge.p-badge-orange {
  border: 2px solid var(--tag-orange);
  background: var(--tag-light-orange);
  color: var(--tag-orange);
}
.p-badge.p-badge-red {
  border: 2px solid var(--tag-red);
  background: var(--tag-light-red);
  color: var(--tag-red);
}
.p-badge.p-badge-gray {
  border: 2px solid var(--tag-gray);
  background: var(--tag-light-gray);
  color: var(--tag-gray);
}

.p-tag {
  border: 2px solid var(--tag-green);
  background: var(--tag-light-green);
  color: var(--tag-green);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.125rem;
  letter-spacing: 0;
  text-align: left;
  padding: 0.375rem 0.875rem 0.375rem 0.875rem;
  border-radius: 4px;
}
.p-tag.p-tag-blue {
  border: 2px solid var(--tag-blue);
  background: var(--tag-light-blue);
  color: var(--tag-blue);
}
.p-tag.p-tag-orange {
  border: 2px solid var(--tag-orange);
  background: var(--tag-light-orange);
  color: var(--tag-orange);
}
.p-tag.p-tag-red {
  border: 2px solid var(--tag-red);
  background: var(--tag-light-red);
  color: var(--tag-red);
}
.p-tag.p-tag-gray {
  border: 2px solid var(--tag-gray);
  background: var(--tag-light-gray);
  color: var(--tag-gray);
}
.p-tag.p-tag-icon-check-green, .p-tag.p-tag-icon-time-blue, .p-tag.p-tag-icon-error-orang, .p-tag.p-tag-icon-close-red, .p-tag.p-tag-icon-error, .p-tag.p-tag-icon-hourglass-blue, .p-tag.p-tag-icon-hourglass-orange {
  line-height: 0;
}
.p-tag.p-tag-icon-check-green::before {
  content: url(../images/icon_check_green.svg);
}
.p-tag.p-tag-icon-time-blue::before {
  content: url(../images/icon_time_blue.svg);
}
.p-tag.p-tag-icon-error-orang::before {
  content: url(../images/icon_error_orange.svg);
}
.p-tag.p-tag-icon-close-red::before {
  content: url(../images/icon_close_red.svg);
}
.p-tag.p-tag-icon-error::before {
  content: url(../images/icon_error.svg);
}
.p-tag.p-tag-icon-hourglass-blue::before {
  content: url(../images/icon_hourglass_blue.svg);
}
.p-tag.p-tag-icon-hourglass-orange::before {
  content: url(../images/icon_hourglass_orange.svg);
}

.p-message {
  border: none !important;
  border-radius: 8px;
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--text-color);
  white-space: normal;
}
.p-message .p-message-wrapper, .p-message .p-message-custom-wrapper {
  padding: 1.375rem 1.75rem 1.375rem 1.75rem;
}
.p-message .p-message-icon {
  display: none;
}
.p-message .p-message-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.625rem;
  font-weight: 700;
  font-size: 1.125rem;
}
.p-message .p-message-header.neutral-color {
  color: var(--text-color) !important;
}
.p-message .p-message-content {
  font-size: 1.125rem;
  font-weight: 400;
}
.p-message .p-message-header::before {
  width: 20px;
  height: 20px;
  display: flex;
  margin-right: 0.625rem;
}
.p-message.p-message-info .p-message-header::before {
  content: url(../images/icon_info_gray.svg);
}
.p-message.p-message-info {
  background-color: #cecfd2;
}
.p-message.client-hide-fields-warning {
  background-color: #f7f7f7;
}
.p-message.p-message-info .p-message-header, .p-message.p-message-info .p-message-content {
  color: #000000;
}
.p-message.p-message-error {
  background-color: var(--msg-error-bg);
}
.p-message.p-message-error .p-message-header, .p-message.p-message-error .p-message-content {
  color: var(--msg-error);
}
.p-message.p-message-error .p-message-header::before {
  content: url(../images/icon_error.svg);
}
.p-message.p-message-warning {
  background-color: var(--msg-warning-bg);
}
.p-message.p-message-warning .p-message-header, .p-message.p-message-warning .p-message-content {
  color: var(--msg-warning);
}
.p-message.p-message-warning .p-message-header::before {
  content: url(../images/icon_error_orange.svg);
}
.p-message.p-message-success {
  background-color: var(--msg-success-bg);
}
.p-message.p-message-success .p-message-header, .p-message.p-message-success .p-message-content {
  color: var(--msg-success);
}
.p-message.p-message-success .p-message-header::before {
  content: url(../images/icon_check_green.svg);
}

.p-message-border-green {
  border: 2px solid var(--msg-success) !important;
}

.p-message-border-red {
  border: 2px solid var(--msg-warning) !important;
}

/* Input field */
.p-user-multiselect.p-multiselect {
  border-color: var(--input-border);
}
.p-user-multiselect.p-multiselect .p-multiselect-label.p-placeholder {
  color: var(--table-cell-text);
}

/* Dropdown Overlay */
.p-user-multiselect-panel.p-multiselect-panel {
  margin-top: 0.5rem;
  border-radius: 0.5rem;
}
.p-user-multiselect-panel.p-multiselect-panel .p-multiselect-items-wrapper {
  padding: 0.625rem 0.75rem;
}
.p-user-multiselect-panel.p-multiselect-panel .p-multiselect-items,
.p-user-multiselect-panel.p-multiselect-panel .p-multiselect-item-group {
  padding: 0;
}
.p-user-multiselect-panel.p-multiselect-panel .p-multiselect-item {
  padding: 0.625rem 1rem;
  background: none;
}
.p-user-multiselect-panel.p-multiselect-panel .p-multiselect-item .avatar-wrapper {
  margin-right: 0.625rem;
}
.p-user-multiselect-panel.p-multiselect-panel .p-multiselect-item .avatar {
  border: 2px solid var(--border-black-700);
  width: 2.625rem;
  height: 2.625rem;
}
.p-user-multiselect-panel.p-multiselect-panel .p-multiselect-item .p-checkbox {
  order: 2;
  margin: 0;
}
.p-user-multiselect-panel.p-multiselect-panel .p-multiselect-item i {
  font-size: 2.625rem;
  color: var(--surface-700);
}
.p-user-multiselect-panel.p-multiselect-panel .p-multiselect-item:hover {
  background: inherit;
}
.p-user-multiselect-panel.p-multiselect-panel .p-multiselect-item.p-highlight {
  font-weight: 600;
}
.p-user-multiselect-panel.p-multiselect-panel .p-multiselect-item.p-highlight.p-disabled {
  font-weight: normal;
}
.p-user-multiselect-panel.p-multiselect-panel .p-multiselect-item.p-highlight.p-disabled .p-checkbox-box.p-highlight {
  background-color: var(--surface-500);
}
.p-user-multiselect-panel.p-multiselect-panel .p-divider.p-divider-horizontal {
  margin: 0.625rem 0;
}

.p-dialog.p-dialog-s {
  width: 20rem;
}
.p-dialog.p-dialog-m {
  width: 40rem;
}
.p-dialog.p-dialog-l {
  width: 55rem;
}
.p-dialog.p-dialog-xl {
  width: 75rem;
}
.p-dialog .p-dialog-header {
  color: var(--text-color);
}
.p-dialog .p-dialog-header .p-dialog-title {
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--text-color);
}
.p-dialog .p-dialog-footer {
  color: var(--text-color);
}
.p-dialog .p-dialog-content {
  color: var(--text-color);
}

.p-confirm-dialog {
  max-width: 32rem;
}
.p-confirm-dialog .p-confirm-buttons .p-button {
  min-width: 12rem;
  text-transform: none;
  font-size: 1rem;
}

.p-tooltip.p-tooltip-md {
  min-width: 16rem;
}
.p-tooltip.p-tooltip-lg {
  min-width: 18rem;
}
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
  border-right-color: var(--tooltip-bg);
}
.p-tooltip.p-tooltip.p-tooltip-left .p-tooltip-arrow {
  border-left-color: var(--tooltip-bg);
}
.p-tooltip.p-tooltip.p-tooltip-top .p-tooltip-arrow {
  border-top-color: var(--tooltip-bg);
}
.p-tooltip.p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
  border-bottom-color: var(--tooltip-bg);
}
.p-tooltip .p-tooltip-text {
  font-size: 0.875rem;
  font-weight: 400;
  font-family: "Nunito Sans";
  background-color: var(--tooltip-bg);
}
.p-tooltip .p-tooltip-text:not(.no-trim) {
  max-height: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
  -webkit-line-clamp: 10;
}

.tooltip-icon.blue {
  color: var(--tag-blue);
}

.p-overlaypanel {
  color: var(--text-color);
}
.p-overlaypanel:after {
  visibility: hidden;
}
.p-overlaypanel:before {
  visibility: hidden;
}

/* variables */
.p-toast {
  top: 0rem !important;
  left: unset !important;
  width: calc(100% - 17rem);
  box-sizing: border-box;
  margin-left: 17rem;
  opacity: 1;
  font-weight: 700;
  line-height: 1.125;
  /* Remove left margin on mobile/responsive layout */
}
@media (max-width: 992px) {
  .p-toast {
    width: 100%;
    margin-left: 0;
  }
}
.p-toast .p-toast-message {
  border-radius: 0;
  box-shadow: none;
}
.p-toast .p-toast-message.p-toast-message-success {
  background: var(--msg-success-bg);
  border: 1px solid var(--msg-success);
  color: var(--msg-success);
}
.p-toast .p-toast-message.p-toast-message-info {
  background: var(--msg-info-bg);
  border: 1px solid var(--msg-info);
  color: var(--msg-info);
}
.p-toast .p-toast-message.p-toast-message-error {
  background: var(--msg-error-bg);
  border: 1px solid var(--msg-error);
  color: var(--msg-error);
}
.p-toast .p-toast-message.p-toast-message-warn {
  background: var(--msg-warning-bg);
  border: 1px solid var(--msg-warning);
  color: var(--msg-warning);
}
.p-toast .p-toast-message .p-toast-message-content {
  padding: 0.625rem 0.8rem;
  align-items: center;
}
.p-toast .p-toast-message .p-toast-message-content .p-toast-icon {
  width: 1.25rem;
  height: auto;
}
.p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
  margin: 0 0 0 0.5rem;
}
.p-toast .p-toast-message .p-toast-message-content .p-toast-detail {
  margin: 0;
}
.p-toast .p-toast-message .p-toast-icon-close {
  width: 1.25rem;
  height: 1.25rem;
}

.nav-link:not(.router-link-active) .p-ink {
  background: var(--surface-700);
}

.nav-link {
  background-color: var(--surface-100);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.nav-link:hover {
  cursor: pointer;
}
.nav-link .icon {
  color: var(--primary-color);
}
.nav-link.router-link-active:not(.sub-side-bar-active), .nav-link.action-button-active {
  background-color: var(--primary-color);
}
.nav-link.router-link-active:not(.sub-side-bar-active):hover, .nav-link.action-button-active:hover {
  background-color: var(--primary-color-darker);
}
.nav-link.router-link-active:not(.sub-side-bar-active) .icon, .nav-link.action-button-active .icon {
  color: var(--primary-color-text);
}
.nav-link.router-link-active:not(.sub-side-bar-active) span, .nav-link.action-button-active span {
  color: var(--primary-color-text);
}

.search-bar-wrapper i {
  height: 1rem;
  width: 1rem;
  top: 50%;
  margin-top: -0.5rem;
}
.search-bar-wrapper i:first-of-type {
  margin-left: 0.25rem;
}
.search-bar-wrapper .search-icon:before {
  content: url(../images/icon_search.svg);
}
.search-bar-wrapper i:last-of-type.clear-search {
  top: unset;
  bottom: unset;
  margin: 0 0.25rem 0 0;
}
.search-bar-wrapper .p-button.p-button-icon-only {
  padding: 0;
  border: 0;
  width: 1rem;
}

.resource-search-bar {
  background-color: var(--surface-a);
  border: 1px solid var(--surface-400);
  max-width: 500px;
  position: relative;
  width: 100%;
}
.resource-search-bar .p-inputgroup-addon {
  background-color: var(--surface-a);
  border: none;
}
.resource-search-bar .p-inputgroup-addon .search-icon img {
  width: 17px;
}
.resource-search-bar .p-inputtext {
  box-shadow: none;
  border: none;
  padding-left: 0;
}
.resource-search-bar .category-btn {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 400;
  padding: 0.5rem;
}
.resource-search-bar .category-btn .category-text {
  padding-left: 0.25rem;
}
.resource-search-bar .category-btn .category-text:after {
  font-family: "primeicons";
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-color);
  transition: transform 0.3s;
  content: "\e903";
  display: inline-flex;
  padding: 0 0.25rem;
}
.resource-search-bar .category-btn.opened .category-text:after {
  transform: rotate(180deg);
}

.rs-search-bar-categories .rs-categories-title {
  font-size: 1rem;
  line-height: 1.25rem;
}
.rs-search-bar-categories .rs-category-item {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  position: relative;
}
.rs-search-bar-categories .rs-category-item .p-checkbox.p-checkbox-checked + label {
  font-weight: 600;
}

.p-inputswitch {
  width: 2.5rem;
  height: 1.5rem;
}
.p-inputswitch .p-inputswitch-slider::before {
  width: 1rem;
  height: 1rem;
  left: 0.25rem;
  margin-top: -0.5rem;
}
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
  background: var(--primary-color);
}
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
  transform: translateX(0.875rem);
}
.p-inputswitch.p-focus .p-inputswitch-slider {
  box-shadow: none;
}

.p-inputswitch-container {
  display: flex;
  align-items: center;
}
.p-inputswitch-container .input-switch-label {
  margin-left: 1.5rem;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.chart-container.large {
  height: 10rem !important;
}
.chart-container.small {
  height: 4rem !important;
}
.chart-container canvas {
  height: 100% !important;
}

.range-chart-container {
  position: relative;
  width: 100%;
}
.range-chart-container.large {
  height: 90px !important;
}
.range-chart-container.small {
  height: 26px !important;
}
.range-chart-container canvas {
  height: 100% !important;
}

.heatmap-chart-container {
  position: relative;
  width: 100%;
}
.heatmap-chart-container.large {
  height: 50px !important;
}
.heatmap-chart-container.small {
  height: 32px !important;
}
.heatmap-chart-container canvas {
  height: 100% !important;
}

.chart-legend ul {
  list-style: none;
  padding-left: 0;
}
.chart-legend ul li {
  position: relative;
  padding-left: 20px;
}
.chart-legend ul li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: black;
}
.chart-legend ul li.green {
  color: #80C342;
}
.chart-legend ul li.green::before {
  background-color: #80C342;
}
.chart-legend ul li.orange {
  color: #F8A962;
}
.chart-legend ul li.orange::before {
  background-color: #F8A962;
}
.chart-legend ul li.red {
  color: #E36F5F;
}
.chart-legend ul li.red::before {
  background-color: #E36F5F;
}
.chart-legend ul li .default-color {
  color: var(--text-color);
}

.form-accordion .p-accordion .p-accordion-tab {
  margin-bottom: 1rem;
}
.form-accordion .p-accordion .p-accordion-tab .p-accordion-header .p-accordion-header-action {
  justify-content: space-between;
  border: 1px solid var(--surface-350);
  background-color: var(--surface-300);
}
.form-accordion .p-accordion .p-accordion-tab .p-accordion-header .p-accordion-header-text {
  order: 1;
  font-size: 1.25rem;
  padding: 0.5rem 0.5rem;
  display: flex;
}
.form-accordion .p-accordion .p-accordion-tab .p-accordion-header .p-accordion-toggle-icon {
  order: 2;
}
.form-accordion .p-accordion .p-accordion-tab.completed .p-accordion-header .p-accordion-header-action {
  background-color: var(--msg-success-bg);
}
.form-accordion .p-accordion .p-accordion-tab.completed .p-accordion-header .p-accordion-header-text::before {
  width: 20px;
  height: 20px;
  display: flex;
  margin-right: 0.75rem;
  content: url(../images/icon_check_green.svg);
}

.clients-accounts .p-dropdown-label {
  white-space: normal;
}
.clients-accounts .p-message {
  white-space: normal;
}
.clients-accounts .p-calendar {
  display: block;
}
.clients-accounts .p-calendar .p-inputtext {
  width: 100%;
}
.clients-accounts .confirmation-text {
  font-size: 1rem;
}
.clients-accounts .search-result-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
}
.clients-accounts .p-multiselect {
  border-color: black;
}
.clients-accounts .p-multiselect-label {
  color: black;
}
.clients-accounts .client-group-grid-panel .p-column-header-content .p-checkbox {
  display: none;
}
.clients-accounts .client-group-grid-panel a {
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.clients-accounts .client-group-grid-panel a:hover {
  color: var(--sublabel);
}
.clients-accounts .account-grid-panel .p-column-header-content .p-checkbox {
  display: inherit;
}
@media (max-width: 992px) {
  .clients-accounts .hide-on-mobile {
    display: none !important;
  }
}

.memo-record-overwiev .memo-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.memo-record-overwiev .p-button-outlined:disabled {
  color: var(--disabled-outlined-button-color);
  border: 2px solid var(--disabled-outlined-button-color);
}
.memo-record-overwiev .memo-summary {
  display: flex;
  align-items: center;
  gap: 18px;
}
.memo-record-overwiev .memo-summary .p-button:disabled {
  background-color: var(--disabled-button-color);
  border-color: var(--disabled-button-color);
}
.memo-record-overwiev .p-panel-content {
  padding-top: 0;
}
.memo-record-overwiev .p-message {
  margin: 0;
}
.memo-record-overwiev .header-centered {
  display: flex;
  align-items: center;
}
.memo-record-overwiev .header-centered .p-message-header {
  margin-bottom: 0;
}

.profile-page .tooltip-icon,
.profile-page .bcp-badge {
  font-size: 0.75rem;
}
.profile-page .tooltip-icon.blue {
  color: var(--tag-blue);
}
.profile-page .p-datatable .p-datatable-header {
  background: none;
  padding: 0;
  font-weight: 400;
  border: none;
  margin-bottom: 2rem;
}
.profile-page .p-paginator-bottom {
  padding-left: 1rem;
}
.profile-page .p-divider {
  margin: 2rem 0;
}
.profile-page .p-divider.p-divider-horizontal:before {
  border-top-width: 0.125rem;
}
.profile-page .avatar-picture-component-container {
  position: relative;
}
.profile-page .avatar-picture-component-container .avatar-tooltip {
  position: absolute;
  left: 5.625rem;
}

.client-group-details .tax-ids .p-paginator-bottom {
  padding-left: 1rem;
}

.compliance-alerts .alerts-table.p-datatable .p-datatable-wrapper {
  box-shadow: none;
  background: transparent;
  border: none;
}
.compliance-alerts .alerts-table.p-datatable .p-datatable-table {
  border-collapse: separate !important;
  border-spacing: 0 6px;
  background: transparent;
}
.compliance-alerts .alerts-table.p-datatable .p-datatable-tbody > tr:not(.p-datatable-row-expansion) {
  background: var(--surface-a);
}
.compliance-alerts .alerts-table.p-datatable .p-datatable-tbody > tr:not(.p-datatable-row-expansion) > td {
  border-top: 1px solid var(--table-border);
  border-bottom: 1px solid var(--table-border);
  background: transparent;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.compliance-alerts .alerts-table.p-datatable .p-datatable-tbody > tr:not(.p-datatable-row-expansion) > td:first-child {
  border-left: 1px solid var(--table-border);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.compliance-alerts .alerts-table.p-datatable .p-datatable-tbody > tr:not(.p-datatable-row-expansion) > td:last-child {
  border-right: 1px solid var(--table-border);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.compliance-alerts .alerts-table.p-datatable .p-datatable-tbody > tr > td + td {
  border-left: none;
}
.compliance-alerts .alerts-table.p-datatable .p-datatable-tbody > tr:not(.p-datatable-row-expansion):hover {
  background: var(--surface-b);
}
.compliance-alerts .alerts-table.p-datatable tr.p-datatable-row-expansion > td {
  padding: 0;
  background: var(--surface-a);
  border: 1px solid var(--table-border);
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.compliance-alerts .alerts-table.p-datatable tr.p-datatable-row-expansion + tr > td:first-child,
.compliance-alerts .alerts-table.p-datatable tr[aria-expanded=true] + tr.p-datatable-row-expansion > td:first-child {
  border-top-left-radius: 0;
}
.compliance-alerts .alerts-table.p-datatable tr[aria-expanded=true] > td:last-child {
  border-bottom-right-radius: 0;
}
.compliance-alerts .alerts-table.p-datatable .p-datatable-footer {
  background: none;
  border: none;
}

.error-page .banner {
  height: 500px;
  overflow: hidden;
  width: 100%;
}
.error-page .banner img {
  width: 100%;
  height: 500px;
  border-radius: 12px;
  object-fit: cover;
}
.error-page p {
  font-size: 1.125rem;
}

.enumeration-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.field-validation-error {
  color: var(--validation-error-color);
  font-size: 1rem;
  line-height: 1.125rem;
  white-space: pre-line;
  text-wrap: pretty;
}

.validation-summary-errors .p-message-wrapper {
  padding: 1rem 1.5rem;
}
.validation-summary-errors ul {
  margin: 0;
  padding-left: 0;
}

/* lazy-loaded elements */
.lazy-container {
  position: relative;
}

.lazy-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: var(--overlay);
}

.lazy-overlay-content {
  position: absolute;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
}

.no-selection-grid .p-column-header-content .p-checkbox {
  display: none;
}
.no-selection-grid .p-selection-column .p-checkbox {
  display: none;
}

.disabled-selection .p-checkbox {
  cursor: default;
  opacity: 0.6;
}

.ncc-header .p-checkbox {
  margin-right: 10px;
}
.ncc-header .p-column-header-content::after {
  content: "Add to NCC";
}

td label {
  white-space: normal;
}

.fw-800 {
  font-weight: 800;
}

.no-expander .p-row-toggler {
  visibility: hidden;
}

.text-red {
  color: var(--pag-sunrise);
}

.text-orange {
  color: var(--pag-sunrise-orange);
}

.text-green {
  color: var(--pag-green);
}

/*# sourceMappingURL=site.css.map */