.suggested-portfolio .nav-pills {
  padding: 8px 12px;
  width: max-content;
  background: var(--gray-blue-shade);
  border-radius: 16px;
}

.suggested-portfolio .nav-pills .nav-link {
  font-size: var(--font-size-16);
  line-height: 24px;
  
  color: var(--Grey-light-blue);
  padding: 10px 24px;
}

.suggested-portfolio .nav-pills .nav-link.active,
.suggested-portfolio .nav-pills .show > .nav-link {
  color: rgb(11 11 11);
  background-color: var(--white);
  border-radius: 10px;
  padding: 10px 24px;
}

.suggested-portfolio .card {
  background-color: var(--dark-grey-blue);
  border: 1px solid var(--semi-gray);
  border-radius: 10px;
}

.suggested-portfolio #pink-border {
  border-top: 5px solid var(--pink_medium);
  border-radius: 10px;
}

.suggested-portfolio #teal-border {
  border-top: 5px solid var(--teal_dark);
  border-radius: 10px;
}

.suggested-portfolio #purple-border {
  border-top: 5px solid var(--purple_dark);
  border-radius: 10px;
}

.suggested-portfolio .card p {
  margin-bottom: 0;
  color: var(--light_gray);
}

.suggested-portfolio .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.suggested-portfolio .card-body .inner-box-data {
  display: flex;
  justify-content: space-between;
}

.suggested-portfolio .card .card-body p {
  font-size: var(--font-size-12);
}

.suggested-portfolio .card .card-body h6 {
  font-size: var(--font-size-16);
  font-weight: 600;
  color: var(--Grey-light-blue);
}

.suggested-portfolio .card-header div {
  flex: 2;
}

.suggested-portfolio .draw-badge-dark {
  color: #579888 !important;
  background-color: #E5FFFB !important;
  border: 1px solid #96DDCC !important;
}

/* ------------------------------------------------------------------
   Portfolio cards can be rendered on both dark and light sections.
   - On dark sections (e.g. `.suggested-portfolio.bg_colo_overlay`) we want dark cards.
   - On light sections, we want light cards.
------------------------------------------------------------------- */

/* Light variant (default) */
.suggested-portfolio:not(.bg_colo_overlay) .portfolio-card {
  background-color: #F9FAFB !important;
  border-left: 1px solid #EAECF0 !important;
  border-right: 1px solid #EAECF0 !important;
  border-bottom: 1px solid #EAECF0 !important;
}

.suggested-portfolio:not(.bg_colo_overlay) .portfolio-title,
.suggested-portfolio:not(.bg_colo_overlay) .cagr-value,
.suggested-portfolio:not(.bg_colo_overlay) .cagr-label {
  color: #252121 !important;
}

.suggested-portfolio:not(.bg_colo_overlay) .portfolio-subtitle {
  color: #98A2B3 !important;
}

/* Dark variant */
.suggested-portfolio.bg_colo_overlay .portfolio-card {
  background: rgba(37, 33, 33, 1) !important;
  border: 1px solid #333 !important;
}

.suggested-portfolio.bg_colo_overlay .portfolio-title,
.suggested-portfolio.bg_colo_overlay .cagr-value,
.suggested-portfolio.bg_colo_overlay .cagr-label {
  color: var(--Grey-50, #F9FAFB) !important;
}

.suggested-portfolio.bg_colo_overlay .portfolio-subtitle {
  color: var(--Grey-400, #98A2B3) !important;
}

.suggested-portfolio .graph-container {
  background: none !important;
}

.suggested-portfolio .nav-item {
  display: flex;
  justify-content: center;
  align-items: center;
}