.patient-chart--row-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2.5rem;

  @media screen and (max-width: 576px) {
    flex-direction: column;
    gap: .5rem;
  }
}

.patient-chart--row-item-date {
  text-align: left;
  font-size: var(--rem-13);
  line-height: var(--rem-22);
  color: var(--text-label);
  width: 2rem;
}

.patient-chart--row-item-column-container {
  width: calc(100% - 2.5rem - 2rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

  @media screen and (max-width: 576px) {
    width: 100%;
  }
}

.patient-chart--row-item-name-row {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.patient-chart--row-item-main-text {
  font-size: var(--rem-14);
  line-height: var(--rem-22);
  color: var(--text-body);
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 2.25rem);
}

.patient-chart--row-item-subtitle-text {
  font-size: var(--rem-13);
  line-height: var(--rem-21);
  color: var(--text-information);
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: calc(1.5rem + 0.75rem);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  max-width: calc(100% - 2.25rem);
}

.patient-chart--header-actions {
  display: flex;
  position: relative;
  align-items: center;
  color: var(--text-action-neutral-secondary);
  font-size: var(--rem-13);
  font-variation-settings: 'wght' var(--text-medium);
  gap: 1rem;

}

.patient-chart--orders-filters-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}