.bdr {
  border: 1px solid red !important;
}

@media (min-width: 992px) {
  .app-header-menu .menu > .menu-item > .menu-link .menu-title {
    flex-grow: 0;
    font-size: 1.05rem;
    font-weight: 600;
  }
  .app-header-menu .menu > .menu-item > .menu-link {
    display: flex;
    flex-direction: row;
    width: auto;
    height: 60px;
  }
  .app-header-menu .menu > .menu-item > .menu-link .menu-icon {
    margin: 0;
    margin-right: 0.5rem;
    margin-bottom: 0rem;
  }
  .app-header-menu .menu > .menu-item > .menu-link .menu-icon,
  .app-header-menu .menu > .menu-item > .menu-link .menu-icon .svg-icon,
  .app-header-menu .menu > .menu-item > .menu-link .menu-icon i {
    /* color: var(--bs-gray-400); */
    color: #ffcc00;
  }
}
.menu-title-gray-600 .menu-item .menu-link .menu-title {
  color: var(--bs-text-gray-700);
  font-size: 1.06rem;
}

.active > .page-link,
.page-link.active {
  background-color: var(--bs-pagination-active-bg) !important;
}
.page-item .page-link {
  background-color: var(--bs-text-gray-200);
}

.app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}
/* [data-bs-theme=dark] .theme-light-show {
    display: block !important;
} */
[data-bs-theme="dark"] .me-lg-13 .theme-light-show {
  display: block !important;
}
.form-dark .dropdown.show > .form-select.form-select-transparent,
.form-dark .form-select.form-select-transparent.active,
.form-dark .form-select.form-select-transparent.focus,
.form-dark .form-select.form-select-transparent:active,
.form-dark .form-select.form-select-transparent:focus {
  border-color: #c4cada !important;
}
.form-dark
  .select2-container--bootstrap5
  .select2-selection--single.form-select-transparent
  .select2-selection__rendered {
  color: var(--bs-gray-200);
}
.form-dark
  .select2-container--bootstrap5
  .select2-selection--single
  .select2-selection__rendered {
  color: var(--bs-gray-200);
}

.form-dark .dropzone {
  min-height: auto;
  padding: 1.5rem 1.75rem;
  text-align: center;
  cursor: pointer;
  border: 1px dashed var(--bs-gray-200);
  background-color: #f8f5ff00;
  border-radius: 0.92rem !important;
}

.text-two {
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  word-break: break-word;
  height: 42px;
  /* border: 1px solid; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.6px;
  line-height: 21px;
  font-weight: 600;
  color: #000;
  margin-bottom: 1px;
}
.text-one {
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  word-break: break-word;
  height: 20px;
  /* border: 1px solid; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.6px;
  line-height: 21px;
  font-weight: 600;
  color: #000;
  margin-bottom: 1px;
}

.app-footer {
  background: var(--bs-app-bg-color);
}
.menu-state-gray-900 .menu-item .menu-link.active .menu-title {
  color: var(--bs-primary);
}
.menu-state-gray-900 .menu-item .menu-link.active .menu-icon,
.menu-state-gray-900 .menu-item .menu-link.active .menu-icon .svg-icon,
.menu-state-gray-900 .menu-item .menu-link.active .menu-icon i {
  color: var(--bs-primary);
}

.main-box .table:not(.table-bordered).table-row-gray-300 tr {
  border-bottom-color: var(--bs-gray-100);
  border-bottom: 10px solid #fff;
  margin-bottom: 30px !important;
}

.bdr-left-user {
  position: relative;
  /* border-left: 2px solid #e36a5b !important; */
}
.bdr-left-user::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30%;
  width: 2px;
  height: 30px;
  background-color: #443dba !important;
}

.progress-circle {
  font-size: 12px;
  /* margin: 20px; */
  position: relative;
  padding: 0;
  width: 3em;
  height: 3em;
  background-color: #804dea33;
  border-radius: 50%;
  line-height: 3em;
  /* border: 1px solid red; */
}
.progress-circle span {
  position: absolute;
  line-height: 3em;
  width: 3em;
  text-align: center;
  display: block;
  color: var(--bs-primary);
  z-index: 2;
}
.left-half-clipper {
  /* border: 1px solid; */
  border-radius: 50%;
  width: 3em;
  height: 3em;
  position: absolute;
  clip: rect(0, 1.6em, 0.6em, 0.5em);
}
.progress-circle:after {
  border: none;
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  text-align: center;
  display: block;
  border-radius: 50%;
  width: 2.3em;
  height: 2.3em;
  background-color: #f9f9f9;
  content: " ";
  /* border: 1px solid; */
}
.progress-circle:not(.over50) .first50-bar {
  display: none;
}
.progress-circle.p10 .value-bar {
  transform: rotate(36deg);
}
.value-bar {
  position: absolute;
  clip: rect(0, 2.5em, 2.6em, 0);
  width: 3em;
  height: 3em;
  border-radius: 50%;
  border: 0.45em solid #7843e6;
  /* background-color: #4D642D; */
  box-sizing: border-box;
}

.tagify:not(.form-control-sm):not(.form-control-lg)
  .tagify__tag
  .tagify__tag-text {
  font-size: 1rem;
}

.app-wrapper {
  padding-bottom: 60px;
}
.card .card-header .card-title h2 {
  font-size: 1.4rem;
}

/* .bg-white {
    --bs-bg-rgb-color: var(--bs-white-bg-rgb);
    background-color: #15171c !important;
} */

.select2-container--bootstrap5
  .select2-selection--multiple:not(.form-select-sm):not(.form-select-lg)
  .select2-selection__choice
  .select2-selection__choice__display {
  margin-left: 1.1rem;
  font-size: 0.8rem;
}
.menu-item .menu-link .menu-icon .svg-icon,
.menu-item .menu-link .menu-icon i {
  line-height: 1;
  font-size: 1rem;
  color: var(--bs-text-primary);
}

.bdr-left-user1 {
  position: relative;
  /* border-left: 2px solid #e36a5b !important; */
}
.bdr-left-user1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16%;
  transform: translateZ(10px);
  width: 2px;
  height: 30px;
  background-color: #443dba !important;
}
.text-orange {
  color: orangered;
}

.card-analytics .main-card p {
  /* border: 1px solid; */
  height: 38px;
  display: flex;
  align-items: start;
}
.card-analytics .main-card h3 {
  /* border: 1px solid; */
  color: #f86d28;
  margin-bottom: 8px;
}
.card-analytics .main-card {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 0 42px #0000000d;
  background-color: #fff;
  border-top: 2px solid #f86d28;
}

/* circular progress bar  */
.circular-progress-bar {
  display: block;
  /* margin: 15px auto; */
  transform: rotate(-0deg);
  -webkit-transform: rotate(-0deg);
  -moz-transform: rotate(-0deg);
  -ms-transform: rotate(-0deg);
  -o-transform: rotate(-0deg);
}

.circular-progress-bar circle {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

/* Style the options inside the dropdown */
select option {
  background-color: #fff; /* Background color of options */
  color: #333; /* Font color of options */
  padding: 10px; /* Padding inside each option */
  font-size: 14px; /* Font size of options */

  &:hover {
    background-color: #7843e6;
    color: #fff;
  }
}

/* .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #4B5675;
} */

.ant-select .ant-select-selection-placeholder {
  padding: 0.775rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  color: #8a93ac;
}

.ant-picker {
  border-radius: 11px;
}

.ant-picker-large .ant-picker-input > input:placeholder-shown {
  color: #8a93ac;
  font-size: 14px;
  font-weight: 600;
  height: 23px;
}

.ant-select-dropdown
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  color: #fff !important;
  background-color: #7843e6 !important;
}

.ant-select-dropdown .ant-select-item-option {
  &:hover {
    background-color: #7843e6 !important;
    color: #fff !important;
  }
}

.ant-picker-dropdown {
  z-index: 1200;
}

.ant-select-single.ant-select-lg .ant-select-selector,
.ant-picker-large .ant-picker-input > input {
  font-size: 14px;
}

.ant-image-preview-root .ant-image-preview-mask {
  z-index: 1100 !important;
}

.ant-image-preview-root .ant-image-preview-wrap,
.ant-image-preview-operations-wrapper {
  z-index: 1101 !important;
}

.ant-progress .ant-progress-text {
  font-size: 14px;
  /* color: #fff !important; */
}

.custom-select .ant-select-selector {
  background-color: inherit !important;
}

.custom-select .ant-select-selector .ant-select-selection-placeholder {
  padding: 0.775rem 1rem;
  font-size: small !important;
  font-weight: 500;
  line-height: 1.5;
  color: #8a93ac;
}

.custom-multiple-select .ant-select-selector {
  width: 100% !important;
}

.overlayLoading {
  margin: auto;
  width: fit-content;
  height: fit-content;
  inset: 0;
  position: absolute;
  z-index: 99999999;
}

.loader {
  width: 40px;
  height: 40px;
  display: inline-block;
  border: 5px solid var(--bs-primary);
  border-radius: 50%;
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: rot5 1s infinite;
}

@keyframes rot5 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* HTML: <div class="loader"></div> */
.loader-spin {
  width: 50px;

  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid lightblue;
  border-right-color: orange;
  animation: l2 1s infinite linear;
}
@keyframes l2 {
  to {
    transform: rotate(1turn);
  }
}

.loader-new {
  height: 80px;
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 50%;
  box-sizing: border-box;
  position: relative;
  mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0);
  filter: blur(12px);
}
.loader-new:before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(#0000 0 5%, #a634c2, #0000 20% 50%);
  animation: l2 1.5s linear infinite;
}
@keyframes l2 {
  to {
    rotate: 1turn;
  }
}

.ad-metrics-carousel .ant-carousel .slick-next::after {
  width: 20.313708px !important;
  height: 20.313708px !important;
  border-inline-width: 5px 0 !important;
  border-block-width: 5px 0 !important;
  left: 50px !important;
}

.ad-metrics-carousel .ant-carousel .slick-prev::after {
  width: 20.313708px !important;
  height: 20.313708px !important;
  border-inline-width: 5px 0 !important;
  border-block-width: 5px 0 !important;
  left: -50px !important;
}

.ad-metrics-carousel .ant-carousel .slick-prev,
.ad-metrics-carousel .ant-carousel .slick-next {
  color: #7843e6;
}

.ad-metrics-carousel .ant-carousel .slick-dots li.slick-active button {
  background: #7843e6;
  opacity: 1;
}

.ad-metrics-carousel .ant-carousel .slick-dots li button {
  background: #9387ad !important;
}

.ad-metrics-carousel .ant-carousel .slick-dots-bottom {
  bottom: -12px !important;
}

/* Stronger readable badge colors; only badges carry status color */
.badge-success { background: #e8fff3; color: #0f5132; border: 1px solid #badbcc; }
.badge-warning { background: #fff3cd; color: #664d03; border: 1px solid #ffec99; }
.badge-danger  { background: #fde2e2; color: #842029; border: 1px solid #f5c2c7; }
.badge-secondary { background: #eef0f2; color: #343a40; border: 1px solid #dee2e6; }

/* Base */
.sidebar-clean { padding: 12px !important; }
.sb-toolbar {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
}
.sb-toolbar-right { display: flex; gap: 8px; }
.sb-ico-btn {
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid #e4e6ef; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.sb-ico-btn.sb-disabled { cursor: not-allowed; opacity: .55; }

/* Identity */
.sb-id { display: grid; grid-template-columns: 88px 1fr; gap: 12px; margin-top: 10px; }
.sb-id-main { min-width: 0; }
.sb-name-row { display: flex; align-items: center; gap: 8px; }
.sb-name { font-size: 18px; font-weight: 800; color: #111827; line-height: 1.35; }
.sb-score { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.sb-lines { margin-top: 6px; line-height: 1.45; }
.sb-contact { display: flex; gap: 8px; margin-top: 10px; }
.sb-meta { margin-top: 12px; display: grid; gap: 6px; }
.sb-label { color: #6b7280; font-weight: 600; min-width: 140px; display: inline-block; margin-right: 8px; }

/* Section blocks */
.sb-sec-h { padding: 10px 14px; border-bottom: 1px solid #f0f2f5; display: flex; align-items: center; }
.sb-sec-t { font-size: 16px; font-weight: 800; color: #0f172a; margin: 0; }
.sb-sec-b { padding: 12px 14px 14px; }

/* Key info rows */
.sb-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding: 9px 0;
}
.sb-row + .sb-row { border-top: 1px dashed #f0f2f5; }
.k { color: #1f2937; font-weight: 700; }
.v { color: #4b5563; text-align: right; }

/* Emergency contact header */
.sb-subrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; margin-top: 6px; border-top: 1px solid #f0f2f5;
  font-weight: 800; color: #0f172a;
}
.sb-pill-ico {
  width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid #e4e6ef; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Actions list */
.sb-actions { display: grid; gap: 8px; }
.sb-action {
  text-align: left; padding: 10px 12px; border: 1px solid #e4e6ef;
  border-radius: 12px; background: #fff; font-weight: 600; color: #0d6efd;
}
.sb-action:hover { background: #f6faff; border-color: #cfe2ff; }
.sb-action.sb-danger { color: #d32f2f; border-color: #f5c2c7; }

/* Notes */
.sb-note {
  position: relative; border: 1px solid #e4e6ef; background: #fff;
  border-radius: 12px; padding: 12px;
}
.sb-note-edit { position: absolute; right: 8px; top: 8px; }
.sb-note-meta { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
.sb-note-title { font-weight: 800; color: #0d6efd; margin-bottom: 4px; }
.sb-note-body { color: #1f2937; line-height: 1.5; }

/* Card shell (keep your width) */
.card { border-color: #eef0f4; border-radius: 14px; }
.sidebar-clean { padding: 10px !important; }

/* Compact grid */
.sb-compact .symbol.symbol-56px img { border-radius: 999px; }
.sb-toolbar {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

/* Select: lighter, lower contrast */
.sb-select .ant-select-selector {
  height: 36px !important;
  border-radius: 10px !important;
  border-color: #e7e9f0 !important;
  box-shadow: none !important;
}
.sb-select .ant-select-selection-item { line-height: 34px !important; }

/* Icon buttons: 32px, transparent until hover */
.sb-ico-btn {
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sb-ico-btn:hover { background: #f8fafc; border-color: #E5E7EB; }
.sb-ico-btn.sb-disabled { cursor: not-allowed; opacity: .55; }

/* Identity block: smaller avatar, tighter rhythm */
.sb-id {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  padding: 4px 2px 6px;
}
.sb-name-row { display: flex; align-items: center; gap: 8px; }
.sb-name { font-size: 20px; font-weight: 800; color: #0f172a; margin: 0; line-height: 1.3; }
.sb-score {
  font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px;
}
.sb-lines { margin-top: 2px; line-height: 1.45; font-size: 14px; }
.sb-contact { display: flex; gap: 6px; margin-top: 8px; }
.sb-meta { margin-top: 10px; display: grid; gap: 4px; }
.sb-label { color: #6b7280; font-weight: 600; min-width: 136px; display: inline-block; margin-right: 6px; }

/* Soften inner borders globally */
.accordion .card,
.mb-5.card { border-color: #eef0f4; }

/* Card tone */
.card { border-radius: 14px; border-color: #eef0f4; }
.sidebar-clean { padding: 12px !important; }

/* Toolbar */
.sbx-toolbar{
  display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center;
  margin-bottom:6px;
}
.sbx-actions{display:flex; gap:6px}

/* Select */
.sbx-select .ant-select-selector{
  height:36px !important; border-radius:10px !important; border-color:#e7e9f0 !important;
  box-shadow:none !important; padding-inline:10px !important;
}
.sbx-select .ant-select-selection-item{line-height:34px !important}

/* Icon buttons: no pills, low chrome */
.sbx-ico{
  width:32px; height:32px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#6b7280; background:transparent; border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.sbx-ico:hover{ background:#f8fafc; border-color:#eceff3; color:#111827 }
.sbx-ico:active{ transform:scale(.98) }
.sbx-ico.sbx-disabled{ opacity:.5; cursor:not-allowed }

/* Two-column facts */
.sbx-two{ margin-top:8px; display:grid; gap:6px }
.sbx-two-row{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px }
.sbx-label{ color:#6b7280; font-weight:600; min-width:140px }
.sbx-value{ color:#111827; text-align:left }

/* Kill extra inner borders globally in this area */
.accordion .card, .mb-5.card{ border-color:#eef0f4 }

/* Base card */
.uxv-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid #eef0f4; border-radius:16px;
  padding:12px 16px 16px; margin-bottom:16px;
}
.uxv-card--lite{ padding:14px 16px; }

/* Title for small card */
.uxv-card-title{
  font-weight:700; color:#0f172a; margin-bottom:10px; font-size:15px;
}

/* Rail */
.uxv-rail{ display:flex; align-items:center; gap:12px; min-height:36px; }
.uxv-rail-right{ margin-left:auto; display:flex; gap:8px; }

/* Icon buttons: 36 box / 22 glyph (colored variants below) */
.uxv-ico{
  width:36px; height:36px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; background:transparent; color:#6b7280;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.uxv-ico i{ font-size:22px; line-height:1; }
.uxv-ico:hover{ background:#f8fafc; border-color:#eceff3; color:#0f172a; }
.uxv-ico:active{ transform:scale(.98); }
.uxv-ico.uxv-disabled{ opacity:.55; cursor:not-allowed; }

/* Colored contact icons */
.uxv-ico--wa i{ color:#25D366; }          /* WhatsApp green */
.uxv-ico--phone i{ color:#2563eb; }       /* Phone blue */
.uxv-ico--mail i{ color:#ef4444; }        /* Email red */
.uxv-ico--ig i{ color:#e1306c; }          /* Instagram pink */
.uxv-ico--li i{ color:#0a66c2; }          /* LinkedIn blue */

/* Select control */
.uxv-select .ant-select-selector{
  height:38px !important; border-radius:10px !important; border-color:#e7e9f0 !important;
  box-shadow:none !important; padding-inline:10px !important;
}
.uxv-select .ant-select-selection-item{ line-height:36px !important; }

/* Avatar + identity (stacked) */
.uxv-avatar-row{ display:flex; justify-content:center; margin-top:16px; }
.uxv-avatar{ width:100px; height:100px; border-radius:50%; object-fit:cover; }

.uxv-id{ text-align:center; margin-top:12px; }
.uxv-name{ font-size:22px; font-weight:800; color:#0f172a; margin:0; }
.uxv-chip{ margin-left:16px; font-size:22px; font-weight:800; padding:2px 8px; border-radius:999px; background:#fff7d6; color:#0f172a; }
.uxv-line{ margin-top:16px; font-size:15px; line-height:1.5; color:#1f2937; }
.uxv-line.uxv-strong{ font-weight:700; }

/* Contacts row */
.uxv-actions{ display:flex; justify-content:center; gap:16px; margin-top:16px; }

/* Facts */
.uxv-facts{ margin-top:20px; display:grid; gap:12px; }
.uxv-fact{ display:grid; grid-template-columns: 160px 1fr; gap:12px; align-items:center; }
.uxv-label{ color:#4b5563; font-weight:700; }
.uxv-value{ color:#0f172a; font-weight:600; }

@media (max-width:560px){
  .uxv-fact{ grid-template-columns: 120px 1fr; }
}