/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.light-style .menu .app-brand.demo {
  height: 90px;
}

.dark-style .menu .app-brand.demo {
  height: 90px;
}

.app-brand-logo.demo {
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  width: 64px;
  height: 64px;
}

.app-brand-logo.demo svg {
  width: 35px;
  height: 24px;
}

.app-brand-text.demo {
  font-size: 1.375rem;
}

body.customer-portal-layout .app-brand-logo.demo {
  width: 52px;
  height: 52px;
}

body.customer-portal-layout .app-brand-text.demo {
  font-size: 1.05rem;
  line-height: 1.1;
  white-space: nowrap;
}

/*
* Shared sidebar typography
******************************************************************************/

.layout-menu.menu-vertical .menu-inner>.menu-item>.menu-link,
.layout-menu.menu-vertical .menu-sub>.menu-item>.menu-link {
  font-weight: 600;
}

.layout-menu.menu-vertical .menu-inner {
  overflow-x: hidden !important;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 72px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

@media (max-width: 1199.98px) {
  body.staff-responsive-layout .layout-content-navbar .content-wrapper>.container-xxl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Use the reclaimed menu space while preserving the theme's desktop margins. */
@media (min-width: 1200px) {
  html.layout-menu-collapsed {
    --collapsed-menu-reclaimed-width: 11.875rem;
  }

  html.layout-menu-collapsed .layout-content-navbar .layout-navbar.navbar-detached.container-xxl {
    max-width: calc(1440px - 3rem + var(--collapsed-menu-reclaimed-width));
  }

  html.layout-menu-collapsed .layout-content-navbar .content-wrapper>.container-xxl,
  html.layout-menu-collapsed .layout-content-navbar .content-footer>.container-xxl {
    max-width: calc(1600px + var(--collapsed-menu-reclaimed-width));
  }
}

/* Give application pages more room without stretching across ultra-wide screens. */
@media (min-width: 1400px) {
  body.staff-responsive-layout {
    --staff-dashboard-content-width: clamp(1600px, 89vw, 2100px);
    --staff-dashboard-navbar-width: clamp(1440px, calc(89vw - 10rem), 1940px);
  }

  body.staff-responsive-layout .layout-content-navbar .layout-navbar.navbar-detached.container-xxl {
    max-width: var(--staff-dashboard-navbar-width);
  }

  body.staff-responsive-layout .layout-content-navbar .content-wrapper>.container-xxl,
  body.staff-responsive-layout .layout-content-navbar .content-footer>.container-xxl {
    max-width: var(--staff-dashboard-content-width);
  }

  html:not(.layout-menu-collapsed) body.staff-responsive-layout .layout-content-navbar .content-wrapper>.container-xxl,
  html:not(.layout-menu-collapsed) body.staff-responsive-layout .layout-content-navbar .content-footer>.container-xxl {
    width: 95%;
  }
}

/*
* Content
******************************************************************************/

.demo-blocks>* {
  display: block !important;
}

.demo-inline-spacing>* {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing>* {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}

.demo-vertical-spacing.demo-only-element> :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg>* {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}

.demo-vertical-spacing-lg.demo-only-element> :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl>* {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}

.demo-vertical-spacing-xl.demo-only-element> :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 254px;
    position: relative;
  }

  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}

.layout-demo-placeholder img {
  width: 900px;
}

.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

.swal2-container {
  z-index: 100000 !important;
}

/*
* Staff dashboard surfaces
******************************************************************************/

.staff-dashboard-header {
  border: 1px solid rgba(47, 43, 61, .10);
  border-radius: .5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 247, 250, .96));
  padding: 1.5rem;
}

.staff-dashboard-title {
  color: #444050;
  font-weight: 800;
  margin-bottom: .35rem;
}

.staff-dashboard-subtitle {
  color: #6d6b77;
  max-width: 760px;
}

.project-status-filter-group {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(47, 43, 61, .12);
  border-radius: .5rem;
  box-shadow: 0 .125rem .25rem rgba(47, 43, 61, .04);
  padding: .625rem .75rem;
}

.project-status-filter-label {
  color: #6d6b77;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-right: .25rem;
  text-transform: uppercase;
}

.project-status-filter {
  --filter-accent: #696cff;
  border: 2px solid rgba(47, 43, 61, .12);
  font-weight: 600;
  min-width: 6rem;
  transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.project-status-filter:not(.active):not(.is-selected) {
  filter: saturate(.8);
  opacity: .58;
}

.project-status-filter:not(.active):not(.is-selected):hover {
  opacity: .82;
}

.project-status-filter[data-status-filter="active"] {
  --filter-accent: #0dcaf0;
  background-color: transparent;
  border-color: #0dcaf0;
  color: #0dcaf0;
}

.project-status-filter[data-status-filter="closed"] {
  --filter-accent: #ffab00;
}

.project-status-filter[data-status-filter="abandoned"] {
  --filter-accent: #ff3e1d;
}

.project-status-filter.active,
.project-status-filter.is-selected {
  border: 2px solid var(--filter-accent) !important;
  box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--filter-accent) 18%, transparent);
  filter: saturate(1.1);
  opacity: 1;
  font-weight: 700;
}

.staff-dashboard-kicker {
  color: #6d6b77;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.staff-metric-card,
.staff-table-card,
.staff-workspace-card,
.staff-resource-card {
  border: 1px solid rgba(47, 43, 61, .08);
  box-shadow: none;
}

.staff-metric-card .metric-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  font-size: 1.25rem;
}

.staff-metric-value {
  color: #444050;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}

.staff-metric-label {
  color: #6d6b77;
  font-weight: 600;
  margin-bottom: 0;
}

.staff-section-title {
  color: #444050;
  font-weight: 800;
  margin-bottom: .25rem;
}

.staff-section-subtitle {
  color: #6d6b77;
  margin-bottom: 0;
}

.staff-workspace-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  font-size: 1.2rem;
}

.staff-workspace-card .card-title,
.staff-resource-card .card-title {
  color: #444050;
  font-weight: 700;
}

.staff-resource-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.staff-resource-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-top: 1px solid rgba(47, 43, 61, .08);
}

.staff-resource-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.staff-resource-list li:last-child {
  padding-bottom: 0;
}

.staff-resource-name {
  color: #444050;
  font-weight: 600;
}

.staff-resource-meta {
  color: #6d6b77;
  font-size: .8125rem;
}

.staff-table-card .card-header {
  border-bottom: 0;
  padding-bottom: .6rem;
}

.staff-table-card .card-datatable,
.staff-table-card .table-responsive {
  padding: .45rem 1.25rem 1.25rem;
}

.staff-table-card .dataTables_wrapper>.row:first-child {
  margin-bottom: .75rem !important;
}

.staff-table-card .staff-responsive-table .staff-table-actions-cell {
  white-space: nowrap;
  width: 1%;
}

.staff-table-card .staff-responsive-table .staff-table-primary {
  min-width: 0;
}

.staff-table-actions {
  padding: 0 1.25rem .75rem;
}

.staff-table-card .card-header .dt-buttons,
.staff-table-actions .dt-buttons {
  margin: 0;
}

.modal-dialog:has(.staff-confirmation) {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
  width: calc(100% - 1rem);
  max-width: 440px;
  margin-right: auto;
  margin-left: auto;
}

.modal-content:has(> .staff-confirmation) {
  border: 0;
  box-shadow: 0 1rem 3rem rgba(47, 43, 61, .18);
}

.staff-modal-form.staff-confirmation > .modal-header {
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.5rem .5rem;
  border: 0;
}

.prp-confirmation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  font-size: 28px;
}

.staff-modal-form.staff-confirmation > .modal-header .btn-close {
  top: 1rem;
  right: 1rem;
  margin: 0;
  transform: none;
}

.staff-modal-form.staff-confirmation > .modal-header .modal-title {
  max-width: 100%;
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}

.staff-modal-form.staff-confirmation > .modal-body {
  padding: .5rem 1.5rem;
  text-align: center;
  font-size: .95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.staff-modal-form.staff-confirmation > .modal-footer {
  justify-content: center;
  padding: .5rem 1.5rem 1.5rem;
  border: 0;
}

.staff-confirmation .modal-footer form {
  margin: 0;
}

.staff-project-picker .modal-content {
  border: 1px solid rgba(47, 43, 61, .1);
  box-shadow: 0 .35rem 1.75rem rgba(47, 43, 61, .12);
}

.staff-project-picker .modal-header,
.staff-project-create-form>.modal-header,
.staff-modal-form>.modal-header {
  align-items: center;
  border-bottom: 1px solid rgba(47, 43, 61, .1);
  justify-content: center;
  padding: 1.45rem 1.75rem 1.2rem;
  position: relative;
}

.staff-project-picker .modal-header .btn-close,
.staff-project-create-form>.modal-header .btn-close,
.staff-modal-form>.modal-header .btn-close {
  position: absolute;
  right: 1.75rem;
  top: 1.6rem;
}

.staff-project-picker .modal-body,
.staff-project-create-form>.modal-body,
.staff-modal-form>.modal-body {
  padding: 1.35rem 1.75rem;
}

.staff-project-picker .modal-footer,
.staff-project-create-form>.modal-footer,
.staff-modal-form>.modal-footer {
  border-top: 1px solid rgba(47, 43, 61, .1);
  gap: .65rem;
  padding: 1.15rem 1.75rem;
}

.staff-project-create-form>.modal-header .modal-title,
.staff-modal-form>.modal-header .modal-title {
  color: #444050;
  font-weight: 700;
  max-width: calc(100% - 3rem);
  text-align: center;
}

.staff-project-create-form>.modal-body>.row,
.staff-modal-form>.modal-body>.row {
  margin-top: 0;
}

.staff-project-create-form>.modal-body hr,
.staff-modal-form>.modal-body hr {
  border-color: rgba(47, 43, 61, .1);
  margin-bottom: .1rem;
  margin-top: .15rem;
  opacity: 1;
}

.staff-project-create-form>.modal-body h5,
.staff-modal-form>.modal-body h5 {
  align-items: center;
  color: #444050;
  display: flex;
  font-size: 1.05rem;
  gap: .65rem;
  margin-bottom: 0;
}

.staff-project-create-form>.modal-body h5::before,
.staff-modal-form>.modal-body h5::before {
  background: #7367f0;
  border-radius: 1rem;
  content: "";
  display: inline-block;
  flex: 0 0 .25rem;
  height: 1.3rem;
  width: .25rem;
}

.staff-project-create-form>.modal-body h5 strong,
.staff-modal-form>.modal-body h5 strong {
  font-weight: 800;
}

.staff-project-section-heading {
  align-items: flex-start;
  display: flex;
  gap: .9rem;
}

.staff-project-section-icon {
  align-items: center;
  background: rgba(115, 103, 240, .12);
  border-radius: .375rem;
  color: #7367f0;
  display: inline-flex;
  flex: 0 0 2.25rem;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.staff-project-section-copy {
  color: var(--bs-secondary-color);
  font-size: .875rem;
  line-height: 1.35;
}

.staff-batch-footer-summary {
  align-items: center;
  color: var(--bs-secondary-color);
  display: flex;
  gap: .55rem;
  min-height: 2.375rem;
}

.staff-batch-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.staff-dashboard-actions {
  align-items: flex-start;
}

.staff-dashboard-actions-primary,
.staff-dashboard-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

@media (min-width: 1200px) {
  .staff-dashboard-actions {
    align-items: flex-end;
  }

  .staff-dashboard-actions-primary,
  .staff-dashboard-export-actions {
    justify-content: flex-end;
  }
}

.staff-project-create-form .form-label,
.staff-modal-form .form-label {
  color: #5d596c;
  font-weight: 600;
}

.modal .position-relative {
  overflow: visible;
}

.modal .position-relative>.select2-container {
  width: 100% !important;
}

.modal.prp-external-scroll-modal {
  overflow-y: auto;
}

.modal.prp-external-scroll-modal .modal-content {
  max-height: none;
  overflow: visible;
}

.modal.prp-external-scroll-modal .modal-body {
  max-height: none;
  overflow: visible;
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 3.5rem);
  display: flex;
  flex-direction: column;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto !important;
  max-height: calc(100vh - 180px);
}

.modal.prp-external-scroll-modal .modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 3.5rem);
}

.modal.prp-external-scroll-modal .modal-dialog-scrollable .modal-body {
  max-height: calc(100vh - 180px);
  overflow-y: auto !important;
}

.modal.prp-external-scroll-modal .modal-dialog>.select2-container--open {
  pointer-events: auto;
  z-index: calc(var(--bs-modal-zindex) + 1);
}

.modal.prp-external-scroll-modal .modal-dialog>.select2-container--open .select2-dropdown {
  pointer-events: auto;
  z-index: calc(var(--bs-modal-zindex) + 1);
}

.modal .select2-dropdown,
.modal .select2-results__options {
  overscroll-behavior: contain;
}

.modal .select2-results__options {
  max-height: 16rem;
  overflow-y: auto;
}

.staff-project-create-form .description-block {
  background: rgba(47, 43, 61, .035);
  border: 1px solid rgba(47, 43, 61, .08);
  border-radius: .5rem;
  padding: .5rem;
}

.staff-project-create-form .description-block .form-control {
  background: #fff;
}

.staff-project-picker-sections {
  display: grid;
  gap: 1.25rem;
}

.staff-project-picker-section {
  border-bottom: 1px solid rgba(47, 43, 61, .1);
  padding-bottom: 1.25rem;
}

.staff-project-picker-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.staff-project-picker-section-head {
  align-items: center;
  display: flex;
  margin-bottom: .9rem;
}

.staff-project-picker-section-title {
  align-items: center;
  display: inline-flex;
  font-size: 1.05rem;
  margin-bottom: 0;
}

.staff-project-picker-section-title::before {
  background-color: var(--bs-primary);
  border-radius: 999px;
  content: "";
  display: inline-block;
  height: 1.2rem;
  margin-right: .55rem;
  width: .25rem;
}

.staff-project-picker-copy {
  color: #6d6b77;
  max-width: 36rem;
}

.staff-project-option-grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-project-option {
  align-items: center;
  background: rgba(47, 43, 61, .025);
  border: 1px solid rgba(47, 43, 61, .12);
  border-radius: .5rem;
  color: #444050;
  display: grid;
  gap: .8rem;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  min-height: 4.5rem;
  padding: .8rem .9rem;
  text-align: left;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}

.staff-project-option:hover,
.staff-project-option:focus-visible {
  background: rgba(115, 103, 240, .08);
  border-color: rgba(115, 103, 240, .28);
  box-shadow: 0 .25rem .9rem rgba(47, 43, 61, .08);
  color: #444050;
}

.staff-project-option-icon {
  align-items: center;
  background: rgba(115, 103, 240, .12);
  border-radius: .375rem;
  color: #7367f0;
  display: inline-flex;
  font-size: 1.2rem;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.staff-project-option-label {
  display: block;
  font-weight: 750;
  line-height: 1.25;
}

.staff-project-option-arrow {
  color: #6d6b77;
  font-size: 1.15rem;
}

.staff-detail-header .staff-detail-chip {
  align-items: center;
  background: rgba(115, 103, 240, .08);
  border: 1px solid rgba(115, 103, 240, .14);
  border-radius: .375rem;
  color: #5d596c;
  display: inline-flex;
  font-size: .8125rem;
  font-weight: 600;
  gap: .35rem;
  padding: .35rem .6rem;
}

.staff-detail-header .staff-detail-chip i {
  font-size: 1rem;
}

.staff-detail-chip-highlight {
  background: rgba(47, 43, 61, .07) !important;
  border-color: rgba(47, 43, 61, .18) !important;
  color: #444050 !important;
}

.staff-detail-chip-project-type {
  background: rgba(115, 103, 240, .12) !important;
  border-color: rgba(115, 103, 240, .28) !important;
  color: #4f46c8 !important;
}

.staff-detail-chip-success {
  background: #28c76f !important;
  border-color: #28c76f !important;
  color: #fff !important;
}

.staff-detail-chip-warning {
  background: #ff9f43 !important;
  border-color: #ff9f43 !important;
  color: #fff !important;
}

.staff-detail-chip-danger {
  background: #cb2027 !important;
  border-color: #cb2027 !important;
  color: #fff !important;
}

.staff-detail-chip-info {
  background: #1da1f2 !important;
  border-color: #1da1f2 !important;
  color: #fff !important;
}

.staff-detail-chip-purple {
  background: #9c27b0 !important;
  border-color: #9c27b0 !important;
  color: #fff !important;
}

.staff-detail-card .card-header,
.staff-project-workspace .card-header,
.staff-timeline-card .card-header {
  border-bottom: 0;
  padding-bottom: .5rem;
}

.staff-detail-list {
  display: grid;
  gap: .85rem;
  margin: 0;
  padding: 0;
}

.staff-detail-list li {
  border-bottom: 1px solid rgba(47, 43, 61, .08);
  display: grid;
  gap: .35rem;
  padding-bottom: .85rem;
}

.staff-detail-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.staff-summary-block {
  margin-bottom: 1.75rem;
}

.staff-summary-block:last-child {
  margin-bottom: 0;
}

.staff-summary-block>.staff-tab-section-title {
  align-items: center;
  border-bottom: 1px solid rgba(47, 43, 61, .1);
  display: flex;
  font-size: .95rem;
  gap: .5rem;
  letter-spacing: .01em;
  margin-bottom: 1rem !important;
  padding-bottom: .6rem;
}

.staff-summary-block>.staff-tab-section-title::before {
  background: #7367f0;
  border-radius: 1rem;
  content: "";
  display: inline-block;
  height: 1rem;
  width: .25rem;
}

.staff-summary-grid {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.staff-summary-tile {
  border-bottom: 1px solid rgba(47, 43, 61, .08);
  min-height: auto;
  padding: 0 0 .75rem;
}

.staff-summary-label {
  color: #6d6b77;
  display: block;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: .35rem;
  text-transform: uppercase;
}

.staff-summary-value {
  color: #444050;
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
}

.staff-summary-total {
  background: rgba(115, 103, 240, .12);
  border: 1px solid rgba(115, 103, 240, .28);
  border-radius: .5rem;
  color: #4f46c8;
  font-weight: 800;
  margin-top: 1rem;
  padding: .9rem 1rem;
}

.staff-detail-label {
  color: #6d6b77;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.staff-detail-value {
  color: #444050;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.staff-detail-tabs {
  background: rgba(47, 43, 61, .04);
  border-radius: .5rem;
  display: flex;
  flex-wrap: nowrap;
  gap: .35rem;
  padding: .35rem;
}

.staff-detail-tabs .nav-item {
  flex: 1 1 0;
  margin-bottom: 0 !important;
  min-width: 0;
}

.staff-detail-tabs .nav-link {
  align-items: center;
  border-radius: .4rem;
  display: inline-flex;
  font-weight: 700;
  gap: .35rem;
  justify-content: center;
  min-width: 0;
  padding: .65rem .55rem;
  white-space: nowrap;
  width: 100%;
}

.staff-detail-tabs .staff-tab-content {
  align-items: center;
  gap: .3rem;
  justify-content: center;
  min-width: 0;
}

.staff-detail-tabs .staff-tab-label-full,
.staff-detail-tabs .staff-tab-label-short {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-detail-tabs .staff-tab-label-short {
  display: none;
}

.staff-detail-tabs .badge.bg-label-primary {
  background: #7367f0 !important;
  color: #fff !important;
}

.staff-detail-tabs .staff-count-badge {
  flex: 0 0 auto;
  margin-left: .15rem !important;
  min-width: 1.35rem;
}

@media (max-width: 1399.98px) {
  .staff-detail-tabs {
    gap: .25rem;
    padding: .3rem;
  }

  .staff-detail-tabs .nav-link {
    font-size: .8rem;
    padding: .55rem .35rem;
  }

  .staff-detail-tabs .staff-tab-label-full {
    display: none;
  }

  .staff-detail-tabs .staff-tab-label-short {
    display: inline;
  }

  .staff-detail-tabs .staff-count-badge {
    font-size: .68rem;
    min-width: 1.2rem;
    padding: .18rem .35rem;
  }
}

@media (max-width: 767.98px) {
  .staff-detail-tabs .nav-link {
    padding: .65rem .45rem;
  }
}

.staff-tab-section-header {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.staff-tab-section-title {
  color: #444050;
  font-weight: 800;
  margin-bottom: .25rem;
}

.staff-tab-section-subtitle {
  color: #6d6b77;
  margin-bottom: 0;
}

.staff-config-summary-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.staff-config-metric-card {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(47, 43, 61, .12);
  border-radius: .5rem;
  display: flex;
  gap: .9rem;
  min-height: 5.25rem;
  padding: 1rem;
}

.staff-config-metric-icon {
  align-items: center;
  background: rgba(115, 103, 240, .12);
  border-radius: .45rem;
  color: #7367f0;
  display: inline-flex;
  flex: 0 0 2.5rem;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.staff-config-metric-value {
  color: #444050;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.1;
}

.staff-config-metric-label {
  color: #6d6b77;
  font-size: .8125rem;
  font-weight: 700;
  margin: 0;
}

.staff-config-metric-card .btn {
  margin-left: auto;
}

.staff-entity-meta {
  color: #6d6b77;
  font-size: .8125rem;
  margin-top: .15rem;
}

.staff-compact-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: flex-end;
}

.staff-inline-toggle {
  height: 2rem;
  width: 2rem;
}

.staff-modal-section {
  border-top: 1px solid rgba(47, 43, 61, .1);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.staff-readonly-grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.staff-readonly-item {
  background: rgba(47, 43, 61, .025);
  border: 1px solid rgba(47, 43, 61, .08);
  border-radius: .5rem;
  min-height: 4.25rem;
  padding: .8rem .9rem;
}

.staff-readonly-label {
  color: #6d6b77;
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02rem;
  margin-bottom: .25rem;
  text-transform: uppercase;
}

.staff-readonly-value {
  color: #444050;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.staff-table-card .table .btn-icon,
.staff-project-workspace .table .btn-icon {
  height: 2rem;
  width: 2rem;
}

.staff-timeline-card .timeline-event {
  border-radius: .5rem;
}

.staff-empty-state {
  border: 1px dashed rgba(47, 43, 61, .18);
  border-radius: .5rem;
  padding: 2.5rem 1rem;
  text-align: center;
}

.staff-empty-state-heading {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: .5rem;
}

.staff-empty-state-heading .avatar {
  flex: 0 0 auto;
  margin-bottom: 0 !important;
}

.staff-empty-state-title {
  margin-bottom: 0;
}

.staff-empty-state-centered {
  background: #fff;
  text-align: center;
}

.staff-empty-state-centered .staff-empty-state-heading {
  justify-content: center;
}

.staff-empty-state-centered .staff-empty-state-heading .avatar-initial {
  background: transparent !important;
  color: #D9493F !important;
}

.staff-empty-state-centered .staff-empty-state-heading .avatar-initial i {
  font-size: 1.5rem !important;
  line-height: 1;
}

@media (max-width: 767.98px) {
  .staff-dashboard-header {
    padding: 1.1rem;
  }

  .staff-table-card .card-datatable,
  .staff-table-card .table-responsive {
    padding: .75rem;
  }

  .staff-table-card table.staff-responsive-table>thead>tr>th,
  .staff-table-card table.staff-responsive-table>tfoot>tr>th,
  .staff-table-card table.staff-responsive-table>tbody>tr>th,
  .staff-table-card table.staff-responsive-table>tbody>tr>td {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  .staff-table-card table.staff-responsive-table {
    width: 100% !important;
  }

  .staff-table-card table.staff-responsive-table .staff-table-primary {
    min-width: 6rem;
    overflow-wrap: anywhere;
    width: 6rem !important;
  }

  .staff-table-card table.staff-two-column-table {
    table-layout: fixed;
  }

  .staff-table-card table.staff-two-column-table th,
  .staff-table-card table.staff-two-column-table td {
    overflow-wrap: anywhere;
  }

  .staff-table-card table.staff-two-column-table>thead>tr>th:first-child,
  .staff-table-card table.staff-two-column-table>tfoot>tr>th:first-child,
  .staff-table-card table.staff-two-column-table>tbody>tr>td:first-child {
    padding-left: 1.5rem !important;
  }

  .staff-table-card table.staff-two-column-table>thead>tr>th:last-child,
  .staff-table-card table.staff-two-column-table>tfoot>tr>th:last-child,
  .staff-table-card table.staff-two-column-table>tbody>tr>td:last-child {
    padding-right: 1rem !important;
  }

  .staff-table-card .dataTables_paginate,
  .staff-table-card .dataTables_paginate .pagination {
    max-width: 100%;
  }

  .staff-table-card .dataTables_paginate .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  .staff-table-card .dataTables_filter,
  .staff-table-card .dataTables_filter label {
    max-width: 100%;
    width: 100%;
  }

  .staff-table-card .dataTables_filter label {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }

  .staff-table-card .dataTables_filter input {
    margin-left: 0 !important;
    min-width: 0;
    width: 100% !important;
  }

  .staff-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-config-summary-grid,
  .staff-readonly-grid {
    grid-template-columns: 1fr;
  }

  .staff-resource-list li {
    align-items: flex-start;
    flex-direction: column;
  }

  .staff-project-picker .modal-header,
  .staff-project-picker .modal-body,
  .staff-project-picker .modal-footer,
  .staff-project-create-form>.modal-header,
  .staff-project-create-form>.modal-body,
  .staff-project-create-form>.modal-footer,
  .staff-modal-form>.modal-header,
  .staff-modal-form>.modal-body,
  .staff-modal-form>.modal-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .staff-project-picker .modal-header .btn-close,
  .staff-project-create-form>.modal-header .btn-close,
  .staff-modal-form>.modal-header .btn-close {
    right: 1rem;
  }

  .staff-project-option-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .staff-summary-grid {
    grid-template-columns: 1fr;
  }
}

.staff-detail-chip-closed {
  background-color: #ffe6d5 !important;
  color: #e36620 !important;
  border-color: #e36620 !important;
}

.staff-project-row-closed > *,
table.dataTable tbody tr.staff-project-row-closed > * {
  background-color: #ffddb3 !important;
  box-shadow: none !important;
}

.staff-project-row-danger > *,
table.dataTable tbody tr.staff-project-row-danger > * {
  background-color: #f2a79e !important;
  box-shadow: none !important;
}

/*
* PBS Batch Mode UI Mockup Custom Styles
******************************************************************************/

.pbs-batch-toggle-input {
  width: 2.65rem !important;
  height: 1.2rem !important;
  background-color: rgba(47, 43, 61, 0.25) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
  border: 0 !important;
  border-radius: 1rem !important;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, background-position 0.2s ease-in-out;
}

.pbs-batch-toggle-input:checked {
  background-color: #2b2838 !important;
  background-position: right center !important;
}

.pbs-batch-toggle-input:focus {
  box-shadow: none !important;
}

.pbs-batch-num-control {
  width: 3.5rem;
}

.pbs-batch-select-control {
  max-width: 14rem;
  width: 100%;
}

.batch-main-wrapper .d-flex.align-items-center {
  flex-wrap: wrap;
}
.pbs-batch-spec-source-select {
  min-width: 0;
  max-width: 100%;
}

.pbs-cert-batch-form .pbs-batch-heading {
  flex-wrap: wrap;
}
.pbs-cert-batch-form .pbs-cert-combination-list {
  grid-template-columns: minmax(0, 1fr);
}
.pbs-cert-batch-form .pbs-cert-row-title {
  flex-wrap: wrap;
  min-width: 0;
}
.pbs-cert-batch-form .pbs-cert-row-title .badge {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
.pbs-cert-batch-form .remove-pbs-cert-combination,
.pbs-cert-batch-form .batch-mode-switch {
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .pbs-cert-batch-form .batch-main-wrapper-parent {
    position: static;
  }
  .pbs-cert-batch-form .batch-main-wrapper .form-switch {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
  }
  .pbs-cert-batch-form .pbs-batch-toggle-input {
    flex-shrink: 0;
  }
}


/* =========================================
   ACTIONS CARD
   ========================================= */

.actions-card-body {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, .98),
        rgba(248, 247, 250, .96)
    );
}

/* =========================================
   SECTION HEADINGS
   ========================================= */
.actions-card-body .action-section-heading {
    color: #6d6b77;
}

/* =========================================
   DIVIDER
   ========================================= */

.actions-card-body .action-section-divider {
    border-color: #E5E7EB;
    opacity: 1;
}


/* =========================================
   PROJECT ACTIONS
   ========================================= */

/* Recover Project - Orange */

.actions-card-body .project-btn-recover {
   color: #0F766E;
        background: #F0FDFA;
        border-color: #5ed2c9;
}

.actions-card-body .project-btn-recover:hover,
.actions-card-body .project-btn-recover:focus {
     color: #0F766E;
    background: #CCFBF1;
    border-color: #2DD4BF;
}


/* =========================================
   SUB-PROJECT ACTIONS
   ========================================= */

.actions-card-body .subproject-action-btn {
    border-width: 1px;
    border-style: solid;
    font-weight: 500;
}

/* Anomalies - Purple */

.actions-card-body .subproject-btn-anomalies {
    background-color: #9c27b0;
    border-color: #9c27b0;
    color: #fff;
}

.actions-card-body .subproject-btn-anomalies:hover,
.actions-card-body .subproject-btn-anomalies:focus {
    background-color: #8c239e;
    border-color: #8c239e;
    color: #fff;
}


/* Smedley's Design Approval - Blue */

.actions-card-body .subproject-btn-smedleys_da {
    background-color: #00bad1;
    border-color: #00bad1;
    color: #fff;
}

.actions-card-body .subproject-btn-smedleys_da:hover,
.actions-card-body .subproject-btn-smedleys_da:focus {
    background-color: #00a7bc;
    border-color: #00a7bc;
    color: #fff;
}


/* Swept Path - Amber */

.actions-card-body .subproject-btn-swept_path {
    background-color: #ff9f43;
    border-color: #ff9f43;
    color: #fff;
}

.actions-card-body .subproject-btn-swept_path:hover,
.actions-card-body .subproject-btn-swept_path:focus {
    background-color: #e68f3c;
    border-color: #e68f3c;
    color: #fff;
}


/* Rail Permit - Brown */

.actions-card-body .subproject-btn-rail_permit {
    background-color: #F7F1EC;
    border-color: #D2B69B;
    color: #795548;
}

.actions-card-body .subproject-btn-rail_permit:hover,
.actions-card-body .subproject-btn-rail_permit:focus {
    background-color: #EDE0D5;
    border-color: #BE9B7B;
    color: #604239;
}

/* batch box */
.batch-main-wrapper {
    background: #f9f9fc;
    padding: 0 1rem 0.5rem;
    border: 1px solid rgba(47, 43, 61, .1);
    border-radius: 8px;
}
.batch-main-wrapper-parent {
    position: sticky;
    top: 0;
    z-index: 10;
}
.batch-mode-switch {
    background: #fafbfc;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(47, 43, 61, .1);
    border-radius: 50px;
}
.batch-main-wrapper .d-flex:has(> .form-switch) {
    min-height: 30px;
    flex-wrap: wrap;
}
.form-check .custom-check-space{
      margin-left: -1.5em;
}
.staff-batch-project-form > .modal-body {
    padding: 0 1.75rem;
}

.hva-project-create-form .hva-project-section-head div,
.hva-project-create-form .hva-project-title-wrap {
    min-width: 0;
}

.staff-batch-project-form.hva-project-create-form .modal-title {
    white-space: normal;
}

.hva-project-create-form .hva-project-section-head.justify-content-between {
    flex-wrap: wrap;
}

.hva-project-create-form .hva-project-section-head > .d-flex:not(.batch-mode-switch) {
    flex: 1 1 15rem;
}

.hva-project-create-form .batch-mode-switch,
.hva-project-create-form .hva-route-remove {
    flex-shrink: 0;
}

.hva-project-create-form .hva-route-list {
    grid-template-columns: minmax(0, 1fr);
}

.hva-project-create-form .hva-route-index {
    min-width: 0;
}

.hva-project-create-form .hva-route-bu-badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .staff-batch-project-form.hva-project-create-form .modal-header {
        padding-top: .75rem;
        padding-bottom: .75rem;
    }

    .staff-batch-project-form.hva-project-create-form .hva-project-title-wrap {
        padding-inline: 0 1.5rem;
    }

    .staff-batch-project-form.hva-project-create-form .modal-title {
        max-width: 100%;
        font-size: 1.125rem !important;
        text-align: left;
    }

    .staff-batch-project-form.hva-project-create-form .modal-footer {
        padding-top: .65rem;
        padding-bottom: .65rem;
        gap: .5rem;
    }

    .staff-batch-project-form.hva-project-create-form .hva-footer-actions {
        flex-wrap: nowrap;
        gap: .5rem;
    }

    .staff-batch-project-form.hva-project-create-form .hva-footer-actions .btn {
        min-width: 0;
        padding-inline: .5rem;
    }
}