body.patient-profile-edit-page-body {
  background: var(--color-3);
}

.patient-profile-edit-page-body {
  --patient-profile-edit-card-gap: var(--space-24);
  --patient-profile-edit-field-gap: var(--space-24);
  --patient-profile-edit-field-inner-gap: 0;
  --patient-profile-edit-error-height: 16px;
}

.patient-profile-edit-page {
  display: grid;
  gap: var(--space-24);
}

.patient-profile-edit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
  align-items: start;
}

.patient-profile-edit__card {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: var(--patient-profile-edit-card-gap);
  height: 100%;
  padding: var(--space-24);
  background: var(--color-3);
  border: 1px solid var(--color-43);
  border-radius: var(--radius-16);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04);
}

.patient-profile-edit__card-title {
  margin: 0;
  color: var(--color-0);
}

.patient-profile-edit__fields {
  display: grid;
  align-content: start;
  gap: var(--patient-profile-edit-field-gap);
}

.patient-profile-edit__field {
  display: grid;
  grid-template-rows: auto minmax(48px, auto) minmax(var(--patient-profile-edit-error-height), auto);
  align-content: start;
  gap: var(--patient-profile-edit-field-inner-gap);
  position: relative;
}

.patient-profile-edit__label {
  color: var(--color-4);
  margin-bottom: var(--space-8);
}

.patient-profile-edit__control-wrap {
  position: relative;
  display: block;
  min-height: 48px;
}

.patient-profile-edit__control {
  width: 100%;
  min-height: 48px;
  padding: 12px 44px 12px 16px;
  border: 1px solid var(--color-43);
  border-radius: var(--radius-12);
  background: var(--color-3);
  color: var(--color-0);
  outline: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.patient-profile-edit__control[readonly] {
  color: var(--color-4);
  background: var(--color-9);
}

.patient-profile-edit__control::placeholder {
  font: inherit;
  color: var(--color-4);
  opacity: 1;
}

.patient-profile-edit__control:focus {
  border-color: var(--color-34);
  box-shadow: 0 0 0 3px rgba(0, 172, 170, 0.12);
}

.patient-profile-edit__control--select {
  cursor: pointer;
}

.patient-profile-edit__control[data-invalid="true"] {
  border-color: var(--color-40);
  box-shadow: 0 0 0 3px rgba(217, 75, 75, 0.12);
}

.patient-profile-edit__icon-button {
  cursor: pointer;
}

.patient-profile-edit__icon-button--static {
  pointer-events: none;
}

.patient-profile-edit__icon-mask {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: var(--color-4);
  transition: transform 0.2s ease;
  mask-image: var(--icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 20px 20px;
  -webkit-mask-image: var(--icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 20px 20px;
}

.patient-profile-edit__icon-button[aria-expanded="true"] .patient-profile-edit__icon-mask {
  transform: rotate(180deg);
}

.patient-profile-edit__error {
  display: block;
  min-height: var(--patient-profile-edit-error-height);
}

.patient-profile-edit__error[hidden] {
  display: block !important;
  visibility: hidden;
}

.patient-profile-edit__control-wrap--date .patient-profile-edit__control {
  cursor: text;
}

.patient-profile-edit__actions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.patient-profile-edit__actions .ui-accent-button {
  min-width: 220px;
}

@media (max-width: 1100px) {
  .patient-profile-edit__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .patient-profile-edit-page {
    gap: var(--space-20);
  }

  .patient-profile-edit-page-body {
    --patient-profile-edit-card-gap: var(--space-20);
    --patient-profile-edit-field-gap: var(--space-20);
  }

  .patient-profile-edit__grid {
    gap: var(--space-20);
  }

  .patient-profile-edit__card {
    padding: var(--space-20);
    box-shadow: none;
  }

  .patient-profile-edit__actions {
    width: 100%;
    justify-content: stretch;
  }

  .patient-profile-edit__actions .ui-accent-button {
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-content: center;
  }
}