.badge--custom,
.card-details {
  display: flex;
  padding: 6px 12px;
  align-items: center;
  gap: 8px;
  width: fit-content;

  border-radius: 9999px;
  border: 1px solid var(--color-border-ciano);
  background: var(--color-background);
}

.badge--custom.green {
  border: 1px solid rgba(110, 196, 0, 0.3);
  background: rgba(110, 196, 0, 0.15);
  height: fit-content;
}

.badge--custom.green .text {
  color: #6ec400;
  font-weight: 500;
}

.badge--custom.gray {
  border: 1px solid var(--color-badge--custom-gray-border);
  background: var(--color-badge--custom-gray-background);
  height: fit-content;
}

.badge--custom.gray .text {
  color: var(--color-badge--custom-gray-text);
  font-weight: 500;
}

.badge--custom .dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;
  background: #00e2f4;
  box-shadow: 0px 0px 0px 2px rgba(0, 226, 244, 0.15);
}

.badge--custom .text {
  color: var(--color-text-gray);
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.card-details {
  border-radius: 16px !important;
  gap: 1rem;
  width: 100%;
  height: 100%;
}

.card-details .text {
  color: var(--color-text-gray);
  text-align: start;
  padding: 12px;
}