/* Identity verification dialog. Reuses .auth-field, .field-error and .notice-box. */
#modalCard[data-kind="identity"] .identity-form { margin-top: 14px; }
#modalCard[data-kind="identity"] .identity-field { margin: 0 0 6px; }

.identity-grid { display: grid; gap: 0 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.identity-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.identity-fieldset { border: 0; margin: 0; padding: 0; }
.identity-fieldset legend {
  float: left; width: 100%; padding: 0; margin: 10px 0 8px; color: white;
  font-size: 10px; font-weight: 850; letter-spacing: .04em;
}
.identity-fieldset legend + .identity-grid { clear: both; }

.identity-field select {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px;
  background: rgba(0,0,0,.18); color: inherit; font: inherit; font-size: 11px;
  appearance: none; cursor: pointer;
}
.identity-field select:hover { border-color: var(--line-strong); }
.identity-field select:focus { border-color: rgba(200,255,56,.45); background: rgba(0,0,0,.27); box-shadow: 0 0 0 4px rgba(200,255,56,.055); outline: none; }
.identity-field select.has-error,
.identity-field select[aria-invalid="true"] { border-color: rgba(255,94,114,.68); box-shadow: 0 0 0 4px rgba(255,94,114,.055); }
.identity-field select option { background: #12161d; color: #eef1f5; }

/* The SSN field is masked, so keep the digits from being spaced like a password. */
.identity-field input[name="last4Ssn"] { letter-spacing: .3em; }

#modalCard[data-kind="identity"] .notice-box { margin-top: 14px; }

@media (max-width: 560px) {
  .identity-grid, .identity-grid-three { grid-template-columns: minmax(0, 1fr); }
  .identity-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}