.parent-contact-student-banner {
  width: fit-content;
  max-width: 100%;
  display: grid;
  gap: 3px;
  margin: 14px 0 12px;
  padding: 12px 16px;
  border: 1px solid #cfdbe8;
  border-left: 4px solid #173b6d;
  border-radius: 10px;
  background: #f7faff;
}

.parent-contact-student-label {
  color: #687b91;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.parent-contact-student-name {
  color: #173b6d;
  font-size: 1.3rem;
  line-height: 1.2;
}

.parent-contact-student-details {
  color: #62748a;
  font-size: .78rem;
}

.parent-contact-for-student {
  display: block;
  margin-top: 3px;
  color: #173b6d;
  font-size: .8rem;
  font-weight: 750;
}

@media (max-width: 600px) {
  .parent-contact-student-banner {
    width: 100%;
  }

  .parent-contact-student-name {
    font-size: 1.2rem;
  }
}


.group-parent-contact-card {
  margin-bottom: 18px;
}

.group-parent-contact-list {
  display: grid;
  gap: 8px;
}

.group-parent-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  border: 1px solid #dbe3ec;
  border-radius: 9px;
  background: #fff;
}

.group-parent-contact-row.is-current {
  border-color: #a9bfd8;
  background: #f7faff;
}

.group-parent-contact-student {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.group-parent-contact-student strong {
  color: #263b52;
}

.group-parent-contact-student span {
  color: #6b7c90;
  font-size: .75rem;
}

.group-contact-status {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid #d6dee8;
  border-radius: 999px;
  color: #64758a;
  background: #f7f9fb;
  font-size: .7rem;
  font-weight: 800;
}

.group-contact-status.is-current {
  border-color: #aac0da;
  color: #173b6d;
  background: #edf4fb;
}

.group-contact-status.is-complete {
  border-color: #bad8c5;
  color: #27623d;
  background: #f1f8f3;
}

@media (max-width: 600px) {
  .group-parent-contact-row {
    align-items: flex-start;
    flex-direction: column;
  }
}