/* ── BaseButton styles ── */
.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}
.bp-btn:disabled { opacity: 0.6; cursor: not-allowed;
}

/* Sizes */
.bp-btn--sm { padding: 6px 14px; font-size: 12px;
}
.bp-btn--md { padding: 9px 20px;
}
.bp-btn--lg { padding: 12px 28px; font-size: 14px;
}

/* Variants */
.bp-btn--primary { background: #da2128; color: #fff; border-color: #da2128;
}
.bp-btn--primary:hover:not(:disabled) { background: #c41e24; border-color: #c41e24;
}
.bp-btn--outline { background: #fff; color: #4e5a82; border-color: #d1d5e8;
}
.bp-btn--outline:hover:not(:disabled) { background: #f8f9fc;
}
.bp-btn--text { background: transparent; color: #6b7db8; border-color: transparent; padding-left: 4px; padding-right: 4px;
}
.bp-btn--text:hover:not(:disabled) { color: #1a1d35;
}
.bp-btn--danger { background: #fee2e2; color: #b91c1c; border-color: #fecaca;
}
.bp-btn--danger:hover:not(:disabled) { background: #fecaca;
}
.bp-btn--navy { background: #1a1d35; color: #fff; border-color: #1a1d35;
}
.bp-btn--navy:hover:not(:disabled) { background: #2d3154; border-color: #2d3154;
}

/* Loading spinner */
.bp-btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: bp-spin 0.6s linear infinite;
  flex-shrink: 0;
}
@keyframes bp-spin {
to { transform: rotate(360deg);
}
}

/* ── bp- form primitives (global, prefixed to avoid conflicts) ── */
.bp-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-form-group--full { grid-column: 1 / -1;
}
.bp-label {
  font-size: 12px;
  font-weight: 600;
  color: #000;
  letter-spacing: 0.4px;
}
.bp-required { color: #da2128;
}
.bp-input {
  /* Fixed 34px height (border-box) — kept in lockstep with BaseSelect
     and BaseSearchSelect so mixed form rows align on the baseline. */
  height: 34px;
  padding: 0 12px;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  font-size: 13.5px;
  color: #1a1d35;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.bp-input:focus {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}
.bp-input--error    { border-color: #b91c1c !important;
}
.bp-input--disabled { background: #f8f9fc; color: #9098b0; cursor: not-allowed;
}
.bp-input--readonly { background: #f8f9fc; color: #1a1d35; cursor: default; border-color: #c0c1cb;
}
.bp-field-error  { font-size: 11px; color: #b91c1c;
}
.bp-field-helper { font-size: 11px; color: #9098b0;
}

/* ── BaseSelect component styles ── */
.bp-select-wrap { width: 100%;
}
.bp-select { width: 100%;
}
.bp-select.p-select {
  /* Fixed 34px height (border-box) — locks in a consistent form-row
     height across BaseInput / BaseSelect / BaseSearchSelect. */
  height: 34px;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 0.15s;
}
.bp-select.p-select:hover:not(.p-disabled) { border-color: #a0a1ab;
}
.bp-select.p-select.p-focus {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
  outline: none;
}
.bp-select-wrap--open .bp-select.p-select {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
  outline: none;
}
.bp-select .p-select-label {
  /* Flex-center so the label text vertically centres inside the
     fixed-height 34px trigger (parent border-box). */
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  font-size: 13.5px;
  color: #1a1d35;
  font-family: inherit;
}
.bp-select .p-select-label.p-placeholder { color: #9098b0;
}
.bp-select .p-select-dropdown {
  width: 36px;
  color: #6b7db8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-select .p-select-dropdown svg { width: 14px; height: 14px;
}
.bp-select--error.p-select  { border-color: #b91c1c !important;
}
.bp-select.p-disabled { background: #f8f9fc;
}
.bp-select.p-disabled .p-select-label { color: #9098b0;
}

/* ── PrimeVue Select overlay — teleported to body, must be global ── */
.p-select-overlay,
.p-select-overlay.p-component {
  z-index: 9999 !important;
  background-color: #ffffff !important;
  border: 1px solid #c0c1cb !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(25, 26, 55, 0.14) !important;
  font-family: inherit;
  font-size: 13.5px;
  overflow: hidden;
}
.p-select-overlay .p-select-list-container,
.p-select-overlay .p-select-list {
  background-color: #ffffff !important;
}
.p-select-overlay .p-select-filter-container {
  padding: 8px 12px;
  border-bottom: 1px solid #e4e7f0;
  background-color: #ffffff !important;
}
.p-select-overlay .p-select-filter {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #c0c1cb;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background-color: #fff !important;
}
.p-select-overlay .p-select-filter:focus { border-color: #5b6af0;
}
.p-select-overlay .p-select-list {
  /* No max-height or overflow here — PrimeVue sets max-height on the parent
     .p-select-list-container via its scrollHeight prop. Competing here causes
     nested scroll containers that collapse item padding on long lists. */
  padding: 6px 0;
}
.p-select-overlay .p-select-option,
.p-select-overlay .p-select-option-container {
  padding: 11px 14px !important;
  line-height: 1.4 !important;
  font-size: 13.5px !important;
  color: #1a1d35 !important;
  cursor: pointer !important;
  background-color: #ffffff !important;
}
.p-select-overlay .p-select-option:hover,
.p-select-overlay .p-select-option-container:hover      { background-color: #f5f6fb !important;
}
.p-select-overlay .p-select-option.p-focus,
.p-select-overlay .p-select-option-container.p-focus    { background-color: #f5f6fb !important;
}
.p-select-overlay .p-select-option.p-selected,
.p-select-overlay .p-select-option-container.p-selected { background-color: #eef0fd !important; color: #3d4db0 !important; font-weight: 600 !important;
}
.p-select-overlay .p-select-empty-message               { padding: 12px 14px !important; font-size: 13px !important; color: #9098b0 !important; background-color: #ffffff !important;
}

/* ── BaseMultiSelect component styles ── */
.bp-mselect-wrap { width: 100%;
}
.bp-mselect { width: 100%;
}
.bp-mselect.p-multiselect {
  width: 100%;
  /* Fixed 34px trigger height to match BaseInput / BaseSelect / BaseSearchSelect
     (v1.1.46). border-box keeps the outer edge exactly 34px including the
     1px border, so mixed form rows stay baseline-aligned. Vertical padding
     is zero — the label element centres its text via `display:flex;
     align-items:center; height:100%` (same recipe as BaseSelect).
     Caveat: `display='chip'` + `tagsPosition='inside'` with many picks
     will clip stacked chips at this height; that combo should use
     `tagsPosition='below'` for a compact single-row trigger + chips
     rendered outside. */
  height: 34px;
  box-sizing: border-box;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 0.15s;
}
.bp-mselect.p-multiselect:hover:not(.p-disabled) { border-color: #a0a1ab;
}
.bp-mselect.p-multiselect.p-focus {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
  outline: none;
}
.bp-mselect-wrap--open .bp-mselect.p-multiselect {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
  outline: none;
}
.bp-mselect .p-multiselect-label {
  /* Vertical padding at 0 — label element centres via flex on the 34px
     trigger. Horizontal padding matches BaseInput's `padding: 0 12px`. */
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  color: #1a1d35;
  font-family: inherit;
  /* Prevent long comma-joined labels from pushing the trigger taller — the
     chevron column has its own fixed 36px width, so this label span owns
     everything to its left. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bp-mselect .p-multiselect-label.p-placeholder { color: #9098b0;
}
.bp-mselect .p-multiselect-dropdown {
  width: 36px;
  color: #6b7db8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-mselect .p-multiselect-dropdown svg { width: 14px; height: 14px;
}
.bp-mselect--error.p-multiselect { border-color: #b91c1c !important;
}
.bp-mselect.p-disabled { background: #f8f9fc;
}
.bp-mselect.p-disabled .p-multiselect-label { color: #9098b0;
}

/* chip display mode */
.bp-mselect .p-multiselect-chip {
  background: rgba(218, 33, 40, 0.08);
  color: #da2128;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
  margin: 2px 3px 2px 0;
}
.bp-mselect .p-multiselect-chip-icon {
  font-size: 10px;
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.7;
}
.bp-mselect .p-multiselect-chip-icon:hover { opacity: 1;
}

/* ── PrimeVue MultiSelect overlay — teleported to body, must be global ── */
.p-multiselect-overlay,
.p-multiselect-overlay.p-component {
  z-index: 9999 !important;
  background-color: #ffffff !important;
  border: 1px solid #c0c1cb !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(25, 26, 55, 0.14) !important;
  font-family: inherit;
  font-size: 13.5px;
  overflow: hidden;
}
.p-multiselect-overlay .p-multiselect-header {
  padding: 8px 12px;
  border-bottom: 1px solid #e4e7f0;
  background-color: #ffffff !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.p-multiselect-overlay .p-multiselect-filter-container {
  flex: 1;
}
.p-multiselect-overlay .p-multiselect-filter {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #c0c1cb;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background-color: #fff !important;
}
.p-multiselect-overlay .p-multiselect-filter:focus { border-color: #da2128;
}
.p-multiselect-overlay .p-multiselect-list-container,
.p-multiselect-overlay .p-multiselect-list {
  background-color: #ffffff !important;
}
.p-multiselect-overlay .p-multiselect-list { padding: 6px 0;
}
.p-multiselect-overlay .p-multiselect-option,
.p-multiselect-overlay .p-multiselect-option-container {
  padding: 11px 14px !important;
  line-height: 1.4 !important;
  font-size: 13.5px !important;
  color: #1a1d35 !important;
  cursor: pointer !important;
  background-color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.p-multiselect-overlay .p-multiselect-option:hover,
.p-multiselect-overlay .p-multiselect-option-container:hover    { background-color: #f5f6fb !important;
}
.p-multiselect-overlay .p-multiselect-option.p-focus,
.p-multiselect-overlay .p-multiselect-option-container.p-focus  { background-color: #f5f6fb !important;
}
.p-multiselect-overlay .p-multiselect-option.p-selected,
.p-multiselect-overlay .p-multiselect-option-container.p-selected {
  background-color: #fff3f3 !important;
  color: #da2128 !important;
  font-weight: 600 !important;
}

/* checkbox inside each option */
.p-multiselect-overlay .p-checkbox {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.p-multiselect-overlay .p-checkbox-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid #c0c1cb;
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.p-multiselect-overlay .p-checkbox-box.p-checked {
  background: #da2128 !important;
  border-color: #da2128 !important;
}
.p-multiselect-overlay .p-checkbox-box.p-checked svg { color: #fff !important;
}
.p-multiselect-overlay .p-multiselect-empty-message {
  padding: 12px 14px !important;
  font-size: 13px !important;
  color: #9098b0 !important;
  background-color: #ffffff !important;
}

/* ── tagsPosition='below' — selected items render as removable tags BELOW the input ── */
.bp-mselect-trigger-placeholder {
  color: #9098b0;
}
.bp-mselect-trigger-count {
  color: #1a1d35;
  font-weight: 600;
}
.bp-mselect-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  max-height: 120px;
  overflow-y: auto;
}
.bp-mselect-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 10px;
  background: rgba(218, 33, 40, 0.08);
  color: #da2128;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.bp-mselect-tag-remove {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #da2128;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.bp-mselect-tag-remove:hover {
  background: #da2128;
  color: #fff;
}

.bp-textarea {
  padding: 9px 12px;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  font-size: 13.5px;
  color: #1a1d35;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
}
.bp-textarea:focus {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}
.bp-textarea--error    { border-color: #b91c1c !important;
}
.bp-textarea--disabled { background: #f8f9fc; color: #9098b0; cursor: not-allowed;
}

/* ── Wrapper ── */
.bp-tbl-wrap { display: flex; flex-direction: column;
}
.bp-tbl-scroll { overflow-x: auto; border-radius: 10px; border: 1px solid #e4e7f0;
}

/* ── Table base ── */
.bp-tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
  font-weight: 600;
  color: #1a1d35;
  background: #fff;
  min-width: 820px;
}

/* ── Header: sort row ── */
.bp-tbl-thead-sort { background: #191a37;
}
.bp-tbl-th {
  padding: 0;
  border-bottom: 2px solid #2d2f52;
  white-space: nowrap;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.bp-tbl-th--sortable { cursor: pointer;
}
.bp-tbl-th--sortable:hover { background: #23254a;
}
.bp-tbl-th--left   { text-align: left;
}
.bp-tbl-th--right  { text-align: right;
}
.bp-tbl-th--center { text-align: center;
}
.bp-tbl-th-inner {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 11px 14px;
}
.bp-tbl-th--right  .bp-tbl-th-inner { justify-content: flex-end;
}
.bp-tbl-th--center .bp-tbl-th-inner { justify-content: center;
}
.bp-tbl-th-label { flex: 1;
}
.bp-tbl-sort-icon { color: #da2128; flex-shrink: 0; display: flex;
}
.bp-tbl-sort-icon--idle { color: #4e5a82;
}

/* ── Header: search row ── */
.bp-tbl-thead-search { background: #f9fafc;
}
.bp-tbl-th-search {
  padding: 6px 8px;
  border-bottom: 1px solid #e4e7f0;
  vertical-align: middle;
}
.bp-tbl-search-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  padding: 0 7px;
  height: 28px;
  transition: border-color 0.15s;
}
.bp-tbl-search-wrap:focus-within {
  border-color: #da2128;
  box-shadow: 0 0 0 2px rgba(218, 33, 40, 0.08);
}
.bp-tbl-search-icon { color: #9098b0; flex-shrink: 0;
}
.bp-tbl-search-input {
  border: none;
  outline: none;
  font-size: 11.5px;
  color: #1a1d35;
  background: transparent;
  width: 100%;
  min-width: 0;
  font-family: inherit;
}
.bp-tbl-search-input::-moz-placeholder { color: #c4c9de;
}
.bp-tbl-search-input::placeholder { color: #c4c9de;
}
.bp-tbl-search-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: #9098b0;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}
.bp-tbl-search-clear:hover { color: #da2128;
}

/* ── Body rows ── */
.bp-tbl-row { transition: background 0.12s;
}
.bp-tbl-row--clickable { cursor: pointer;
}
.bp-tbl-row:nth-child(odd)  { background: #fff;
}
.bp-tbl-row:nth-child(even) { background: #f4f4f7;
}
.bp-tbl-row:hover { background: #fdf5f5;
}
.bp-tbl-td {
  padding: 11px 14px;
  vertical-align: middle;
}
.bp-tbl-td--clip   { overflow: hidden;
}
.bp-tbl-td--right  { text-align: right;
}
.bp-tbl-td--center { text-align: center;
}
.bp-tbl-cell-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Status badge ── */
.bp-tbl-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.bp-tbl-status-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.bp-tbl-status--draft      { background: rgba(250,204,21,0.15); color: #b45309;
}
.bp-tbl-status--draft      .bp-tbl-status-dot { background: #f59e0b;
}
.bp-tbl-status--active     { background: rgba(34,197,94,0.12);  color: #15803d;
}
.bp-tbl-status--active     .bp-tbl-status-dot { background: #22c55e;
}
.bp-tbl-status--closed     { background: rgba(107,114,128,0.12); color: #374151;
}
.bp-tbl-status--closed     .bp-tbl-status-dot { background: #9ca3af;
}
.bp-tbl-status--approved   { background: rgba(34,197,94,0.12);  color: #15803d;
}
.bp-tbl-status--approved   .bp-tbl-status-dot { background: #22c55e;
}
.bp-tbl-status--completed  { background: rgba(59,130,246,0.12); color: #1d4ed8;
}
.bp-tbl-status--completed  .bp-tbl-status-dot { background: #3b82f6;
}

/* ── Loading skeleton ── */
.bp-tbl-row--skeleton { pointer-events: none;
}
.bp-tbl-skeleton {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f0f1f5 25%, #e8eaf2 50%, #f0f1f5 75%);
  background-size: 200% 100%;
  animation: bp-tbl-shimmer 1.4s infinite;
}
@keyframes bp-tbl-shimmer {
0%   { background-position: 200% 0;
}
100% { background-position: -200% 0;
}
}

/* ── Empty state ── */
.bp-tbl-td-empty { text-align: center; padding: 48px 20px;
}
.bp-tbl-empty { display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.bp-tbl-empty-icon { color: #c4c9de;
}
.bp-tbl-empty p { font-size: 13px; color: #9098b0; margin: 0;
}

/* ── Footer ── */
.bp-tbl-footer { display: flex; justify-content: flex-end; padding: 8px 4px 0;
}
.bp-tbl-count { font-size: 11.5px; color: #9098b0;
}

/* ── Cell alignment ── */
.bp-tbl-td--center { text-align: center;
}
.bp-tbl-td--right  { text-align: right;
}

/* ── Text truncation with ellipsis for default-rendered cells ── */
.bp-tbl-td--clip .bp-tbl-cell-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── Expandable parent row ── */
.bp-tbl-row--expandable { cursor: pointer;
}

/* ── Expand column cell wrapper ── */
.bp-tbl-expand-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

/* ── Expand chevron button ── */
.bp-tbl-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #d1d5e8;
  background: #fff;
  color: #6b7db8;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.bp-tbl-expand-btn svg {
  transition: transform 0.2s ease;
}
.bp-tbl-expand-btn:hover {
  background: #f5f6fb;
  border-color: #b0b7d8;
  color: #1a1d35;
}
.bp-tbl-expand-btn--open {
  background: #1a1d35;
  border-color: #1a1d35;
  color: #fff;
}
.bp-tbl-expand-btn--open:hover {
  background: #2d3152;
  border-color: #2d3152;
}
.bp-tbl-expand-btn--open svg {
  transform: rotate(90deg);
}

/* ── Version count badge ── */
.bp-tbl-expand-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 99px;
  background: #da2128;
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* ── Child rows — same appearance as parent ── */
.bp-tbl-row--child { background: inherit;
}
.bp-tbl-cell-text--muted { color: #c4c9de !important;
}

.bp-tabbar {
  border-bottom: 1px solid #e4e7f0;
  background: #fff;
  overflow-x: hidden;
}
.bp-tabbar-row {
  display: flex;
  gap: 2px;
  padding: 0 4px;
}
.bp-tabbar-btn {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 11px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.15s;
  flex-shrink: 0;
}
.bp-tabbar-btn:hover { background: #f8f9fc;
}
.bp-tabbar-btn--active {
  border-bottom-color: #da2128;
  background: #fff5f5;
}
.bp-tabbar-btn--disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
.bp-tabbar-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f1f5;
  color: #6b7db8;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.bp-tabbar-btn--active .bp-tabbar-icon {
  background: #fee2e2;
  color: #da2128;
}
.bp-tabbar-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.bp-tabbar-code {
  font-size: 11px;
  font-weight: 700;
  color: #4e5a82;
  letter-spacing: 0.3px;
}
.bp-tabbar-btn--active .bp-tabbar-code { color: #da2128;
}
.bp-tabbar-name {
  font-size: 9.5px;
  color: #9098b0;
}
.bp-tabbar-name--solo {
  font-size: 12px;
  font-weight: 600;
  color: #4e5a82;
}
.bp-tabbar-btn--active .bp-tabbar-name { color: #da2128;
}
.bp-tabbar-count {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 18px;
  height: 20px;
  border-radius: 9px;
  background: #e4e7f0;
  color: #1a1d35;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  line-height: 1;
  pointer-events: none;
}
.bp-tabbar-btn--active .bp-tabbar-count {
  background: #da2128;
  color: #fff;
}

.bp-rs-box {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 34px;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  padding: 0 12px;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.bp-rs-val {
  font-size: 11.5px;
  font-weight: 700;
  color: #da2128;
  white-space: nowrap;
  flex-shrink: 0;
}
.bp-rs-track-wrap {
  position: relative;
  flex: 1;
  height: 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
  min-width: 0;
  touch-action: none;
}
.bp-rs-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 99px;
  background: #e4e7f0;
}
.bp-rs-fill {
  position: absolute;
  height: 4px;
  border-radius: 99px;
  background: #da2128;
  pointer-events: none;
}
.bp-rs-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #da2128;
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(218, 33, 40, 0.35);
  transform: translateX(-50%);
  top: 50%;
  margin-top: -9px;
  cursor: grab;
  pointer-events: none;
}
.bp-rs-track-wrap:active .bp-rs-handle { cursor: grabbing;
}
.bp-rs-box--active {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}

.bp-filter-card {
  background: #fff;
  border: 1px solid #e4e7f0;
  border-radius: 10px;
}
.bp-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
}
.bp-filter-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.bp-filter-icon { color: #da2128; flex-shrink: 0;
}
.bp-filter-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #4e5a82;
  white-space: nowrap;
  flex-shrink: 0;
}
.bp-filter-badge {
  display: inline-flex;
  align-items: center;
  background: #da2128;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 99px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.bp-filter-clear {
  background: none;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #4e5a82;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.bp-filter-clear:hover { border-color: #da2128; color: #da2128;
}
.bp-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #4e5a82;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.bp-filter-toggle:hover { border-color: #da2128; color: #da2128;
}
.bp-filter-body {
  border-top: 1px solid #e4e7f0;
  padding: 16px 18px 14px;
}
.bp-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 16px;
  align-items: end;
}

/* ── Active filter tags ── */
.bp-filter-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: #d1d5e8 transparent;
}
.bp-filter-tags::-webkit-scrollbar { height: 3px;
}
.bp-filter-tags::-webkit-scrollbar-track { background: transparent;
}
.bp-filter-tags::-webkit-scrollbar-thumb { background: #d1d5e8; border-radius: 99px;
}
.bp-filter-tags::-webkit-scrollbar-thumb:hover { background: #9098b0;
}
.bp-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  border-radius: 99px;
  background: rgba(218, 33, 40, 0.07);
  border: 1px solid rgba(218, 33, 40, 0.2);
  white-space: nowrap;
  flex-shrink: 0;
}
.bp-filter-tag-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #da2128;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.bp-filter-tag-value {
  font-size: 11px;
  font-weight: 600;
  color: #1a1d35;
}
.bp-filter-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: #9098b0;
  padding: 0;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.bp-filter-tag-remove:hover { background: rgba(218, 33, 40, 0.12); color: #da2128;
}

.bp-alert-overlay {
  position: fixed;
  inset: 0;
  /* Topmost interactive layer — alerts must render above every modal,
     popup, picker, etc. Matches BaseToast (9999) so notifications and
     alerts share the same "always on top" tier. */
  z-index: 9999;
  background: rgba(0, 0, 0, 0.45);
}
.bp-alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  width: 480px;
  min-width: 360px;
  max-width: 95vw;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
.bp-alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #1a1d35;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  gap: 12px;
  flex-shrink: 0;
  height: 40px;
}
.bp-alert-header:active { cursor: grabbing;
}
.bp-alert-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.bp-alert-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.bp-alert-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-alert-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.bp-alert-close:hover { background: rgba(255, 255, 255, 0.22);
}

/* ── Content ── */
.bp-alert-content {
  display: flex;
  flex-direction: row;
  min-height: 135px;
  flex: 1;
}
.bp-alert-type-panel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 68px;
  padding-top: 20px;
  flex-shrink: 0;
}
.bp-alert-body {
  flex: 1;
  padding: 20px;
  font-size: 13.5px;
  color: #1a1d35;
  line-height: 1.65;
  word-break: break-word;
  overflow-y: auto;
}

/* ── Footer ── */
.bp-alert-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-top: 1px solid #e4e7f0;
  background: #f8f9fc;
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 480px) {
.bp-alert { width: 95vw; min-width: 0;
}
.bp-alert-footer { flex-direction: column-reverse; align-items: stretch;
}
.bp-alert-footer .bp-btn { width: 100%; justify-content: center;
}
}

.bp-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  width: 340px;
  max-width: calc(100vw - 40px);
  pointer-events: none;
}
.bp-toast-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.bp-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 14px 14px;
  background: #fff;
  border-radius: 10px;
  border-left: 4px solid;
  box-shadow: 0 4px 20px rgba(25, 26, 55, 0.13);
  pointer-events: all;
  min-height: 52px;
  width: 100%;
  box-sizing: border-box;
}
.bp-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
}
.bp-toast-message {
  flex: 1;
  font-size: 13.5px;
  color: #1a1d35;
  line-height: 1.5;
  margin: 0;
  word-break: break-word;
}
.bp-toast-close {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: #6b7280;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.bp-toast-close:hover {
  background: rgba(0, 0, 0, 0.12);
  color: #1a1d35;
}

/* ── Transition animations ── */
.bp-toast-enter-active {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.bp-toast-leave-active {
  transition: all 0.25s ease-in;
  position: absolute;
  right: 0;
  left: 0;
}
.bp-toast-enter-from {
  opacity: 0;
  transform: translateX(110%);
}
.bp-toast-leave-to {
  opacity: 0;
  transform: translateX(110%);
}
.bp-toast-move {
  transition: transform 0.22s ease;
}

/* ── Responsive ── */
@media (max-width: 480px) {
.bp-toast-container {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: 100%;
}
}

/* ── BaseLoader overlay ── */
/* Full-viewport dimmer that blocks all interaction while any load is
   active. z-index sits above BaseToast (9999) so a loader triggered
   from within a toast-heavy screen still lands on top. */
.bp-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 40, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.bp-loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px 34px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15, 17, 40, 0.22);
  min-width: 200px;
  max-width: min(80vw, 420px);
}

/* Ring spinner — same `bp-spin` keyframe used by BaseButton so the
   whole app shares a single spin animation. Colour is the brand red
   (#da2128) to stay on-tone with primary actions and the required-
   field indicator. */
.bp-loader-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(218, 33, 40, 0.18);
  border-top-color: #da2128;
  border-radius: 50%;
  animation: bp-spin 0.8s linear infinite;
  flex-shrink: 0;
}
.bp-loader-text {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1d35;
  text-align: center;
  line-height: 1.5;
  word-break: break-word;
  min-height: 20px;
}

/* Enter/leave — quick fade so the overlay never feels heavy. Card
   also scales in slightly to give a subtle "arriving" cue. */
.bp-loader-enter-active,
.bp-loader-leave-active {
  transition: opacity 0.18s ease;
}
.bp-loader-enter-active .bp-loader-card,
.bp-loader-leave-active .bp-loader-card {
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.bp-loader-enter-from,
.bp-loader-leave-to {
  opacity: 0;
}
.bp-loader-enter-from .bp-loader-card,
.bp-loader-leave-to .bp-loader-card {
  opacity: 0;
  transform: scale(0.94);
}

/* Mobile — tighten the card so it fits comfortably on narrow screens. */
@media (max-width: 480px) {
.bp-loader-card {
    padding: 20px 24px;
    min-width: 160px;
    max-width: calc(100vw - 32px);
}
.bp-loader-spinner {
    width: 38px;
    height: 38px;
    border-width: 3px;
}
}

/* ── Overlay ── */
.bp-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 16px;
}

/* ── Dialog ── */
.bp-popup-dialog {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(15, 17, 40, 0.22);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
.bp-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 15px;
  border-bottom: 1px solid #d0d4e4;
  gap: 12px;
}
.bp-popup-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1d35;
  line-height: 1.3;
}
.bp-popup-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  color: #4e5a82;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.bp-popup-close:hover {
  background: #eeeef5;
  color: #1a1d35;
}

/* ── Body ── */
.bp-popup-body {
  padding: 20px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ── Transition ── */
.bp-popup-fade-enter-active,
.bp-popup-fade-leave-active {
  transition: opacity 0.2s ease;
}
.bp-popup-fade-enter-active .bp-popup-dialog,
.bp-popup-fade-leave-active .bp-popup-dialog {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.bp-popup-fade-enter-from,
.bp-popup-fade-leave-to {
  opacity: 0;
}
.bp-popup-fade-enter-from .bp-popup-dialog,
.bp-popup-fade-leave-to .bp-popup-dialog {
  transform: scale(0.96) translateY(-8px);
  opacity: 0;
}

/* ── Mobile ── */
@media (max-width: 480px) {
.bp-popup-dialog { border-radius: 10px;
}
.bp-popup-body   { padding: 16px;
}
}

/* ── Container (multi-mode) ── */
.bp-search-multi.p-autocomplete {
  display: block;
  width: 100%;
}
.bp-search-multi-wrap {
  position: relative;
  width: 100%;
}
.bp-search-multi-icon {
  position: absolute;
  right: 12px;
  top: 14px;
  color: #6b7db8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.bp-search-multi .p-autocomplete-input-multiple {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 36px 8px 12px;
  border: 1px solid #d1d5e8;
  border-radius: 8px;
  background: #fff;
  min-height: 44px;
  /* Cap chip-area height so the popup doesn't grow indefinitely when many users are added */
  max-height: 120px;
  overflow-y: auto;
  width: 100%;
  cursor: text;
  list-style: none;
  margin: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* When tagsPosition='below', suppress chips inside the input — they render in the list below */
.bp-search-multi--tags-below .p-autocomplete-chip-item {
  display: none !important;
}
.bp-search-multi--error .p-autocomplete-input-multiple {
  border-color: #b91c1c;
}
.bp-search-multi .p-autocomplete-input-multiple:focus-within {
  border-color: #5b6af0;
  box-shadow: 0 0 0 3px rgba(91, 106, 240, 0.12);
  outline: none;
}

/* ── Input slot (the typing area) ── */
/* flex-basis 100% forces the input onto its own row so "Add more" sits below the chips */
.bp-search-multi .p-autocomplete-input-chip {
  flex: 1 1 100%;
  min-width: 100%;
  padding: 0;
  list-style: none;
}
.bp-search-multi .p-autocomplete-input-chip input,
.bp-search-multi .p-autocomplete-input-multiple input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  color: #1a1d35;
  width: 100%;
  padding: 4px 2px;
}
.bp-search-multi .p-autocomplete-input-chip input::-moz-placeholder, .bp-search-multi .p-autocomplete-input-multiple input::-moz-placeholder {
  color: #6b7db8;
}
.bp-search-multi .p-autocomplete-input-chip input::placeholder,
.bp-search-multi .p-autocomplete-input-multiple input::placeholder {
  color: #6b7db8;
}

/* ── Chips (PrimeVue chip token) ── */
.bp-search-multi .p-autocomplete-chip {
  background: #eef2ff !important;
  border: 1px solid #d1d9f3 !important;
  border-radius: 999px !important;
  padding: 2px 4px 2px 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 13px !important;
  color: #1a1d35 !important;
  list-style: none !important;
}
.bp-search-multi .p-autocomplete-chip:hover {
  background: #e0e7ff !important;
  border-color: #b8c4ee !important;
}

/* Hide PrimeVue's default × icon when using our custom slot button */
.bp-search-multi .p-autocomplete-chip-icon { display: none !important;
}

/* ── Chip content (custom slot) ── */
.bp-search-multi-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bp-search-multi-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #4e5a82;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  transition: background 0.15s, color 0.15s;
}
.bp-search-multi-chip-remove:hover {
  background: #da2128;
  color: #fff;
}
.bp-search-multi-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}
.bp-search-multi-chip-label {
  font-size: 13px;
  color: #1a1d35;
  line-height: 1.2;
}

/* ── Loader ──
   Push OUT of the input on the right (mirrors BaseSearchSelect's loader
   placement in `.bp-search-single .p-autocomplete-loader`). PrimeVue's
   default for multi-mode drops the loader inside the input on the LEFT
   where it overlaps typed text; the negative `right` moves it to the
   gap between this field and the next form control, 2px clearance from
   the input's right border. `top: 50%` + `margin-top: -9px` centres it
   vertically regardless of chip-row growth. `!important` overrides
   PrimeVue's own logical-property positioning (inset-inline-start).
   Colour: brand red matches BaseLoader / BaseButton spinners for a
   coherent "work-in-progress" indicator across the app. */
.bp-search-multi .p-autocomplete-loader {
  left: auto !important;
  right: -19px !important;
  inset-inline-start: auto !important;
  inset-inline-end: -19px !important;
  top: 50% !important;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: #da2128;
}

/* ── Overlay panel ── */
.p-autocomplete-overlay {
  /* PrimeVue 4 theme variables don't resolve consistently — force opaque surface */
  background: #fff !important;
  border: 1px solid #d1d5e8 !important;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 17, 40, 0.12) !important;
  margin-top: 4px;
  padding: 8px 4px;
  max-height: 280px;
  overflow-y: auto;
  /* PrimeVue applies z-index inline (default ~1000); override to sit above BasePopup at 1100 */
  z-index: 1300 !important;
}
.p-autocomplete-list {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.p-autocomplete-option {
  padding: 8px 10px !important;
  border-radius: 6px !important;
  cursor: pointer;
  font-size: 13.5px;
  color: #1a1d35 !important;
  list-style: none;
}
.p-autocomplete-option:hover,
.p-autocomplete-option.p-autocomplete-option-focus,
.p-autocomplete-option.p-focus {
  background: #eef2ff !important;
  color: #1a1d35 !important;
}
.bp-search-multi-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bp-search-multi-opt-text { min-width: 0;
}
.bp-search-multi-opt-name {
  font-size: 13.5px;
  color: #1a1d35;
  font-weight: 500;
  line-height: 1.25;
}
.bp-search-multi-opt-sub {
  font-size: 11.5px;
  color: #6b7db8;
  line-height: 1.25;
  margin-top: 1px;
}
.bp-search-multi-empty {
  padding: 12px;
  font-size: 13px;
  color: #6b7db8;
  text-align: center;
}

/* ── Below-mode pill chips (tagsPosition='below') ── */
.bp-search-multi-below {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
  padding: 2px;
}
.bp-search-multi-below-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eef2ff;
  border: 1px solid #d1d9f3;
  border-radius: 999px;
  padding: 4px 4px 4px 12px;
  font-size: 13px;
  color: #1a1d35;
  line-height: 1.2;
  transition: background 0.15s, border-color 0.15s;
}
.bp-search-multi-below-chip:hover {
  background: #e0e7ff;
  border-color: #b8c4ee;
}
.bp-search-multi-below-label {
  white-space: nowrap;
}
.bp-search-multi-below-remove {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #4e5a82;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.bp-search-multi-below-remove:hover {
  background: #da2128;
  color: #fff;
}

.bp-search-single-wrap {
  position: relative;
  width: 100%;
}
.bp-search-single.p-autocomplete {
  display: block;
  width: 100%;
}
.bp-search-single .p-autocomplete-input {
  /* Fixed 34px height (border-box) — kept in lockstep with BaseInput
     and BaseSelect so mixed form rows align on the baseline. Right
     padding (32px) preserves clearance for the clear-× / search-icon
     that render absolutely-positioned inside .bp-search-single-wrap. */
  height: 34px;
  box-sizing: border-box;
  width: 100%;
  padding: 0 32px 0 12px;
  font-size: 13.5px;
  color: #1a1d35;
  border: 1px solid #d1d5e8;
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.bp-search-single .p-autocomplete-input::-moz-placeholder {
  color: #6b7db8;
}
.bp-search-single .p-autocomplete-input::placeholder {
  color: #6b7db8;
}
.bp-search-single .p-autocomplete-input:focus {
  border-color: #5b6af0;
  box-shadow: 0 0 0 3px rgba(91, 106, 240, 0.12);
}
.bp-search-single--error .p-autocomplete-input {
  border-color: #b91c1c;
}
.bp-search-single-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #4e5a82;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.bp-search-single-clear:hover {
  background: #da2128;
  color: #fff;
}
.bp-search-single-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7db8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.bp-search-single-create {
  padding: 6px 4px;
}
.bp-search-single-create-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #5b6af0;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.bp-search-single-create-link:hover {
  background: #eef0ff;
  color: #3b48d0;
}

/* PrimeVue AutoComplete's built-in loader (SpinnerIcon rendered when
   the :loading prop is true).

   Position: PrimeVue's default (`inset-inline-end:
   dt('autocomplete.padding.x')`) places the loader inside the input,
   where it overlaps the custom Q search icon we render at right: 10px.
   A negative `right` pushes the loader OUT of the input entirely so it
   sits in the gap between this field and the next form control, with a
   2px clearance from the input's right border. Width 18px + right -20px
   → loader left edge at (container_right + 2px).

   Size: the SpinnerIcon SVG is a filled ring path, so its visible stroke
   thickness scales with icon size. `.p-icon`'s default (`dt('icon.size')`)
   can render the arc quite thin — pinning to 18px keeps it visually
   consistent with the rest of the app's loading indicators.

   Colour: SpinnerIcon fills its path with `fill="currentColor"`, so
   setting `color` on the loader element switches it to brand red
   (#da2128) — the same shade used by BaseLoader's page-level ring and
   BaseButton's :loading spinner. Keeps every "work-in-progress"
   indicator on one colour. */
.bp-search-single .p-autocomplete-loader {
  right: -19px;
  inset-inline-end: -19px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: #da2128;
}

.bp-skills-picker { position: relative; width: 100%;
}

/* ── Trigger button ────────────────────────────────────────────────────── */
.bp-skills-picker-trigger {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px 0 10px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.bp-skills-picker-trigger:hover                  { border-color: #a0a1ab;
}
.bp-skills-picker-trigger--open                  { border-color: #a0a1ab;
}
.bp-skills-picker-trigger-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.bp-skills-picker-trigger-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #6b7db8;
}
.bp-skills-picker-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9098b0;
}
.bp-skills-picker-trigger-label--filled { color: #1a1d35; font-weight: 600;
}
.bp-skills-picker-clear {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #9098b0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.bp-skills-picker-clear:hover { color: #da2128;
}

/* ── tagsPosition='below' chips ─────────────────────────────────────────── */
.bp-skills-picker-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  max-height: 120px;
  overflow-y: auto;
}
.bp-skills-picker-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 10px;
  background: rgba(218, 33, 40, 0.08);
  color: #da2128;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.bp-skills-picker-tag-remove {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #da2128;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.bp-skills-picker-tag-remove:hover {
  background: #da2128;
  color: #fff;
}

/* ── Modal overlay ─────────────────────────────────────────────────────── */
.bp-skills-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.bp-skills-picker-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(15, 17, 40, 0.25);
  width: 100%;
  max-width: 800px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.bp-skills-picker-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #f1f1f6;
}
.bp-skills-picker-modal-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #9098b0;
}
.bp-skills-picker-modal-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1d35;
  margin-top: 2px;
}
.bp-skills-picker-modal-close {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #9098b0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-skills-picker-modal-close:hover { background: #f5f6fb; color: #1a1d35;
}

/* ── Proficiency note ──────────────────────────────────────────────────── */
.bp-skills-picker-modal-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 20px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  color: #92400e;
  font-size: 11px;
  line-height: 1.4;
}
.bp-skills-picker-modal-note svg { flex-shrink: 0; margin-top: 1px; color: #f59e0b;
}
.bp-skills-picker-modal-note p { margin: 0;
}

/* ── Body ──────────────────────────────────────────────────────────────── */
.bp-skills-picker-modal-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  flex: 1;
  overflow: hidden;
}
.bp-skills-picker-pane { display: flex; flex-direction: column; overflow: hidden;
}
.bp-skills-picker-pane--left  { border-right: 1px solid #f1f1f6;
}
.bp-skills-picker-pane--right { padding: 12px; background: #fafafd; overflow-y: auto;
}
@media (max-width: 640px) {
.bp-skills-picker-modal-body { grid-template-columns: 1fr;
}
.bp-skills-picker-pane--left { border-right: none; border-bottom: 1px solid #f1f1f6; max-height: 50%;
}
}

/* Search row */
.bp-skills-picker-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid #f1f1f6;
}
.bp-skills-picker-search-row svg { color: #9098b0; flex-shrink: 0;
}
.bp-skills-picker-search-input {
  flex: 1;
  height: 28px;
  font-size: 12.5px;
  color: #1a1d35;
  background: transparent;
  border: 0;
  outline: none;
  font-family: inherit;
}
.bp-skills-picker-search-input::-moz-placeholder { color: #9098b0;
}
.bp-skills-picker-search-input::placeholder { color: #9098b0;
}
.bp-skills-picker-search-clear {
  font-size: 11px;
  color: #9098b0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.bp-skills-picker-search-clear:hover { color: #1a1d35;
}

/* Tree */
.bp-skills-picker-tree {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  font-size: 12.5px;
}
.bp-skills-picker-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 11.5px;
  color: #9098b0;
}
.bp-skills-picker-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.bp-skills-picker-row--domain   { cursor: pointer;
}
.bp-skills-picker-row--category { cursor: pointer; padding-left: 28px;
}
.bp-skills-picker-row--group    { padding-left: 48px; padding-top: 2px; padding-bottom: 2px;
}
.bp-skills-picker-row--skill    { cursor: pointer; padding-left: 84px; padding-top: 2px; padding-bottom: 2px;
}
.bp-skills-picker-row:hover     { background: #fafafd;
}
.bp-skills-picker-caret {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9098b0;
  flex-shrink: 0;
}
.bp-skills-picker-caret-btn { background: transparent; border: 0; cursor: pointer; padding: 0;
}
.bp-skills-picker-caret-svg { width: 10px; height: 10px; transition: transform 0.15s;
}
.bp-skills-picker-caret-svg--open { transform: rotate(90deg);
}
.bp-skills-picker-domain-label   { font-weight: 600; color: #1a1d35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-skills-picker-category-label { font-weight: 500; color: #4e5a82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-skills-picker-group-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.bp-skills-picker-group-label { font-weight: 600; color: #4e5a82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-skills-picker-skill-label { color: #4e5a82; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-skills-picker-checkbox {
  width: 14px;
  height: 14px;
  border: 1px solid #c0c1cb;
  border-radius: 3px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.bp-skills-picker-checkbox--all     { background: #da2128; border-color: #da2128;
}
.bp-skills-picker-checkbox--partial { background: #f0a0a3; border-color: #f0a0a3;
}

/* Right pane — selected list */
.bp-skills-picker-pane-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #4e5a82;
  margin-bottom: 8px;
}
.bp-skills-picker-pane-empty {
  font-size: 11.5px;
  color: #9098b0;
  font-style: italic;
  text-align: center;
  padding: 16px 0;
}
.bp-skills-picker-selected-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
}
.bp-skills-picker-selected-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e4e7f0;
  border-radius: 6px;
  font-size: 12px;
}
.bp-skills-picker-selected-text { flex: 1; min-width: 0;
}
.bp-skills-picker-selected-name {
  color: #1a1d35;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-skills-picker-selected-meta {
  color: #9098b0;
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-skills-picker-selected-remove {
  width: 20px;
  height: 20px;
  background: transparent;
  border: 0;
  color: #9098b0;
  cursor: pointer;
  flex-shrink: 0;
}
.bp-skills-picker-selected-remove:hover { color: #da2128;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.bp-skills-picker-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 20px;
  border-top: 1px solid #f1f1f6;
  background: #fafafd;
}
.bp-skills-picker-footer-clear {
  font-size: 12px;
  color: #9098b0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.bp-skills-picker-footer-clear:hover { color: #da2128;
}
.bp-skills-picker-footer-cancel {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  color: #4e5a82;
  background: #fff;
  border: 1px solid #e4e7f0;
  border-radius: 6px;
  cursor: pointer;
}
.bp-skills-picker-footer-cancel:hover { background: #fafafd;
}
.bp-skills-picker-footer-apply {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  color: #fff;
  background: #0d1526;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.bp-skills-picker-footer-apply:hover { background: #1e2d45;
}

/* Transition */
.bp-skills-picker-fade-enter-active,
.bp-skills-picker-fade-leave-active { transition: opacity 0.15s ease;
}
.bp-skills-picker-fade-enter-from,
.bp-skills-picker-fade-leave-to     { opacity: 0;
}

.bp-tooltip[data-v-de7846ee] {
  background: #1e2235;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.015em;
  animation: bp-tooltip-in-de7846ee 0.14s ease-out both;
}
.bp-tooltip--wrap[data-v-de7846ee] {
  white-space: normal;
  width: -moz-max-content;
  width: max-content;
  max-width: 240px;
  line-height: 1.45;
}
@keyframes bp-tooltip-in-de7846ee {
from { opacity: 0; transform: scale(0.93);
}
to   { opacity: 1; transform: scale(1);
}
}

/* .bp-alert centering + cursor rules live in src/styles/main.css globally */

/* Hide the bell icon — no context for this action dialog */
.bp-alert-header-icon {
  display: none !important;
}
.sk-alert-btn {
  flex-shrink: 0;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 9px;
  border-style: none;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 9px;
  padding-bottom: 9px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
  background: #d97706;
}
.sk-alert-btn:hover { background: #b45309;
}

/*
  The strip itself stays transparent, so the shell layout's #f1f5f9 page
  colour shows between and around the tabs. The white belongs to each tab
  button (below), not to the row — the Practice / Industry / Solutions tabs
  read as white cards sitting on the page, rather than one white band.
*/
.sk-domain-tabbar .bp-tabbar {
  background: transparent;
}

/* BaseTabBar spaces its tabs 2px apart; here they butt up against each
   other so the white surfaces form one continuous run. */
.sk-domain-tabbar .bp-tabbar-row {
  gap: 0;
}

/* Each tab is its own white surface, filled out to its padding box.
   Square corners — BaseTabBar's 8px 8px 0 0 folder-tab radius is dropped. */
.sk-domain-tabbar .bp-tabbar-btn {
  gap: 10px;
  padding: 10px 14px 12px;
  background: #fff;
  border-radius: 0;
}

/* BaseTabBar's own `.bp-tabbar-btn:hover` has the same specificity as the
   rule above and loses to it on source order, so the hover tint is restated
   here with one more class to keep it alive. Same colour as the shared
   default; the active tab is excluded, matching the icon-box hover rule. */
.sk-domain-tabbar .bp-tabbar-btn:hover:not(.bp-tabbar-btn--active) {
  background: #f8f9fc;
}
.sk-domain-tabbar .bp-tabbar-icon {
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  color: inherit;
}

/* Coloured icon box */
.sk-tab-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #eef0f5;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.sk-domain-tabbar .bp-tabbar-btn--active .sk-tab-icon-box {
  background: #fee2e2;
  color: #da2128;
}
.sk-domain-tabbar .bp-tabbar-btn:hover:not(.bp-tabbar-btn--active) .sk-tab-icon-box {
  background: #e2e8f0;
}

/* The active tab stays white like the rest — BaseTabBar's #fff5f5 tint is
   dropped here on purpose, so only the icon box and the red underline mark
   which tab is selected. */
.sk-domain-tabbar .bp-tabbar-btn--active {
  background: #fff;
}

/*
  Override .bp-tabbar-count from absolute (corner badge) to static so it
  participates in the button's flex row: [icon] [text] [count].
  All other styling matches .pill-count from the design reference.
*/
.sk-domain-tabbar .bp-tabbar-count {
  height: auto;
  min-width: unset;
  border-radius: 999px;
  background: #f1f1f5;
  color: #6b7280;
  top: 12px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  line-height: 1.3;
  transition: background 0.12s, color 0.12s;
}
.sk-domain-tabbar .bp-tabbar-btn--active .bp-tabbar-count {
  background: #fee2e2;
  color: #da2128;
}
.sk-domain-tabbar .bp-tabbar-code {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #191a37 !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
  transition: color 0.12s;
}
.sk-domain-tabbar .bp-tabbar-btn--active .bp-tabbar-code {
  color: #da2128 !important;
}
.sk-domain-tabbar .bp-tabbar-name {
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  line-height: 1.2;
  transition: color 0.12s;
}
.sk-domain-tabbar .bp-tabbar-btn--active .bp-tabbar-name {
  color: #9b6d70 !important;
}
@media (max-width: 680px) {
.sk-domain-tabbar .bp-tabbar-count { font-size: 10px; padding: 1px 7px;
}
}
@media (max-width: 480px) {
.sk-domain-tabbar .sk-tab-icon-box { display: none;
}
.sk-domain-tabbar .bp-tabbar-btn   { gap: 5px; padding: 10px 10px 11px;
}
.sk-domain-tabbar .bp-tabbar-count { font-size: 10px; padding: 1px 6px;
}
}
.sk-rated-btn {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  border-radius: 9px;
  border-width: 1px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 120ms;
}
.sk-rated-btn--on {
  --tw-border-opacity: 1;
  border-color: rgb(25 26 55 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(25 26 55 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.sk-rated-btn--off {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(25 26 55 / var(--tw-text-opacity, 1));
}
.sk-rated-btn--off:hover {
  --tw-border-opacity: 1;
  border-color: rgb(25 26 55 / var(--tw-border-opacity, 1));
}

/* Hide scrollbar — no Tailwind utility for scrollbar-width in v3 */
.prof-legend-scroll[data-v-dd900f47] {
  scrollbar-width: none;
}
.prof-legend-scroll[data-v-dd900f47]::-webkit-scrollbar {
  display: none;
}

/* BaseTextarea + BaseButton overrides scoped via .sk-suggest-card wrapper */

/* Textarea: white bg, red focus, taller min-height, pre-line placeholder */
.sk-suggest-card .bp-textarea {
  background: #fff;
  min-height: 110px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  border-color: #e5e7eb;
}
.sk-suggest-card .bp-textarea:focus {
  border-color: #da2128;
  box-shadow: none;
}
.sk-suggest-card .bp-textarea::-moz-placeholder {
  color: #9ca3af;
  white-space: pre-line;
}
.sk-suggest-card .bp-textarea::placeholder {
  color: #9ca3af;
  white-space: pre-line;
}
.sk-suggest-card .bp-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Submit button: darker text + bolder to match design */
.sk-suggest-card .bp-btn--outline {
  color: #191a37;
  font-weight: 700;
  border-color: #e5e7eb;
}
.sk-suggest-card .bp-btn--outline:hover:not(:disabled) {
  background: #f8f9fc;
  border-color: #191a37;
}
.sk-suggest-card .bp-btn--outline:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/*
 * All rules below are guarded by .sk-remove-confirm-scope, which is stamped
 * at runtime only on the overlay element belonging to THIS component instance.
 * They will never affect other BaseAlert / error-type alerts on the page.
 */

/* Header — hide the default bell, show trash + question-mark side by side */
.sk-remove-confirm-scope .bp-alert-header-icon {
  gap: 4px;
}
.sk-remove-confirm-scope .bp-alert-header-icon svg {
  display: none;
}
.sk-remove-confirm-scope .bp-alert-header-icon::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4h6v2'/%3E%3C/svg%3E");
}
.sk-remove-confirm-scope .bp-alert-header-icon::after {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* Type panel — hide the default X-circle, show trash icon in error red */
.sk-remove-confirm-scope .bp-alert-type-panel svg {
  display: none;
}
.sk-remove-confirm-scope .bp-alert-type-panel::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23da2128' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4h6v2'/%3E%3C/svg%3E");
}

/* Vertically centre icon and body text within the content row */
.sk-remove-confirm-scope .bp-alert-content {
  align-items: center;
}

/* ── PrimeVue overlay mask ── */
.p-overlay-mask { --px-mask-background: rgba(0, 0, 0, 0.45);
}

/* ── Dialog chrome ── */
.sk-add-lang-modal.p-dialog {
  background: #ffffff !important;
  border: 1px solid #f0f1f5 !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden;
}
.sk-add-lang-modal .p-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 0 !important;
  background: #ffffff;
  border-bottom: none !important;
}
.sk-add-lang-modal .p-dialog-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #191a37 !important;
  letter-spacing: -0.01em;
}
.sk-add-lang-modal .p-dialog-close-button,
.sk-add-lang-modal .p-dialog-header-actions .p-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #9ca3af !important;
  width: 28px; height: 28px;
  border-radius: 6px !important;
  padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.sk-add-lang-modal .p-dialog-close-button:hover,
.sk-add-lang-modal .p-dialog-header-actions .p-button:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
}
.sk-add-lang-modal .p-dialog-content {
  padding: 18px 24px 4px !important;
  background: #ffffff;
  overflow: visible !important;
}
.sk-add-lang-modal .p-dialog-footer {
  padding: 4px 24px 22px !important;
  background: #ffffff;
  border-top: none !important;
  display: flex !important;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Search BaseInput override ── */
.sk-add-lang-modal .bp-input {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 13.5px;
  color: #191a37;
}
.sk-add-lang-modal .bp-input:focus {
  border-color: #da2128 !important;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.09) !important;
  background: #ffffff !important;
}
.sk-add-lang-modal .bp-input::-moz-placeholder { color: #b0b7c3 !important;
}
.sk-add-lang-modal .bp-input::placeholder { color: #b0b7c3 !important;
}

/* ── Cancel button ── */
.sk-add-lang-modal .bp-btn--outline {
  background: #fff !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}
.sk-add-lang-modal .bp-btn--outline:hover:not(:disabled) {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
}

/* ── Thin scrollbar (Firefox + WebKit) — can't do with Tailwind ── */
.sk-lang-list {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.25s;
}
.sk-lang-list.sk-scrolling,
.sk-lang-list:hover { scrollbar-color: #d1d5db transparent;
}
.sk-lang-list::-webkit-scrollbar        { width: 4px;
}
.sk-lang-list::-webkit-scrollbar-track  { background: transparent;
}
.sk-lang-list::-webkit-scrollbar-thumb  { background: transparent; border-radius: 99px; -webkit-transition: background 0.25s; transition: background 0.25s;
}
.sk-lang-list.sk-scrolling::-webkit-scrollbar-thumb,
.sk-lang-list:hover::-webkit-scrollbar-thumb { background: #d1d5db;
}

/* ── PrimeVue BaseSelect overrides (can't be done with Tailwind) ── */
.sk-lang-panel .lang-sel .bp-form-group { gap: 0;
}
.sk-lang-panel .lang-sel .bp-select.p-select {
  width: 100%;
  background: #ffffff !important;
  border: 1px solid #eaebf0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(25, 26, 55, 0.05) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.sk-lang-panel .lang-sel .bp-select.p-select:hover:not(.p-disabled) {
  border-color: #c8cad4 !important;
}
.sk-lang-panel .lang-sel .bp-select.p-select.p-focus {
  border-color: #da2128 !important;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.09) !important;
}
.sk-lang-panel .lang-sel .p-select-label {
  padding: 8px 10px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #1a1d35 !important;
}
.sk-lang-panel .lang-sel .p-select-label.p-placeholder {
  color: #b8bcc8 !important;
  font-weight: 400 !important;
}

/* Select overlay scrollbar */
.p-select-overlay .p-select-list-container {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.25s;
}
.p-select-overlay .p-select-list-container:hover { scrollbar-color: #d1d5db transparent;
}
.p-select-overlay .p-select-list-container::-webkit-scrollbar        { width: 4px;
}
.p-select-overlay .p-select-list-container::-webkit-scrollbar-track  { background: transparent;
}
.p-select-overlay .p-select-list-container::-webkit-scrollbar-thumb  { background: transparent; border-radius: 99px;
}
.p-select-overlay .p-select-list-container:hover::-webkit-scrollbar-thumb { background: #d1d5db;
}

/* Select dropdown items */
.p-select-overlay .p-select-list { padding: 3px 0 !important;
}
.p-select-overlay .p-select-option,
.p-select-overlay .p-select-option-container { padding: 8px 12px !important;
}

/* ── Remove × BaseButton override ── */
.sk-lang-panel .sk-lang-remove.bp-btn {
  width: 28px !important; height: 28px !important;
  min-width: unset !important;
  padding: 0 !important;
  border-radius: 6px !important;
  color: #c4c7cf !important;
  background: transparent !important;
  border-color: transparent !important;
  transition: color 0.15s, background 0.15s !important;
}
.sk-lang-panel .sk-lang-remove.bp-btn:hover:not(:disabled) {
  color: #da2128 !important;
  background: #fee2e2 !important;
  border-color: transparent !important;
}

/* ════════════════════════════════
   Dialog chrome — same pattern as AddLanguageModal
   ════════════════════════════════ */
.sk-cert-modal.p-dialog {
  background: #ffffff !important;
  border: 1px solid #f0f1f5 !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden;
}
.sk-cert-modal .p-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 0 !important;
  background: #ffffff;
  border-bottom: none !important;
}
.sk-cert-modal .p-dialog-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #191a37 !important;
  letter-spacing: -0.01em;
}
.sk-cert-modal .p-dialog-close-button,
.sk-cert-modal .p-dialog-header-actions .p-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #9ca3af !important;
  width: 28px; height: 28px;
  border-radius: 6px !important;
  padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.sk-cert-modal .p-dialog-close-button:hover,
.sk-cert-modal .p-dialog-header-actions .p-button:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
}
.sk-cert-modal .p-dialog-content {
  padding: 18px 24px 4px !important;
  background: #ffffff;
  overflow: visible !important;
}
.sk-cert-modal .p-dialog-footer {
  padding: 4px 24px 22px !important;
  background: #ffffff;
  border-top: none !important;
  display: flex !important;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Character counter ── */
.sk-cert-counter {
  font-size: 10.5px;
  font-weight: 500;
  color: #9ca3af;
  transition: color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.sk-cert-counter--warn  { color: #d97706;
}
.sk-cert-counter--over  { color: #da2128; font-weight: 700;
}

/* ── BaseInput overrides ── */
.sk-cert-modal .bp-input,
.sk-cert-modal .p-inputtext:not(.p-datepicker-input) {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  color: #191a37 !important;
}
.sk-cert-modal .bp-input:focus,
.sk-cert-modal .p-inputtext:not(.p-datepicker-input):focus {
  border-color: #da2128 !important;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.09) !important;
}
.sk-cert-modal .bp-input::-moz-placeholder, .sk-cert-modal .p-inputtext:not(.p-datepicker-input)::-moz-placeholder { color: #b0b7c3 !important;
}
.sk-cert-modal .bp-input::placeholder,
.sk-cert-modal .p-inputtext:not(.p-datepicker-input)::placeholder { color: #b0b7c3 !important;
}
.sk-cert-modal .bp-form-group { gap: 0 !important;
}

/* Error state */
.sk-cert-field-err .bp-input,
.sk-cert-field-err .p-inputtext { border-color: #da2128 !important;
}

/* ── Cancel button ── */
.sk-cert-modal .bp-btn--outline {
  background: #fff !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}
.sk-cert-modal .bp-btn--outline:hover:not(:disabled) {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
}

/* ════════════════════════════════
   DatePicker — input field
   ════════════════════════════════ */
.sk-cert-dp-wrap { position: relative;
}
.sk-cert-dp-wrap .p-datepicker,
.sk-cert-dp-wrap .p-iconfield { width: 100%;
}
.sk-cert-dp-wrap .p-datepicker-input {
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 10px 38px 10px 12px !important;
  font-size: 13px !important;
  color: #191a37 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  font-family: inherit !important;
}
.sk-cert-dp-wrap .p-datepicker-input:focus {
  border-color: #da2128 !important;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.09) !important;
}
.sk-cert-dp-wrap .p-datepicker-input::-moz-placeholder { color: #b0b7c3 !important;
}
.sk-cert-dp-wrap .p-datepicker-input::placeholder { color: #b0b7c3 !important;
}

/* Calendar icon */
.sk-cert-dp-wrap .p-datepicker-icon,
.sk-cert-dp-wrap .p-inputicon {
  color: #9ca3af !important;
  width: 15px;
  height: 15px;
  pointer-events: none;
}

/* ════════════════════════════════
   DatePicker — calendar panel
   ════════════════════════════════ */
.sk-cert-dp-panel {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14) !important;
  overflow: hidden !important;
  padding: 0 !important;
  font-size: 13px !important;
  z-index: 9999 !important;
}

/* Header navigation bar */
.sk-cert-dp-panel .p-datepicker-header {
  background: #191a37 !important;
  color: #ffffff !important;
  padding: 10px 14px !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.sk-cert-dp-panel .p-datepicker-prev-button,
.sk-cert-dp-panel .p-datepicker-next-button {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.65) !important;
  width: 28px !important; height: 28px !important;
  border-radius: 6px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.12s !important;
}
.sk-cert-dp-panel .p-datepicker-prev-button:hover,
.sk-cert-dp-panel .p-datepicker-next-button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}
.sk-cert-dp-panel .p-datepicker-title {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
}
.sk-cert-dp-panel .p-datepicker-select-month,
.sk-cert-dp-panel .p-datepicker-select-year {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
  transition: background 0.12s !important;
}
.sk-cert-dp-panel .p-datepicker-select-month:hover,
.sk-cert-dp-panel .p-datepicker-select-year:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Day-of-week header row */
.sk-cert-dp-panel .p-datepicker-calendar-container { padding: 6px 10px 10px !important;
}
.sk-cert-dp-panel .p-datepicker-weekday {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 4px 0 6px !important;
  text-align: center !important;
}

/* Individual day buttons */
.sk-cert-dp-panel .p-datepicker-day {
  width: 32px !important; height: 32px !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #191a37 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: all 0.1s !important;
  margin: 1px !important;
}
.sk-cert-dp-panel .p-datepicker-day:hover:not([data-p-disabled="true"]):not([aria-selected="true"]) {
  background: #fee2e2 !important;
  color: #da2128 !important;
}

/* Selected day */
.sk-cert-dp-panel .p-datepicker-day[aria-selected="true"],
.sk-cert-dp-panel .p-datepicker-day.p-highlight {
  background: #da2128 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Today marker */
.sk-cert-dp-panel .p-datepicker-today .p-datepicker-day:not([aria-selected="true"]):not(.p-highlight) {
  border: 1.5px solid #da2128 !important;
  color: #da2128 !important;
  font-weight: 600 !important;
}

/* Other-month days */
.sk-cert-dp-panel .p-datepicker-day[data-p-other-month="true"] { color: #d1d5db !important;
}

/* Disabled days */
.sk-cert-dp-panel .p-datepicker-day[data-p-disabled="true"] {
  color: #e5e7eb !important;
  cursor: not-allowed !important;
}

/*
  Override BaseButton to match the dark-navy style from the reference design.
  Scoped to .sk-step-next so no other buttons are affected.
*/
.sk-step-next .bp-btn {
  background: #191a37;
  color: #fff;
  font-weight: 700;
  border: none;
  padding: 9px 18px;
}
.sk-step-next .bp-btn:hover:not(:disabled) {
  background: #2d2f5e;
}
.sk-step-next .bp-btn:focus-visible {
  outline: 2px solid #191a37;
  outline-offset: 2px;
}

/* .bp-alert centering + cursor rules live in src/styles/main.css globally */

/* Hide the hardcoded bell icon — it adds no context for action dialogs */
.bp-alert-header-icon {
  display: none !important;
}

/* ── BaseButton overrides for dark-card context ── */

/* Update My Skills — green primary */
.sk-submit-card .bp-btn:not(.bp-btn--outline) {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.sk-submit-card .bp-btn:not(.bp-btn--outline):hover:not(:disabled) {
  background: #047857 !important;
  border-color: #047857 !important;
}
.sk-submit-card .bp-btn:not(.bp-btn--outline):focus-visible {
  outline: 2px solid #6ee7b7;
  outline-offset: 2px;
}
.sk-submit-card .bp-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.sk-notice-modal.p-dialog {
  background: #ffffff !important;
  border: 1px solid #f0f1f5 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden;
}
.sk-notice-modal .p-dialog-header {
  padding: 0 !important;
  border-bottom: none !important;
  background: #ffffff !important;
}
/* Body is the only scrollable region — header/footer stay pinned so the
   long notice text scrolls internally instead of overflowing the dialog. */
.sk-notice-modal .p-dialog-content {
  padding: 0 !important;
  overflow-y: auto !important;
  max-height: 65vh;
}
.sk-notice-modal .p-dialog-footer {
  padding: 0 !important;
  border-top: none !important;
  background: #ffffff !important;
}

.sk-remind-modal.p-dialog {
  background: #ffffff !important;
  border: 1px solid #f0f1f5 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden;
}
.sk-remind-modal .p-dialog-header {
  padding: 0 !important;
  border-bottom: none !important;
}
/* Body is the only scrollable region — header/footer stay pinned via
   PrimeVue's own flex-shrink:0, so a long recipient list or a tall (resized)
   message box scrolls internally instead of the dialog overflowing or
   getting clipped past its rounded corners. */
.sk-remind-modal .p-dialog-content {
  padding: 0 !important;
  overflow-y: auto !important;
}
.sk-remind-modal .p-dialog-footer {
  padding: 0 !important;
  border-top: none !important;
}

/* ── Message textarea — match the reference design's field styling exactly.
     BaseTextarea sets `resize` as an inline style from the `resize` prop, so
     the drag handle to grow/shrink the box (like a native textarea) stays
     enabled here rather than being overridden. ── */
.sk-remind-modal .bp-textarea {
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #191a37;
  background: #ffffff;
  min-height: 128px;
  max-height: 40vh;
}
.sk-remind-modal .bp-textarea:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px #da2128;
}

.ef-fade-enter-active[data-v-29b648d8],
.ef-fade-leave-active[data-v-29b648d8] { transition: opacity 0.15s ease;
}
.ef-fade-enter-from[data-v-29b648d8],
.ef-fade-leave-to[data-v-29b648d8]     { opacity: 0;
}

/* Tooltip must appear above the skill-picker modal overlay (z-50 = 50).
   BaseTooltip teleports to <body> with position:fixed but no z-index (auto),
   which CSS paints below any element with an explicit z-index. */
.bp-tooltip { z-index: 9999;
}

/* Search input text/placeholder — plain CSS (not Tailwind utilities) so it
   stays visible even if this Teleported modal ever renders before/without
   the host's [data-mfe] scope attribute being present on <body>. */
.ef-skilltree-search { color: #334155;
}
.ef-skilltree-search::-moz-placeholder { color: #94a3b8;
}
.ef-skilltree-search::placeholder { color: #94a3b8;
}

/* Keep the red border visible for the entire time the panel is open.
   Clicking an option moves focus away from the trigger, stripping p-focus,
   so we anchor on bp-mselect-wrap--open (added by the shared component when
   the overlay is visible) and the trigger's aria-expanded as a fallback.
   Both rules need !important to beat the default border reset. */
.bp-mselect-wrap--open .bp-mselect.p-multiselect {
  border-color: #da2128 !important;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12) !important;
  outline: none !important;
}
.bp-mselect.p-multiselect[aria-expanded="true"],
.bp-mselect.p-multiselect.p-multiselect-open {
  border-color: #da2128 !important;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12) !important;
  outline: none !important;
}

/* Multiselects with no search box (e.g. Employment Type) render a bare
   toggle-all checkbox with nothing telling the user what it does — label it.
   Targets any BaseMultiSelect overlay header that has no filter container. */
.p-multiselect-overlay .p-multiselect-header:not(:has(.p-multiselect-filter-container))::after {
  content: 'Select All';
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

/* Search box inside each multiselect (Country, Market, Region, Language) —
   PrimeVue's own InputText rules (.p-inputtext:enabled:hover / :focus) read
   design-token CSS variables that are never defined because no theme preset
   is registered in main.js. That makes the var() reference invalid, so the
   browser drops the border-color/color declaration on hover and focus and
   falls back to unstyled defaults — an invisible border and white-on-white
   (browser default form-control) text. Hard-code every state so it never
   depends on those undefined tokens. !important beats PrimeVue's own rules,
   which are injected at runtime and can otherwise win on load order. */
.p-multiselect-overlay .p-multiselect-filter {
  border: 1px solid #c0c1cb !important;
  color: #1a1d35 !important;
  background-color: #fff !important;
}
.p-multiselect-overlay .p-multiselect-filter::-moz-placeholder {
  color: #9098b0 !important;
}
.p-multiselect-overlay .p-multiselect-filter::placeholder {
  color: #9098b0 !important;
}
.p-multiselect-overlay .p-multiselect-filter:hover {
  border-color: #a0a1ab !important;
  color: #1a1d35 !important;
}
.p-multiselect-overlay .p-multiselect-filter:focus {
  border-color: #da2128 !important;
  color: #1a1d35 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Checkbox checked/hover state — the "Select All" toggle-all checkbox in the
   header and every row checkbox use PrimeVue's own .p-checkbox-checked rule
   (this PrimeVue version puts the checked flag on the root .p-checkbox, not
   on .p-checkbox-box), which also reads undefined design tokens (no theme
   preset registered — see filter-box comment above). Once checked, that rule
   wins the cascade and its border/background compute to nothing, so the box
   disappears entirely. BaseMultiSelect's own CSS targets the wrong class
   (.p-checkbox-box.p-checked, which doesn't exist here) so it never patches
   this. Override with the correct class names, !important to always win. */
.p-multiselect-overlay .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
  border-color: #a0a1ab !important;
}
.p-multiselect-overlay .p-checkbox-checked .p-checkbox-box {
  background: #fff !important;
  border-color: #0d1526 !important;
}
.p-multiselect-overlay .p-checkbox-checked .p-checkbox-icon {
  color: #0d1526 !important;
}
.p-multiselect-overlay .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
  background: #fff !important;
  border-color: #0d1526 !important;
}

/* ── Department multi-select — custom group header + polished child rows ────
   Namespaced via panelClass="sk-dept-overlay" so these rules only touch the
   Department picker, never the other BaseMultiSelects on this card. Ported
   from bizplus-forecast's ForecastView.vue Department picker verbatim. */
.sk-dept-overlay .p-multiselect-option-group {
  padding: 0 !important;
  background: transparent !important;
}
.sk-dept-overlay .sk-dept-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  background: #f1f5fb;
  border-top: 1px solid #dfe4ee;
  border-bottom: 1px solid #dfe4ee;
  font-weight: 700;
  color: #0f172a;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  line-height: 1.2;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background 0.12s, border-color 0.12s;
}
.sk-dept-overlay .p-multiselect-option-group:first-child .sk-dept-group-header {
  border-top: 0;
}
.sk-dept-overlay .sk-dept-group-header:hover {
  background: #e7edf7;
}
.sk-dept-overlay .sk-dept-group-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid #94a3b8;
  border-radius: 4px;
  background: #fff;
  transition: background 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.sk-dept-overlay .sk-dept-group-check.is-checked,
.sk-dept-overlay .sk-dept-group-check.is-partial {
  background: #da2128;
  border-color: #da2128;
  color: #fff;
}
.sk-dept-overlay .sk-dept-group-dash {
  width: 8px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}
.sk-dept-overlay .sk-dept-group-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sk-dept-overlay .sk-dept-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.sk-dept-overlay .p-multiselect-option {
  padding: 8px 14px 8px 40px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  border-left: 3px solid transparent;
  gap: 10px !important;
}
.sk-dept-overlay {
  min-width:  280px;
  min-height: 200px;
  max-height: 420px;
}
.sk-dept-overlay .p-multiselect-items-wrapper {
  max-height: 340px !important;
  overflow-y: auto !important;
}
.sk-dept-overlay .p-multiselect-option:hover {
  border-left-color: #da2128;
}
.sk-dept-overlay .p-multiselect-option.p-selected {
  border-left-color: #da2128;
  background-color: #fff3f3 !important;
}

/* ── Wrapper ── */
.bp-tbl-wrap { display: flex; flex-direction: column;
}
.bp-tbl-scroll { overflow-x: auto; border-radius: 10px; border: 1px solid #e4e7f0;
}

/* ── Table base ── */
.bp-tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
  font-weight: 600;
  color: #1a1d35;
  background: #fff;
  /* min-width is set inline from the sum of the declared column widths —
     see tableMinWidth in the script block. */
}

/* ── Header: sort row ── */
.bp-tbl-thead-sort { background: #191a37;
}
.bp-tbl-th {
  padding: 0;
  border-bottom: 2px solid #2d2f52;
  white-space: nowrap;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.bp-tbl-th--sortable { cursor: pointer;
}
.bp-tbl-th--sortable:hover { background: #23254a;
}
.bp-tbl-th--left   { text-align: left;
}
.bp-tbl-th--right  { text-align: right;
}
.bp-tbl-th--center { text-align: center;
}
.bp-tbl-th-inner {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 11px 14px;
}
.bp-tbl-th--right  .bp-tbl-th-inner { justify-content: flex-end;
}
.bp-tbl-th--center .bp-tbl-th-inner { justify-content: center;
}
.bp-tbl-th-label { flex: 1;
}
.bp-tbl-sort-icon { color: #da2128; flex-shrink: 0; display: flex;
}
.bp-tbl-sort-icon--idle { color: #4e5a82;
}

/* ── Header: search row ── */
.bp-tbl-thead-search { background: #f9fafc;
}
.bp-tbl-th-search {
  padding: 6px 8px;
  border-bottom: 1px solid #e4e7f0;
  vertical-align: middle;
}
.bp-tbl-search-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  padding: 0 7px;
  height: 28px;
  transition: border-color 0.15s;
}
.bp-tbl-search-wrap:focus-within {
  border-color: #da2128;
  box-shadow: 0 0 0 2px rgba(218, 33, 40, 0.08);
}
.bp-tbl-search-icon { color: #9098b0; flex-shrink: 0;
}
.bp-tbl-search-input {
  border: none;
  outline: none;
  font-size: 11.5px;
  color: #1a1d35;
  background: transparent;
  width: 100%;
  min-width: 0;
  font-family: inherit;
}
.bp-tbl-search-input::-moz-placeholder { color: #c4c9de;
}
.bp-tbl-search-input::placeholder { color: #c4c9de;
}
.bp-tbl-search-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: #9098b0;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}
.bp-tbl-search-clear:hover { color: #da2128;
}

/* ── Body rows ── */
.bp-tbl-row { transition: background 0.12s;
}
.bp-tbl-row:nth-child(odd)  { background: #fff;
}
.bp-tbl-row:nth-child(even) { background: #f4f4f7;
}
.bp-tbl-row:hover { background: #fdf5f5;
}
.bp-tbl-td {
  padding: 11px 14px;
  vertical-align: middle;
}
.bp-tbl-td--clip   { overflow: hidden;
}
.bp-tbl-td--right  { text-align: right;
}
.bp-tbl-td--center { text-align: center;
}
.bp-tbl-cell-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Status badge ── */
.bp-tbl-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.bp-tbl-status-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.bp-tbl-status--draft      { background: rgba(250,204,21,0.15); color: #b45309;
}
.bp-tbl-status--draft      .bp-tbl-status-dot { background: #f59e0b;
}
.bp-tbl-status--active     { background: rgba(34,197,94,0.12);  color: #15803d;
}
.bp-tbl-status--active     .bp-tbl-status-dot { background: #22c55e;
}
.bp-tbl-status--closed     { background: rgba(107,114,128,0.12); color: #374151;
}
.bp-tbl-status--closed     .bp-tbl-status-dot { background: #9ca3af;
}
.bp-tbl-status--approved   { background: rgba(34,197,94,0.12);  color: #15803d;
}
.bp-tbl-status--approved   .bp-tbl-status-dot { background: #22c55e;
}
.bp-tbl-status--completed  { background: rgba(59,130,246,0.12); color: #1d4ed8;
}
.bp-tbl-status--completed  .bp-tbl-status-dot { background: #3b82f6;
}

/* ── Empty state ── */
.bp-tbl-td-empty { text-align: center; padding: 48px 20px;
}
.bp-tbl-empty { display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.bp-tbl-empty-icon { color: #c4c9de;
}
.bp-tbl-empty p { font-size: 13px; color: #9098b0; margin: 0;
}

/* ── Footer ── */
.bp-tbl-footer { display: flex; justify-content: flex-end; padding: 8px 4px 0;
}
.bp-tbl-count { font-size: 11.5px; color: #9098b0;
}

/* ── Expandable match cells (Skills / Certifications) ────────────────────── */

/* Animating to a content-dependent height needs a measurable property.
   grid-template-rows 0fr → 1fr animates the row to exactly its content
   height without hard-coding a max-height that would clip long lists or
   leave dead space on short ones. The inner wrapper does the clipping;
   min-height:0 is what lets a grid item actually shrink below its content. */
.bp-match-expand {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 260ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 180ms ease;
}
.bp-match-expand--open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.bp-match-expand > div {
  overflow: hidden;
  min-height: 0;
}
.bp-match-toggle {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  color: #475569;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.bp-match-toggle:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
.bp-match-toggle:focus-visible {
  outline: 2px solid #da2128;
  outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
.bp-match-expand { transition: none;
}
.bp-match-toggle { transition: none;
}
}

/* ── Header swap while a selection is active ─────────────────────────────────
   Matches My Team: the bulk bar ("N selected · Clear · Send reminder") stands
   in for the table's own label/sort header row rather than living alongside it.
   Uses visibility:collapse rather than display:none — the table is
   table-layout:fixed and column widths (incl. the 40px checkbox column) are
   derived from this header row's cell widths; display:none would drop the row
   from that calculation entirely and resize every column the moment a row got
   selected. visibility:collapse hides the row and its space without affecting
   column-width calculation.

   The per-column search row is deliberately left alone — unlike My Team, this
   table's search lives inside the header, and hiding it would take the user's
   filtering controls away mid-selection. */
.sk-report-table.has-selection .bp-tbl-thead-sort {
  visibility: collapse;
}

/* ── Sort icon improvements ──────────────────────────────────────────────── */

/* Idle indicator: replace the faint double-chevron with a clearer ⇅ arrow */
.bp-tbl-sort-icon svg.bp-tbl-sort-icon--idle {
  display: none;
}
.bp-tbl-sort-icon:has(.bp-tbl-sort-icon--idle)::after {
  content: '⇅';
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
}
.bp-tbl-th--sortable:hover .bp-tbl-sort-icon:has(.bp-tbl-sort-icon--idle)::after {
  color: rgba(255, 255, 255, 0.85);
}

/* Active sort (asc or desc): brighter red + slightly larger chevron */
.bp-tbl-sort-icon:not(:has(.bp-tbl-sort-icon--idle)) {
  color: #ff3040 !important;
}
.bp-tbl-sort-icon:not(:has(.bp-tbl-sort-icon--idle)) svg {
  width: 15px !important;
  height: 15px !important;
}

/* ── Sort icon improvements ──────────────────────────────────────────────── */

/* Idle indicator: replace the faint double-chevron with a clearer ⇅ arrow */
.bp-tbl-sort-icon svg.bp-tbl-sort-icon--idle {
  display: none;
}
.bp-tbl-sort-icon:has(.bp-tbl-sort-icon--idle)::after {
  content: '⇅';
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.45);
}
.bp-tbl-th--sortable:hover .bp-tbl-sort-icon:has(.bp-tbl-sort-icon--idle)::after {
  color: rgba(255, 255, 255, 0.85);
}

/* Active sort (asc or desc): brighter red + slightly larger chevron */
.bp-tbl-sort-icon:not(:has(.bp-tbl-sort-icon--idle)) {
  color: #ff3040 !important;
}
.bp-tbl-sort-icon:not(:has(.bp-tbl-sort-icon--idle)) svg {
  width: 15px !important;
  height: 15px !important;
}

/* ── Checkbox column pinned to the left edge ────────────────────────────────
   Scoped to .sk-myteam-table only — BaseTable is shared across other views
   in this app and must keep its normal (non-sticky) first column elsewhere.
   Sticky keeps the checkbox cell aligned under the absolutely-positioned
   select-all overlay button even while the table scrolls horizontally. */
.sk-myteam-table .bp-tbl-th:first-child,
.sk-myteam-table .bp-tbl-td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}
.sk-myteam-table .bp-tbl-th:first-child {
  background: #191a37;
}
.sk-myteam-table .bp-tbl-td:first-child {
  background: #ffffff;
}

/* ── Header swap while a selection is active ─────────────────────────────────
   Matches the reference mockup: the bulk bar ("N selected · Clear · Send
   reminder") stands in for the table's own header row rather than living
   alongside it. Uses visibility:collapse rather than display:none — the
   table is table-layout:fixed and column widths (incl. the 40px checkbox
   column) are derived from this header row's cell widths; display:none would
   drop the row from that calculation entirely and cause every column to
   resize the moment a row gets selected. visibility:collapse hides the row
   and its space without affecting column-width calculation. */
.sk-myteam-table.has-selection .bp-tbl-thead-sort {
  visibility: collapse;
}

/* position:sticky cells don't fully honour visibility:collapse on their
   ancestor <tr> in some browsers — the sticky checkbox header cell keeps
   painting its border-bottom, leaving a stray line between the bulk bar and
   the first row. Zero it explicitly while collapsed. */
.sk-myteam-table.has-selection .bp-tbl-th:first-child {
  border-bottom: none;
}
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
:where([data-mfe="skillsApp"]) .pointer-events-none {
  pointer-events: none;
}
:where([data-mfe="skillsApp"]) .visible {
  visibility: visible;
}
:where([data-mfe="skillsApp"]) .invisible {
  visibility: hidden;
}
:where([data-mfe="skillsApp"]) .collapse {
  visibility: collapse;
}
:where([data-mfe="skillsApp"]) .static {
  position: static;
}
:where([data-mfe="skillsApp"]) .fixed {
  position: fixed;
}
:where([data-mfe="skillsApp"]) .absolute {
  position: absolute;
}
:where([data-mfe="skillsApp"]) .relative {
  position: relative;
}
:where([data-mfe="skillsApp"]) .sticky {
  position: sticky;
}
:where([data-mfe="skillsApp"]) .inset-0 {
  inset: 0px;
}
:where([data-mfe="skillsApp"]) .bottom-full {
  bottom: 100%;
}
:where([data-mfe="skillsApp"]) .left-0 {
  left: 0px;
}
:where([data-mfe="skillsApp"]) .left-2\.5 {
  left: 0.625rem;
}
:where([data-mfe="skillsApp"]) .left-3 {
  left: 0.75rem;
}
:where([data-mfe="skillsApp"]) .left-\[15px\] {
  left: 15px;
}
:where([data-mfe="skillsApp"]) .right-0 {
  right: 0px;
}
:where([data-mfe="skillsApp"]) .right-2 {
  right: 0.5rem;
}
:where([data-mfe="skillsApp"]) .right-2\.5 {
  right: 0.625rem;
}
:where([data-mfe="skillsApp"]) .top-0 {
  top: 0px;
}
:where([data-mfe="skillsApp"]) .top-1\/2 {
  top: 50%;
}
:where([data-mfe="skillsApp"]) .top-2\.5 {
  top: 0.625rem;
}
:where([data-mfe="skillsApp"]) .top-9 {
  top: 2.25rem;
}
:where([data-mfe="skillsApp"]) .top-\[10px\] {
  top: 10px;
}
:where([data-mfe="skillsApp"]) .z-10 {
  z-index: 10;
}
:where([data-mfe="skillsApp"]) .z-20 {
  z-index: 20;
}
:where([data-mfe="skillsApp"]) .z-30 {
  z-index: 30;
}
:where([data-mfe="skillsApp"]) .z-50 {
  z-index: 50;
}
:where([data-mfe="skillsApp"]) .z-\[80\] {
  z-index: 80;
}
:where([data-mfe="skillsApp"]) .m-0 {
  margin: 0px;
}
:where([data-mfe="skillsApp"]) .mx-auto {
  margin-left: auto;
  margin-right: auto;
}
:where([data-mfe="skillsApp"]) .mb-1\.5 {
  margin-bottom: 0.375rem;
}
:where([data-mfe="skillsApp"]) .mb-2 {
  margin-bottom: 0.5rem;
}
:where([data-mfe="skillsApp"]) .mb-3 {
  margin-bottom: 0.75rem;
}
:where([data-mfe="skillsApp"]) .mb-3\.5 {
  margin-bottom: 0.875rem;
}
:where([data-mfe="skillsApp"]) .mb-4 {
  margin-bottom: 1rem;
}
:where([data-mfe="skillsApp"]) .mb-5 {
  margin-bottom: 1.25rem;
}
:where([data-mfe="skillsApp"]) .mb-6 {
  margin-bottom: 1.5rem;
}
:where([data-mfe="skillsApp"]) .mb-\[14px\] {
  margin-bottom: 14px;
}
:where([data-mfe="skillsApp"]) .mb-\[18px\] {
  margin-bottom: 18px;
}
:where([data-mfe="skillsApp"]) .mb-\[22px\] {
  margin-bottom: 22px;
}
:where([data-mfe="skillsApp"]) .mb-\[3px\] {
  margin-bottom: 3px;
}
:where([data-mfe="skillsApp"]) .mb-\[5px\] {
  margin-bottom: 5px;
}
:where([data-mfe="skillsApp"]) .ml-auto {
  margin-left: auto;
}
:where([data-mfe="skillsApp"]) .mr-2 {
  margin-right: 0.5rem;
}
:where([data-mfe="skillsApp"]) .mt-0 {
  margin-top: 0px;
}
:where([data-mfe="skillsApp"]) .mt-0\.5 {
  margin-top: 0.125rem;
}
:where([data-mfe="skillsApp"]) .mt-1 {
  margin-top: 0.25rem;
}
:where([data-mfe="skillsApp"]) .mt-1\.5 {
  margin-top: 0.375rem;
}
:where([data-mfe="skillsApp"]) .mt-2 {
  margin-top: 0.5rem;
}
:where([data-mfe="skillsApp"]) .mt-2\.5 {
  margin-top: 0.625rem;
}
:where([data-mfe="skillsApp"]) .mt-3 {
  margin-top: 0.75rem;
}
:where([data-mfe="skillsApp"]) .mt-4 {
  margin-top: 1rem;
}
:where([data-mfe="skillsApp"]) .mt-5 {
  margin-top: 1.25rem;
}
:where([data-mfe="skillsApp"]) .mt-6 {
  margin-top: 1.5rem;
}
:where([data-mfe="skillsApp"]) .mt-\[2px\] {
  margin-top: 2px;
}
:where([data-mfe="skillsApp"]) .mt-\[3px\] {
  margin-top: 3px;
}
:where([data-mfe="skillsApp"]) .mt-\[5px\] {
  margin-top: 5px;
}
:where([data-mfe="skillsApp"]) .block {
  display: block;
}
:where([data-mfe="skillsApp"]) .inline-block {
  display: inline-block;
}
:where([data-mfe="skillsApp"]) .inline {
  display: inline;
}
:where([data-mfe="skillsApp"]) .flex {
  display: flex;
}
:where([data-mfe="skillsApp"]) .inline-flex {
  display: inline-flex;
}
:where([data-mfe="skillsApp"]) .table {
  display: table;
}
:where([data-mfe="skillsApp"]) .grid {
  display: grid;
}
:where([data-mfe="skillsApp"]) .contents {
  display: contents;
}
:where([data-mfe="skillsApp"]) .hidden {
  display: none;
}
:where([data-mfe="skillsApp"]) .h-1 {
  height: 0.25rem;
}
:where([data-mfe="skillsApp"]) .h-1\.5 {
  height: 0.375rem;
}
:where([data-mfe="skillsApp"]) .h-12 {
  height: 3rem;
}
:where([data-mfe="skillsApp"]) .h-14 {
  height: 3.5rem;
}
:where([data-mfe="skillsApp"]) .h-2 {
  height: 0.5rem;
}
:where([data-mfe="skillsApp"]) .h-2\.5 {
  height: 0.625rem;
}
:where([data-mfe="skillsApp"]) .h-3 {
  height: 0.75rem;
}
:where([data-mfe="skillsApp"]) .h-3\.5 {
  height: 0.875rem;
}
:where([data-mfe="skillsApp"]) .h-4 {
  height: 1rem;
}
:where([data-mfe="skillsApp"]) .h-5 {
  height: 1.25rem;
}
:where([data-mfe="skillsApp"]) .h-6 {
  height: 1.5rem;
}
:where([data-mfe="skillsApp"]) .h-7 {
  height: 1.75rem;
}
:where([data-mfe="skillsApp"]) .h-8 {
  height: 2rem;
}
:where([data-mfe="skillsApp"]) .h-9 {
  height: 2.25rem;
}
:where([data-mfe="skillsApp"]) .h-\[10px\] {
  height: 10px;
}
:where([data-mfe="skillsApp"]) .h-\[18px\] {
  height: 18px;
}
:where([data-mfe="skillsApp"]) .h-\[22px\] {
  height: 22px;
}
:where([data-mfe="skillsApp"]) .h-\[23px\] {
  height: 23px;
}
:where([data-mfe="skillsApp"]) .h-\[26px\] {
  height: 26px;
}
:where([data-mfe="skillsApp"]) .h-\[28px\] {
  height: 28px;
}
:where([data-mfe="skillsApp"]) .h-\[30px\] {
  height: 30px;
}
:where([data-mfe="skillsApp"]) .h-\[38px\] {
  height: 38px;
}
:where([data-mfe="skillsApp"]) .h-\[40px\] {
  height: 40px;
}
:where([data-mfe="skillsApp"]) .h-\[42px\] {
  height: 42px;
}
:where([data-mfe="skillsApp"]) .h-\[46px\] {
  height: 46px;
}
:where([data-mfe="skillsApp"]) .h-\[58px\] {
  height: 58px;
}
:where([data-mfe="skillsApp"]) .h-full {
  height: 100%;
}
:where([data-mfe="skillsApp"]) .max-h-64 {
  max-height: 16rem;
}
:where([data-mfe="skillsApp"]) .max-h-\[300px\] {
  max-height: 300px;
}
:where([data-mfe="skillsApp"]) .max-h-\[80vh\] {
  max-height: 80vh;
}
:where([data-mfe="skillsApp"]) .min-h-\[140px\] {
  min-height: 140px;
}
:where([data-mfe="skillsApp"]) .min-h-screen {
  min-height: 100vh;
}
:where([data-mfe="skillsApp"]) .w-1\.5 {
  width: 0.375rem;
}
:where([data-mfe="skillsApp"]) .w-12 {
  width: 3rem;
}
:where([data-mfe="skillsApp"]) .w-14 {
  width: 3.5rem;
}
:where([data-mfe="skillsApp"]) .w-16 {
  width: 4rem;
}
:where([data-mfe="skillsApp"]) .w-2 {
  width: 0.5rem;
}
:where([data-mfe="skillsApp"]) .w-2\.5 {
  width: 0.625rem;
}
:where([data-mfe="skillsApp"]) .w-20 {
  width: 5rem;
}
:where([data-mfe="skillsApp"]) .w-24 {
  width: 6rem;
}
:where([data-mfe="skillsApp"]) .w-3 {
  width: 0.75rem;
}
:where([data-mfe="skillsApp"]) .w-3\.5 {
  width: 0.875rem;
}
:where([data-mfe="skillsApp"]) .w-4 {
  width: 1rem;
}
:where([data-mfe="skillsApp"]) .w-5 {
  width: 1.25rem;
}
:where([data-mfe="skillsApp"]) .w-52 {
  width: 13rem;
}
:where([data-mfe="skillsApp"]) .w-6 {
  width: 1.5rem;
}
:where([data-mfe="skillsApp"]) .w-7 {
  width: 1.75rem;
}
:where([data-mfe="skillsApp"]) .w-8 {
  width: 2rem;
}
:where([data-mfe="skillsApp"]) .w-9 {
  width: 2.25rem;
}
:where([data-mfe="skillsApp"]) .w-\[100px\] {
  width: 100px;
}
:where([data-mfe="skillsApp"]) .w-\[18px\] {
  width: 18px;
}
:where([data-mfe="skillsApp"]) .w-\[22px\] {
  width: 22px;
}
:where([data-mfe="skillsApp"]) .w-\[23px\] {
  width: 23px;
}
:where([data-mfe="skillsApp"]) .w-\[26px\] {
  width: 26px;
}
:where([data-mfe="skillsApp"]) .w-\[30px\] {
  width: 30px;
}
:where([data-mfe="skillsApp"]) .w-\[38px\] {
  width: 38px;
}
:where([data-mfe="skillsApp"]) .w-\[42px\] {
  width: 42px;
}
:where([data-mfe="skillsApp"]) .w-\[46px\] {
  width: 46px;
}
:where([data-mfe="skillsApp"]) .w-\[50px\] {
  width: 50px;
}
:where([data-mfe="skillsApp"]) .w-\[58px\] {
  width: 58px;
}
:where([data-mfe="skillsApp"]) .w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
:where([data-mfe="skillsApp"]) .w-full {
  width: 100%;
}
:where([data-mfe="skillsApp"]) .min-w-0 {
  min-width: 0px;
}
:where([data-mfe="skillsApp"]) .min-w-\[140px\] {
  min-width: 140px;
}
:where([data-mfe="skillsApp"]) .min-w-\[150px\] {
  min-width: 150px;
}
:where([data-mfe="skillsApp"]) .min-w-\[160px\] {
  min-width: 160px;
}
:where([data-mfe="skillsApp"]) .min-w-\[200px\] {
  min-width: 200px;
}
:where([data-mfe="skillsApp"]) .min-w-\[20px\] {
  min-width: 20px;
}
:where([data-mfe="skillsApp"]) .min-w-\[220px\] {
  min-width: 220px;
}
:where([data-mfe="skillsApp"]) .min-w-\[22px\] {
  min-width: 22px;
}
:where([data-mfe="skillsApp"]) .min-w-\[230px\] {
  min-width: 230px;
}
:where([data-mfe="skillsApp"]) .min-w-\[240px\] {
  min-width: 240px;
}
:where([data-mfe="skillsApp"]) .max-w-3xl {
  max-width: 48rem;
}
:where([data-mfe="skillsApp"]) .max-w-\[180px\] {
  max-width: 180px;
}
:where([data-mfe="skillsApp"]) .max-w-\[42ch\] {
  max-width: 42ch;
}
:where([data-mfe="skillsApp"]) .max-w-\[44ch\] {
  max-width: 44ch;
}
:where([data-mfe="skillsApp"]) .max-w-\[560px\] {
  max-width: 560px;
}
:where([data-mfe="skillsApp"]) .max-w-\[60ch\] {
  max-width: 60ch;
}
:where([data-mfe="skillsApp"]) .max-w-\[62ch\] {
  max-width: 62ch;
}
:where([data-mfe="skillsApp"]) .max-w-\[70ch\] {
  max-width: 70ch;
}
:where([data-mfe="skillsApp"]) .max-w-\[820px\] {
  max-width: 820px;
}
:where([data-mfe="skillsApp"]) .max-w-full {
  max-width: 100%;
}
:where([data-mfe="skillsApp"]) .max-w-sm {
  max-width: 24rem;
}
:where([data-mfe="skillsApp"]) .flex-1 {
  flex: 1 1 0%;
}
:where([data-mfe="skillsApp"]) .flex-shrink {
  flex-shrink: 1;
}
:where([data-mfe="skillsApp"]) .flex-shrink-0 {
  flex-shrink: 0;
}
:where([data-mfe="skillsApp"]) .shrink {
  flex-shrink: 1;
}
:where([data-mfe="skillsApp"]) .shrink-0 {
  flex-shrink: 0;
}
:where([data-mfe="skillsApp"]) .grow {
  flex-grow: 1;
}
:where([data-mfe="skillsApp"]) .border-collapse {
  border-collapse: collapse;
}
:where([data-mfe="skillsApp"]) .-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:where([data-mfe="skillsApp"]) .-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:where([data-mfe="skillsApp"]) .rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:where([data-mfe="skillsApp"]) .rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:where([data-mfe="skillsApp"]) .transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
:where([data-mfe="skillsApp"]) .animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
:where([data-mfe="skillsApp"]) .animate-spin {
  animation: spin 1s linear infinite;
}
:where([data-mfe="skillsApp"]) .cursor-default {
  cursor: default;
}
:where([data-mfe="skillsApp"]) .cursor-not-allowed {
  cursor: not-allowed;
}
:where([data-mfe="skillsApp"]) .cursor-pointer {
  cursor: pointer;
}
:where([data-mfe="skillsApp"]) .select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
:where([data-mfe="skillsApp"]) .select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
:where([data-mfe="skillsApp"]) .resize {
  resize: both;
}
:where([data-mfe="skillsApp"]) .list-disc {
  list-style-type: disc;
}
:where([data-mfe="skillsApp"]) .list-none {
  list-style-type: none;
}
:where([data-mfe="skillsApp"]) .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
:where([data-mfe="skillsApp"]) .grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
:where([data-mfe="skillsApp"]) .flex-col {
  flex-direction: column;
}
:where([data-mfe="skillsApp"]) .flex-col-reverse {
  flex-direction: column-reverse;
}
:where([data-mfe="skillsApp"]) .flex-wrap {
  flex-wrap: wrap;
}
:where([data-mfe="skillsApp"]) .items-start {
  align-items: flex-start;
}
:where([data-mfe="skillsApp"]) .items-end {
  align-items: flex-end;
}
:where([data-mfe="skillsApp"]) .items-center {
  align-items: center;
}
:where([data-mfe="skillsApp"]) .items-baseline {
  align-items: baseline;
}
:where([data-mfe="skillsApp"]) .justify-end {
  justify-content: flex-end;
}
:where([data-mfe="skillsApp"]) .justify-center {
  justify-content: center;
}
:where([data-mfe="skillsApp"]) .justify-between {
  justify-content: space-between;
}
:where([data-mfe="skillsApp"]) .gap-0\.5 {
  gap: 0.125rem;
}
:where([data-mfe="skillsApp"]) .gap-1 {
  gap: 0.25rem;
}
:where([data-mfe="skillsApp"]) .gap-1\.5 {
  gap: 0.375rem;
}
:where([data-mfe="skillsApp"]) .gap-2 {
  gap: 0.5rem;
}
:where([data-mfe="skillsApp"]) .gap-2\.5 {
  gap: 0.625rem;
}
:where([data-mfe="skillsApp"]) .gap-3 {
  gap: 0.75rem;
}
:where([data-mfe="skillsApp"]) .gap-3\.5 {
  gap: 0.875rem;
}
:where([data-mfe="skillsApp"]) .gap-4 {
  gap: 1rem;
}
:where([data-mfe="skillsApp"]) .gap-5 {
  gap: 1.25rem;
}
:where([data-mfe="skillsApp"]) .gap-\[10px\] {
  gap: 10px;
}
:where([data-mfe="skillsApp"]) .gap-\[14px\] {
  gap: 14px;
}
:where([data-mfe="skillsApp"]) .gap-\[6px\] {
  gap: 6px;
}
:where([data-mfe="skillsApp"]) .gap-\[7px\] {
  gap: 7px;
}
:where([data-mfe="skillsApp"]) .gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}
:where([data-mfe="skillsApp"]) .gap-y-1 {
  row-gap: 0.25rem;
}
:where([data-mfe="skillsApp"]) :is(.space-y-1 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
:where([data-mfe="skillsApp"]) :is(.space-y-1\.5 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
:where([data-mfe="skillsApp"]) :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
:where([data-mfe="skillsApp"]) .self-start {
  align-self: flex-start;
}
:where([data-mfe="skillsApp"]) .overflow-hidden {
  overflow: hidden;
}
:where([data-mfe="skillsApp"]) .overflow-x-auto {
  overflow-x: auto;
}
:where([data-mfe="skillsApp"]) .overflow-y-auto {
  overflow-y: auto;
}
:where([data-mfe="skillsApp"]) .overflow-y-scroll {
  overflow-y: scroll;
}
:where([data-mfe="skillsApp"]) .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where([data-mfe="skillsApp"]) .text-ellipsis {
  text-overflow: ellipsis;
}
:where([data-mfe="skillsApp"]) .whitespace-nowrap {
  white-space: nowrap;
}
:where([data-mfe="skillsApp"]) .break-words {
  overflow-wrap: break-word;
}
:where([data-mfe="skillsApp"]) .rounded {
  border-radius: 0.25rem;
}
:where([data-mfe="skillsApp"]) .rounded-2xl {
  border-radius: 1rem;
}
:where([data-mfe="skillsApp"]) .rounded-\[10px\] {
  border-radius: 10px;
}
:where([data-mfe="skillsApp"]) .rounded-\[11px\] {
  border-radius: 11px;
}
:where([data-mfe="skillsApp"]) .rounded-\[12px\] {
  border-radius: 12px;
}
:where([data-mfe="skillsApp"]) .rounded-\[14px\] {
  border-radius: 14px;
}
:where([data-mfe="skillsApp"]) .rounded-\[5px\] {
  border-radius: 5px;
}
:where([data-mfe="skillsApp"]) .rounded-\[6px\] {
  border-radius: 6px;
}
:where([data-mfe="skillsApp"]) .rounded-\[9px\] {
  border-radius: 9px;
}
:where([data-mfe="skillsApp"]) .rounded-full {
  border-radius: 9999px;
}
:where([data-mfe="skillsApp"]) .rounded-lg {
  border-radius: 0.5rem;
}
:where([data-mfe="skillsApp"]) .rounded-md {
  border-radius: 0.375rem;
}
:where([data-mfe="skillsApp"]) .rounded-sm {
  border-radius: 0.125rem;
}
:where([data-mfe="skillsApp"]) .rounded-xl {
  border-radius: 0.75rem;
}
:where([data-mfe="skillsApp"]) .rounded-b-\[10px\] {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
:where([data-mfe="skillsApp"]) .rounded-b-none {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
:where([data-mfe="skillsApp"]) .border {
  border-width: 1px;
}
:where([data-mfe="skillsApp"]) .border-0 {
  border-width: 0px;
}
:where([data-mfe="skillsApp"]) .border-\[1\.5px\] {
  border-width: 1.5px;
}
:where([data-mfe="skillsApp"]) .border-b {
  border-bottom-width: 1px;
}
:where([data-mfe="skillsApp"]) .border-l {
  border-left-width: 1px;
}
:where([data-mfe="skillsApp"]) .border-l-\[3px\] {
  border-left-width: 3px;
}
:where([data-mfe="skillsApp"]) .border-r {
  border-right-width: 1px;
}
:where([data-mfe="skillsApp"]) .border-t {
  border-top-width: 1px;
}
:where([data-mfe="skillsApp"]) .border-dashed {
  border-style: dashed;
}
:where([data-mfe="skillsApp"]) .border-none {
  border-style: none;
}
:where([data-mfe="skillsApp"]) .border-\[\#0d1526\] {
  --tw-border-opacity: 1;
  border-color: rgb(13 21 38 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-\[\#191a37\] {
  --tw-border-opacity: 1;
  border-color: rgb(25 26 55 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-\[\#262852\] {
  --tw-border-opacity: 1;
  border-color: rgb(38 40 82 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-\[\#a0a1ab\] {
  --tw-border-opacity: 1;
  border-color: rgb(160 161 171 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-\[\#c0c1cb\] {
  --tw-border-opacity: 1;
  border-color: rgb(192 193 203 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-\[\#cbd5e1\] {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-\[\#e5e7eb\] {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-\[\#eef0f5\] {
  --tw-border-opacity: 1;
  border-color: rgb(238 240 245 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-\[\#fca5a5\] {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-amber-100 {
  --tw-border-opacity: 1;
  border-color: rgb(254 243 199 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-brand-ink {
  --tw-border-opacity: 1;
  border-color: rgb(25 26 55 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-brand-red {
  --tw-border-opacity: 1;
  border-color: rgb(218 33 40 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-transparent {
  border-color: transparent;
}
:where([data-mfe="skillsApp"]) .border-l-amber-600 {
  --tw-border-opacity: 1;
  border-left-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-l-brand-ink {
  --tw-border-opacity: 1;
  border-left-color: rgb(25 26 55 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-l-brand-red {
  --tw-border-opacity: 1;
  border-left-color: rgb(218 33 40 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .border-l-emerald-600 {
  --tw-border-opacity: 1;
  border-left-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-\[\#0d1526\] {
  --tw-bg-opacity: 1;
  background-color: rgb(13 21 38 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-\[\#191a37\] {
  --tw-bg-opacity: 1;
  background-color: rgb(25 26 55 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-\[\#262852\] {
  --tw-bg-opacity: 1;
  background-color: rgb(38 40 82 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-\[\#dcfce7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-\[\#eef0f5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 240 245 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-\[\#f1f1f5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(241 241 245 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-\[\#f1f5f9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-\[\#f4f5f9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 245 249 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-\[\#fafbfc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 252 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-\[\#fafbff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 255 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-\[\#fee2e2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-\[\#fef3c7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-\[\#fff5f5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 245 245 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-\[rgba\(217\2c 119\2c 6\2c 0\.3\)\] {
  background-color: rgba(217,119,6,0.3);
}
:where([data-mfe="skillsApp"]) .bg-\[rgba\(5\2c 150\2c 105\2c 0\.3\)\] {
  background-color: rgba(5,150,105,0.3);
}
:where([data-mfe="skillsApp"]) .bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-black\/10 {
  background-color: rgb(0 0 0 / 0.1);
}
:where([data-mfe="skillsApp"]) .bg-brand-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(25 26 55 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-brand-red {
  --tw-bg-opacity: 1;
  background-color: rgb(218 33 40 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-brand-red-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-cyan-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-cyan-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 254 255 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-cyan-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-fuchsia-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 232 255 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-fuchsia-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 244 255 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-fuchsia-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 70 239 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-lime-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 252 203 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-lime-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(247 254 231 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-lime-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(132 204 22 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-red-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 165 165 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-rose-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-rose-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-sky-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-sky-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-sky-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-slate-50\/40 {
  background-color: rgb(248 250 252 / 0.4);
}
:where([data-mfe="skillsApp"]) .bg-slate-50\/50 {
  background-color: rgb(248 250 252 / 0.5);
}
:where([data-mfe="skillsApp"]) .bg-slate-50\/70 {
  background-color: rgb(248 250 252 / 0.7);
}
:where([data-mfe="skillsApp"]) .bg-slate-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-teal-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-teal-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 250 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-teal-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-transparent {
  background-color: transparent;
}
:where([data-mfe="skillsApp"]) .bg-violet-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-violet-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-violet-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
:where([data-mfe="skillsApp"]) .bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
:where([data-mfe="skillsApp"]) .bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
:where([data-mfe="skillsApp"]) .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
:where([data-mfe="skillsApp"]) .from-\[\#191a37\] {
  --tw-gradient-from: #191a37 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(25 26 55 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
:where([data-mfe="skillsApp"]) .to-\[\#2d2f5e\] {
  --tw-gradient-to: #2d2f5e var(--tw-gradient-to-position);
}
:where([data-mfe="skillsApp"]) .p-0 {
  padding: 0px;
}
:where([data-mfe="skillsApp"]) .p-1\.5 {
  padding: 0.375rem;
}
:where([data-mfe="skillsApp"]) .p-3 {
  padding: 0.75rem;
}
:where([data-mfe="skillsApp"]) .p-4 {
  padding: 1rem;
}
:where([data-mfe="skillsApp"]) .p-5 {
  padding: 1.25rem;
}
:where([data-mfe="skillsApp"]) .p-6 {
  padding: 1.5rem;
}
:where([data-mfe="skillsApp"]) .p-7 {
  padding: 1.75rem;
}
:where([data-mfe="skillsApp"]) .px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
:where([data-mfe="skillsApp"]) .px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
:where([data-mfe="skillsApp"]) .px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
:where([data-mfe="skillsApp"]) .px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
:where([data-mfe="skillsApp"]) .px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
:where([data-mfe="skillsApp"]) .px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
:where([data-mfe="skillsApp"]) .px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
:where([data-mfe="skillsApp"]) .px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
:where([data-mfe="skillsApp"]) .px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
:where([data-mfe="skillsApp"]) .px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
:where([data-mfe="skillsApp"]) .px-\[10px\] {
  padding-left: 10px;
  padding-right: 10px;
}
:where([data-mfe="skillsApp"]) .px-\[18px\] {
  padding-left: 18px;
  padding-right: 18px;
}
:where([data-mfe="skillsApp"]) .px-\[22px\] {
  padding-left: 22px;
  padding-right: 22px;
}
:where([data-mfe="skillsApp"]) .px-\[5px\] {
  padding-left: 5px;
  padding-right: 5px;
}
:where([data-mfe="skillsApp"]) .px-\[7px\] {
  padding-left: 7px;
  padding-right: 7px;
}
:where([data-mfe="skillsApp"]) .py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
:where([data-mfe="skillsApp"]) .py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
:where([data-mfe="skillsApp"]) .py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
:where([data-mfe="skillsApp"]) .py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
:where([data-mfe="skillsApp"]) .py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
:where([data-mfe="skillsApp"]) .py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
:where([data-mfe="skillsApp"]) .py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
:where([data-mfe="skillsApp"]) .py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
:where([data-mfe="skillsApp"]) .py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
:where([data-mfe="skillsApp"]) .py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
:where([data-mfe="skillsApp"]) .py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
:where([data-mfe="skillsApp"]) .py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
:where([data-mfe="skillsApp"]) .py-\[10px\] {
  padding-top: 10px;
  padding-bottom: 10px;
}
:where([data-mfe="skillsApp"]) .py-\[13px\] {
  padding-top: 13px;
  padding-bottom: 13px;
}
:where([data-mfe="skillsApp"]) .py-\[14px\] {
  padding-top: 14px;
  padding-bottom: 14px;
}
:where([data-mfe="skillsApp"]) .py-\[18px\] {
  padding-top: 18px;
  padding-bottom: 18px;
}
:where([data-mfe="skillsApp"]) .py-\[22px\] {
  padding-top: 22px;
  padding-bottom: 22px;
}
:where([data-mfe="skillsApp"]) .py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}
:where([data-mfe="skillsApp"]) .py-\[7px\] {
  padding-top: 7px;
  padding-bottom: 7px;
}
:where([data-mfe="skillsApp"]) .py-\[9px\] {
  padding-top: 9px;
  padding-bottom: 9px;
}
:where([data-mfe="skillsApp"]) .py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}
:where([data-mfe="skillsApp"]) .pb-1 {
  padding-bottom: 0.25rem;
}
:where([data-mfe="skillsApp"]) .pb-2 {
  padding-bottom: 0.5rem;
}
:where([data-mfe="skillsApp"]) .pb-4 {
  padding-bottom: 1rem;
}
:where([data-mfe="skillsApp"]) .pb-\[3px\] {
  padding-bottom: 3px;
}
:where([data-mfe="skillsApp"]) .pl-1 {
  padding-left: 0.25rem;
}
:where([data-mfe="skillsApp"]) .pl-12 {
  padding-left: 3rem;
}
:where([data-mfe="skillsApp"]) .pl-2 {
  padding-left: 0.5rem;
}
:where([data-mfe="skillsApp"]) .pl-2\.5 {
  padding-left: 0.625rem;
}
:where([data-mfe="skillsApp"]) .pl-3 {
  padding-left: 0.75rem;
}
:where([data-mfe="skillsApp"]) .pl-5 {
  padding-left: 1.25rem;
}
:where([data-mfe="skillsApp"]) .pl-7 {
  padding-left: 1.75rem;
}
:where([data-mfe="skillsApp"]) .pl-8 {
  padding-left: 2rem;
}
:where([data-mfe="skillsApp"]) .pl-\[34px\] {
  padding-left: 34px;
}
:where([data-mfe="skillsApp"]) .pl-\[84px\] {
  padding-left: 84px;
}
:where([data-mfe="skillsApp"]) .pr-0\.5 {
  padding-right: 0.125rem;
}
:where([data-mfe="skillsApp"]) .pr-1\.5 {
  padding-right: 0.375rem;
}
:where([data-mfe="skillsApp"]) .pr-2 {
  padding-right: 0.5rem;
}
:where([data-mfe="skillsApp"]) .pr-2\.5 {
  padding-right: 0.625rem;
}
:where([data-mfe="skillsApp"]) .pr-6 {
  padding-right: 1.5rem;
}
:where([data-mfe="skillsApp"]) .pr-7 {
  padding-right: 1.75rem;
}
:where([data-mfe="skillsApp"]) .pr-8 {
  padding-right: 2rem;
}
:where([data-mfe="skillsApp"]) .pt-0\.5 {
  padding-top: 0.125rem;
}
:where([data-mfe="skillsApp"]) .pt-1 {
  padding-top: 0.25rem;
}
:where([data-mfe="skillsApp"]) .pt-1\.5 {
  padding-top: 0.375rem;
}
:where([data-mfe="skillsApp"]) .pt-3 {
  padding-top: 0.75rem;
}
:where([data-mfe="skillsApp"]) .pt-4 {
  padding-top: 1rem;
}
:where([data-mfe="skillsApp"]) .pt-5 {
  padding-top: 1.25rem;
}
:where([data-mfe="skillsApp"]) .text-left {
  text-align: left;
}
:where([data-mfe="skillsApp"]) .text-center {
  text-align: center;
}
:where([data-mfe="skillsApp"]) .text-right {
  text-align: right;
}
:where([data-mfe="skillsApp"]) .font-\[inherit\] {
  font-family: inherit;
}
:where([data-mfe="skillsApp"]) .font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
:where([data-mfe="skillsApp"]) .text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
:where([data-mfe="skillsApp"]) .text-\[10\.5px\] {
  font-size: 10.5px;
}
:where([data-mfe="skillsApp"]) .text-\[10px\] {
  font-size: 10px;
}
:where([data-mfe="skillsApp"]) .text-\[11\.5px\] {
  font-size: 11.5px;
}
:where([data-mfe="skillsApp"]) .text-\[11px\] {
  font-size: 11px;
}
:where([data-mfe="skillsApp"]) .text-\[12\.5px\] {
  font-size: 12.5px;
}
:where([data-mfe="skillsApp"]) .text-\[12px\] {
  font-size: 12px;
}
:where([data-mfe="skillsApp"]) .text-\[13\.5px\] {
  font-size: 13.5px;
}
:where([data-mfe="skillsApp"]) .text-\[13px\] {
  font-size: 13px;
}
:where([data-mfe="skillsApp"]) .text-\[14px\] {
  font-size: 14px;
}
:where([data-mfe="skillsApp"]) .text-\[15px\] {
  font-size: 15px;
}
:where([data-mfe="skillsApp"]) .text-\[17px\] {
  font-size: 17px;
}
:where([data-mfe="skillsApp"]) .text-\[18px\] {
  font-size: 18px;
}
:where([data-mfe="skillsApp"]) .text-\[22px\] {
  font-size: 22px;
}
:where([data-mfe="skillsApp"]) .text-\[26px\] {
  font-size: 26px;
}
:where([data-mfe="skillsApp"]) .text-\[9\.5px\] {
  font-size: 9.5px;
}
:where([data-mfe="skillsApp"]) .text-\[9px\] {
  font-size: 9px;
}
:where([data-mfe="skillsApp"]) .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
:where([data-mfe="skillsApp"]) .text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
:where([data-mfe="skillsApp"]) .font-bold {
  font-weight: 700;
}
:where([data-mfe="skillsApp"]) .font-extrabold {
  font-weight: 800;
}
:where([data-mfe="skillsApp"]) .font-medium {
  font-weight: 500;
}
:where([data-mfe="skillsApp"]) .font-normal {
  font-weight: 400;
}
:where([data-mfe="skillsApp"]) .font-semibold {
  font-weight: 600;
}
:where([data-mfe="skillsApp"]) .uppercase {
  text-transform: uppercase;
}
:where([data-mfe="skillsApp"]) .normal-case {
  text-transform: none;
}
:where([data-mfe="skillsApp"]) .italic {
  font-style: italic;
}
:where([data-mfe="skillsApp"]) .tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
:where([data-mfe="skillsApp"]) .leading-\[1\.1\] {
  line-height: 1.1;
}
:where([data-mfe="skillsApp"]) .leading-\[1\.35\] {
  line-height: 1.35;
}
:where([data-mfe="skillsApp"]) .leading-\[1\.3\] {
  line-height: 1.3;
}
:where([data-mfe="skillsApp"]) .leading-\[1\.45\] {
  line-height: 1.45;
}
:where([data-mfe="skillsApp"]) .leading-\[1\.55\] {
  line-height: 1.55;
}
:where([data-mfe="skillsApp"]) .leading-\[1\.5\] {
  line-height: 1.5;
}
:where([data-mfe="skillsApp"]) .leading-\[1\.6\] {
  line-height: 1.6;
}
:where([data-mfe="skillsApp"]) .leading-\[1\.7\] {
  line-height: 1.7;
}
:where([data-mfe="skillsApp"]) .leading-\[18px\] {
  line-height: 18px;
}
:where([data-mfe="skillsApp"]) .leading-none {
  line-height: 1;
}
:where([data-mfe="skillsApp"]) .leading-relaxed {
  line-height: 1.625;
}
:where([data-mfe="skillsApp"]) .leading-snug {
  line-height: 1.375;
}
:where([data-mfe="skillsApp"]) .leading-tight {
  line-height: 1.25;
}
:where([data-mfe="skillsApp"]) .tracking-\[-0\.005em\] {
  letter-spacing: -0.005em;
}
:where([data-mfe="skillsApp"]) .tracking-\[-0\.01em\] {
  letter-spacing: -0.01em;
}
:where([data-mfe="skillsApp"]) .tracking-\[\.05em\] {
  letter-spacing: .05em;
}
:where([data-mfe="skillsApp"]) .tracking-\[\.08em\] {
  letter-spacing: .08em;
}
:where([data-mfe="skillsApp"]) .tracking-\[0\.02em\] {
  letter-spacing: 0.02em;
}
:where([data-mfe="skillsApp"]) .tracking-\[0\.04em\] {
  letter-spacing: 0.04em;
}
:where([data-mfe="skillsApp"]) .tracking-\[0\.05em\] {
  letter-spacing: 0.05em;
}
:where([data-mfe="skillsApp"]) .tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}
:where([data-mfe="skillsApp"]) .tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
:where([data-mfe="skillsApp"]) .tracking-normal {
  letter-spacing: 0em;
}
:where([data-mfe="skillsApp"]) .tracking-wide {
  letter-spacing: 0.025em;
}
:where([data-mfe="skillsApp"]) .tracking-wider {
  letter-spacing: 0.05em;
}
:where([data-mfe="skillsApp"]) .tracking-widest {
  letter-spacing: 0.1em;
}
:where([data-mfe="skillsApp"]) .text-\[\#059669\] {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-\[\#191a37\] {
  --tw-text-opacity: 1;
  color: rgb(25 26 55 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-\[\#1a1d35\] {
  --tw-text-opacity: 1;
  color: rgb(26 29 53 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-\[\#262852\] {
  --tw-text-opacity: 1;
  color: rgb(38 40 82 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-\[\#6b7280\] {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-\[\#6ee7b7\] {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-\[\#9098b0\] {
  --tw-text-opacity: 1;
  color: rgb(144 152 176 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-\[\#9ca3af\] {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-\[\#d97706\] {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-\[\#da2128\] {
  --tw-text-opacity: 1;
  color: rgb(218 33 40 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-\[\#fcd34d\] {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-brand-ink {
  --tw-text-opacity: 1;
  color: rgb(25 26 55 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-brand-red {
  --tw-text-opacity: 1;
  color: rgb(218 33 40 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-current {
  color: currentColor;
}
:where([data-mfe="skillsApp"]) .text-cyan-800 {
  --tw-text-opacity: 1;
  color: rgb(21 94 117 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-cyan-900 {
  --tw-text-opacity: 1;
  color: rgb(22 78 99 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-emerald-900 {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-fuchsia-800 {
  --tw-text-opacity: 1;
  color: rgb(134 25 143 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-fuchsia-900 {
  --tw-text-opacity: 1;
  color: rgb(112 26 117 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-lime-800 {
  --tw-text-opacity: 1;
  color: rgb(63 98 18 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-lime-900 {
  --tw-text-opacity: 1;
  color: rgb(54 83 20 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-orange-900 {
  --tw-text-opacity: 1;
  color: rgb(124 45 18 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-rose-800 {
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-rose-900 {
  --tw-text-opacity: 1;
  color: rgb(136 19 55 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-sky-800 {
  --tw-text-opacity: 1;
  color: rgb(7 89 133 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-sky-900 {
  --tw-text-opacity: 1;
  color: rgb(12 74 110 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-teal-800 {
  --tw-text-opacity: 1;
  color: rgb(17 94 89 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-teal-900 {
  --tw-text-opacity: 1;
  color: rgb(19 78 74 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-violet-800 {
  --tw-text-opacity: 1;
  color: rgb(91 33 182 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-violet-900 {
  --tw-text-opacity: 1;
  color: rgb(76 29 149 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
:where([data-mfe="skillsApp"]) .text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
:where([data-mfe="skillsApp"]) .text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
:where([data-mfe="skillsApp"]) .underline {
  text-decoration-line: underline;
}
:where([data-mfe="skillsApp"]) .placeholder-\[\#9098b0\]::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(144 152 176 / var(--tw-placeholder-opacity, 1));
}
:where([data-mfe="skillsApp"]) .placeholder-\[\#9098b0\]::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(144 152 176 / var(--tw-placeholder-opacity, 1));
}
:where([data-mfe="skillsApp"]) .accent-\[\#da2128\] {
  accent-color: #da2128;
}
:where([data-mfe="skillsApp"]) .opacity-60 {
  opacity: 0.6;
}
:where([data-mfe="skillsApp"]) .opacity-65 {
  opacity: 0.65;
}
:where([data-mfe="skillsApp"]) .opacity-70 {
  opacity: 0.7;
}
:where([data-mfe="skillsApp"]) .shadow-\[0_0_0_3px_\#ede9fe\] {
  --tw-shadow: 0 0 0 3px #ede9fe;
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:where([data-mfe="skillsApp"]) .shadow-\[0_1px_3px_rgba\(25\2c 26\2c 55\2c 0\.04\)\] {
  --tw-shadow: 0 1px 3px rgba(25,26,55,0.04);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:where([data-mfe="skillsApp"]) .shadow-\[0_1px_3px_rgba\(25\2c 26\2c 55\2c 0\.05\)\] {
  --tw-shadow: 0 1px 3px rgba(25,26,55,0.05);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:where([data-mfe="skillsApp"]) .shadow-\[0_1px_4px_rgba\(25\2c 26\2c 55\2c 0\.06\)\] {
  --tw-shadow: 0 1px 4px rgba(25,26,55,0.06);
  --tw-shadow-colored: 0 1px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:where([data-mfe="skillsApp"]) .shadow-\[0_2px_12px_rgba\(25\2c 26\2c 55\2c 0\.06\)\] {
  --tw-shadow: 0 2px 12px rgba(25,26,55,0.06);
  --tw-shadow-colored: 0 2px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:where([data-mfe="skillsApp"]) .shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:where([data-mfe="skillsApp"]) .shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:where([data-mfe="skillsApp"]) .shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:where([data-mfe="skillsApp"]) .outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
:where([data-mfe="skillsApp"]) .outline {
  outline-style: solid;
}
:where([data-mfe="skillsApp"]) .ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
:where([data-mfe="skillsApp"]) .ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
:where([data-mfe="skillsApp"]) .ring-inset {
  --tw-ring-inset: inset;
}
:where([data-mfe="skillsApp"]) .ring-amber-200\/70 {
  --tw-ring-color: rgb(253 230 138 / 0.7);
}
:where([data-mfe="skillsApp"]) .ring-cyan-200\/70 {
  --tw-ring-color: rgb(165 243 252 / 0.7);
}
:where([data-mfe="skillsApp"]) .ring-emerald-200\/70 {
  --tw-ring-color: rgb(167 243 208 / 0.7);
}
:where([data-mfe="skillsApp"]) .ring-fuchsia-200\/70 {
  --tw-ring-color: rgb(245 208 254 / 0.7);
}
:where([data-mfe="skillsApp"]) .ring-lime-200\/70 {
  --tw-ring-color: rgb(217 249 157 / 0.7);
}
:where([data-mfe="skillsApp"]) .ring-orange-200\/70 {
  --tw-ring-color: rgb(254 215 170 / 0.7);
}
:where([data-mfe="skillsApp"]) .ring-rose-200\/70 {
  --tw-ring-color: rgb(254 205 211 / 0.7);
}
:where([data-mfe="skillsApp"]) .ring-sky-200\/70 {
  --tw-ring-color: rgb(186 230 253 / 0.7);
}
:where([data-mfe="skillsApp"]) .ring-slate-200\/70 {
  --tw-ring-color: rgb(226 232 240 / 0.7);
}
:where([data-mfe="skillsApp"]) .ring-teal-200\/70 {
  --tw-ring-color: rgb(153 246 228 / 0.7);
}
:where([data-mfe="skillsApp"]) .ring-violet-200\/70 {
  --tw-ring-color: rgb(221 214 254 / 0.7);
}
:where([data-mfe="skillsApp"]) .blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:where([data-mfe="skillsApp"]) .filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:where([data-mfe="skillsApp"]) .backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
:where([data-mfe="skillsApp"]) .transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
:where([data-mfe="skillsApp"]) .transition-\[border-color\2c box-shadow\] {
  transition-property: border-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
:where([data-mfe="skillsApp"]) .transition-\[filter\] {
  transition-property: filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
:where([data-mfe="skillsApp"]) .transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
:where([data-mfe="skillsApp"]) .transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
:where([data-mfe="skillsApp"]) .transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
:where([data-mfe="skillsApp"]) .duration-100 {
  transition-duration: 100ms;
}
:where([data-mfe="skillsApp"]) .duration-150 {
  transition-duration: 150ms;
}
:where([data-mfe="skillsApp"]) .duration-200 {
  transition-duration: 200ms;
}
:where([data-mfe="skillsApp"]) .duration-500 {
  transition-duration: 500ms;
}
:where([data-mfe="skillsApp"]) .duration-\[120ms\] {
  transition-duration: 120ms;
}
:where([data-mfe="skillsApp"]) .ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* ── Opt out of OS dark-mode auto-inversion ──
   Neither the shell nor @dssplus/bizplus-fe-ui declares a color-scheme, and
   nothing sets a base text colour on <body>. So when Windows / macOS is set
   to a dark theme, the browser flips its own defaults: any element without an
   explicit `text-*` class inherits WHITE text onto this app's white surfaces,
   and native controls render as black-on-black checkboxes / white-on-white
   input text.

   Real bug this fixes: the table-settings gear menu rendered as an empty
   panel on a dark-themed machine — only the rows carrying an explicit colour
   class ("COLUMNS", "DENSITY", the locked "User" row) were legible.

   Scoped to this remote's mount root rather than :root so it can't change the
   rendering of the shell or another microfrontend sharing the document.
   color-scheme inherits, so the whole subtree picks it up; the shell stamps
   the same attribute on <body>, which covers teleported overlays too. */
[data-mfe="skillsApp"] {
  color-scheme: light;
}

/* ── BaseAlert — global overrides (teleports to <body>, so must be global) ── */

/* Lock all alerts to screen center, disable drag */
.bp-alert {
  top:       50% !important;
  left:      50% !important;
  transform: translate(-50%, -50%) !important;
}
.bp-alert-header {
  cursor: default !important;
}

/* Vertically centre the icon panel and body text within the content row */
.bp-alert-content {
  align-items: center !important;
}

/* ── Column-resize drag handle ──
   Attached by the useColumnResize composable as a DOM child of each <th> in
   SkillsReportEmployeesTable. A 6px hot-zone pinned to the right edge; brand
   red on hover so users can find it. Drag updates the view's widths map.
   `sk-` prefix, not `bp-`: other microfrontends ship the same pattern into
   this shared document and must not restyle these handles. */
.sk-col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
  background: transparent;
  transition: background 0.12s;
}
.sk-col-resize-handle:hover,
.sk-col-resize-handle:active {
  background: rgba(218, 33, 40, 0.55);
}

/* ── Table density modes ──
   Class goes on the wrapper element around SkillsReportEmployeesTable. The
   table's own padding lives on `.bp-tbl-th-inner` / `.bp-tbl-td`, so those
   are what we override — a two-class selector, which outweighs the
   component's single-class rule. `comfortable` is the table's native padding,
   so it needs no rule. */
.sk-tbl-density-compact .bp-tbl-th-inner,
.sk-tbl-density-compact .bp-tbl-td {
  padding-top: 4px;
  padding-bottom: 4px;
}
.sk-tbl-density-spacious .bp-tbl-th-inner,
.sk-tbl-density-spacious .bp-tbl-td {
  padding-top: 14px;
  padding-bottom: 14px;
}
:where([data-mfe="skillsApp"]) .placeholder\:text-gray-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .placeholder\:text-gray-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .placeholder\:text-slate-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .placeholder\:text-slate-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
:where([data-mfe="skillsApp"]) .focus-within\:border-\[\#da2128\]:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(218 33 40 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .focus-within\:shadow-\[0_0_0_3px_rgba\(218\2c 33\2c 40\2c 0\.08\)\]:focus-within {
  --tw-shadow: 0 0 0 3px rgba(218,33,40,0.08);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:where([data-mfe="skillsApp"]) .hover\:border-solid:hover {
  border-style: solid;
}
:where([data-mfe="skillsApp"]) .hover\:border-\[\#191a37\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(25 26 55 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:border-\[\#a0a1ab\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(160 161 171 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:border-\[\#d1d5db\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:border-\[\#da2128\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(218 33 40 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:border-brand-ink:hover {
  --tw-border-opacity: 1;
  border-color: rgb(25 26 55 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:border-brand-red:hover {
  --tw-border-opacity: 1;
  border-color: rgb(218 33 40 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:border-red-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:border-slate-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:bg-\[\#1e2d45\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 45 69 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:bg-\[\#f4f5f9\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 245 249 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:bg-\[\#fafbfc\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 252 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:bg-\[\#fee2e2\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:bg-\[\#fff5f5\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 245 245 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:bg-brand-red-soft:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:bg-red-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:bg-slate-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:bg-slate-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}
:where([data-mfe="skillsApp"]) .hover\:text-\[\#191a37\]:hover {
  --tw-text-opacity: 1;
  color: rgb(25 26 55 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:text-\[\#da2128\]:hover {
  --tw-text-opacity: 1;
  color: rgb(218 33 40 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:text-brand-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(25 26 55 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:text-brand-red:hover {
  --tw-text-opacity: 1;
  color: rgb(218 33 40 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:text-slate-700:hover {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:text-slate-900:hover {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) .hover\:underline:hover {
  text-decoration-line: underline;
}
:where([data-mfe="skillsApp"]) .hover\:shadow-\[0_4px_12px_rgba\(25\2c 26\2c 55\2c 0\.06\)\]:hover {
  --tw-shadow: 0 4px 12px rgba(25,26,55,0.06);
  --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:where([data-mfe="skillsApp"]) .hover\:shadow-\[0_4px_14px_rgba\(218\2c 33\2c 40\2c \.08\)\]:hover {
  --tw-shadow: 0 4px 14px rgba(218,33,40,.08);
  --tw-shadow-colored: 0 4px 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:where([data-mfe="skillsApp"]) .hover\:brightness-95:hover {
  --tw-brightness: brightness(.95);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:where([data-mfe="skillsApp"]) .hover\:brightness-\[0\.97\]:hover {
  --tw-brightness: brightness(0.97);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:where([data-mfe="skillsApp"]) .focus\:border-\[\#a0a1ab\]:focus {
  --tw-border-opacity: 1;
  border-color: rgb(160 161 171 / var(--tw-border-opacity, 1));
}
:where([data-mfe="skillsApp"]) .focus\:border-transparent:focus {
  border-color: transparent;
}
:where([data-mfe="skillsApp"]) .focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
:where([data-mfe="skillsApp"]) .focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
:where([data-mfe="skillsApp"]) .focus\:ring-brand-red:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(218 33 40 / var(--tw-ring-opacity, 1));
}
:where([data-mfe="skillsApp"]) .focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
:where([data-mfe="skillsApp"]) .focus-visible\:ring-\[\#6C6EB7\]:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(108 110 183 / var(--tw-ring-opacity, 1));
}
:where([data-mfe="skillsApp"]) .disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
:where([data-mfe="skillsApp"]) .disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
:where([data-mfe="skillsApp"]) .disabled\:opacity-40:disabled {
  opacity: 0.4;
}
:where([data-mfe="skillsApp"]) .disabled\:opacity-50:disabled {
  opacity: 0.5;
}
:where([data-mfe="skillsApp"]) :is(.group:hover .group-hover\:bg-\[\#da2128\]) {
  --tw-bg-opacity: 1;
  background-color: rgb(218 33 40 / var(--tw-bg-opacity, 1));
}
:where([data-mfe="skillsApp"]) :is(.group:hover .group-hover\:text-white) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
:where([data-mfe="skillsApp"]) :is(.group\/chip:hover .group-hover\/chip\:opacity-100) {
  opacity: 1;
}
@media (min-width: 640px) {

  :where([data-mfe="skillsApp"]) .sm\:ml-0 {
    margin-left: 0px;
  }

  :where([data-mfe="skillsApp"]) .sm\:ml-auto {
    margin-left: auto;
  }

  :where([data-mfe="skillsApp"]) .sm\:mt-16 {
    margin-top: 4rem;
  }

  :where([data-mfe="skillsApp"]) .sm\:grid {
    display: grid;
  }

  :where([data-mfe="skillsApp"]) .sm\:contents {
    display: contents;
  }

  :where([data-mfe="skillsApp"]) .sm\:hidden {
    display: none;
  }

  :where([data-mfe="skillsApp"]) .sm\:w-auto {
    width: auto;
  }

  :where([data-mfe="skillsApp"]) .sm\:flex-none {
    flex: none;
  }

  :where([data-mfe="skillsApp"]) .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :where([data-mfe="skillsApp"]) .sm\:grid-cols-\[1fr_280px\] {
    grid-template-columns: 1fr 280px;
  }

  :where([data-mfe="skillsApp"]) .sm\:flex-row {
    flex-direction: row;
  }

  :where([data-mfe="skillsApp"]) .sm\:flex-nowrap {
    flex-wrap: nowrap;
  }

  :where([data-mfe="skillsApp"]) .sm\:items-center {
    align-items: center;
  }

  :where([data-mfe="skillsApp"]) .sm\:justify-end {
    justify-content: flex-end;
  }

  :where([data-mfe="skillsApp"]) .sm\:gap-4 {
    gap: 1rem;
  }

  :where([data-mfe="skillsApp"]) .sm\:self-auto {
    align-self: auto;
  }

  :where([data-mfe="skillsApp"]) .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  :where([data-mfe="skillsApp"]) .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  :where([data-mfe="skillsApp"]) .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  :where([data-mfe="skillsApp"]) .sm\:text-\[20px\] {
    font-size: 20px;
  }
}
@media (min-width: 768px) {

  :where([data-mfe="skillsApp"]) .md\:block {
    display: block;
  }

  :where([data-mfe="skillsApp"]) .md\:inline {
    display: inline;
  }

  :where([data-mfe="skillsApp"]) .md\:flex {
    display: flex;
  }

  :where([data-mfe="skillsApp"]) .md\:p-5 {
    padding: 1.25rem;
  }

  :where([data-mfe="skillsApp"]) .md\:p-6 {
    padding: 1.5rem;
  }

  :where([data-mfe="skillsApp"]) .md\:p-7 {
    padding: 1.75rem;
  }

  :where([data-mfe="skillsApp"]) .md\:p-8 {
    padding: 2rem;
  }
}
@media (min-width: 1024px) {

  :where([data-mfe="skillsApp"]) .lg\:ml-auto {
    margin-left: auto;
  }

  :where([data-mfe="skillsApp"]) .lg\:max-w-\[280px\] {
    max-width: 280px;
  }

  :where([data-mfe="skillsApp"]) .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :where([data-mfe="skillsApp"]) .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  :where([data-mfe="skillsApp"]) .lg\:flex-row {
    flex-direction: row;
  }

  :where([data-mfe="skillsApp"]) .lg\:items-center {
    align-items: center;
  }
}

.sk-checkbox[data-v-417d7097] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1.5px solid #c0c1cb;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.sk-checkbox[data-v-417d7097]:checked {
  background: #da2128;
  border-color: #da2128;
}
.sk-checkbox[data-v-417d7097]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sk-checkbox[data-v-417d7097]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.18);
}
.sk-checkbox[data-v-417d7097]:disabled {
  cursor: not-allowed;
}