.summary-card {
  background-color: var(--gray-25);
  border: var(--border-width-thin) solid var(--gray-300);
  border-radius: var(--radius-2xl);
  gap: var(--spacing-6);
  box-shadow: var(--shadow);
  padding: var(--spacing-6);
  height: 104px;
}

.summary-card__header {
  font-size: var(--font-size-sm);
  gap: var(--spacing-4);
}

.summary-card__header__title {
  gap: var(--spacing-4);
}

.summary-card__header .icon {
  border-radius: var(--radius-sm);
  border-style: solid;
  border-width: var(--border-width-thin);
}

.summary-card__header .single-select__dropdown {
  margin-left: calc(var(--spacing-2) * -1);
  font-size: var(--font-size-sm);
  border: none;
  padding: 0;
}

.summary-card__header .single-select__dropdown div {
  color: var(--primary-700);
  text-decoration: underline;
}

.summary-card__header .single-select__dropdown i {
  margin: calc(var(--spacing-4) * -1);
  color: var(--primary-700);
  font-size: var(--font-size-xs);
}

.summary-card__header .single-select__container {
  width: 170px;
}

@media (max-width: 767px) {
  .summary-card {
    min-height: 138px;
    height: 100%;
    gap: var(--spacing-ml);
  }
  .summary-card__header__title, .summary-card .card__body{
    flex-direction: var(--flex-direction-col);
  }

  .summary-card__header__title {
    gap: var(--spacing-2);
  }

  .summary-card__header{
    min-height: var(--spacing-8);
    align-items: var(--items-start);
    height: 100%;
  }

  .summary-card__header .single-select__container {
    height: var(--spacing-7);
  }

  .summary-card__header .single-select__dropdown{
    height: var(--spacing-7);
    margin-left: -14px;
  }

  .summary-card .card__body h3, .summary-card .card__body h5{
    height: 28px;
  }

  .summary-card-header .card__title{
    margin-top: var(--spacing-1);
  }

}