/* Field titles (static/web/js/features/field-titles.js) — the visible name above every form field.
   Loaded on the public site and the back office. */
.cx-field-title {
  display: block; flex: 0 0 100%; width: 100%; max-width: 100%;
  margin: 0 0 6px; padding: 0;
  font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--cx-ink, #1f2937);
  text-align: left; white-space: normal; overflow-wrap: anywhere;
  position: static; transform: none; pointer-events: auto; cursor: default;
}
label.cx-field-title[for] { cursor: pointer; }

/* Legacy profile form (templates/web/website/create_resume.html): each <p> is one field box. */
#Form div.form-set form div.form-box div.form-data div.flex-box p .cx-field-title { flex-basis: 100%; }
/* The calendar / pin icon centres on the input, not on the input plus its title. */
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon:not(.end_date) > .cx-field-title ~ i,
#Form div.form-set form div.form-box div.form-data div.flex-box p.icon:not(.end_date) > .cx-field-title ~ .zmdi { top: auto; bottom: 23px; transform: translateY(50%); }
/* "End date" shares its line with the "Present" checkbox: lay them out in flow (title left, checkbox right,
   wrapping when the cell is too narrow) instead of pinning the checkbox over the title. Start/end dates stack
   below 992px, where side by side would leave each cell too narrow for both. */
#Form div.form-set form div.form-box div.form-data div.flex-box .end_date { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
#Form div.form-set form div.form-box div.form-data div.flex-box .end_date > .cx-field-title { flex: 1 1 auto; width: auto; min-width: 0; order: 0; }
#Form div.form-set form div.form-box div.form-data div.flex-box .end_date > .single-check-box { position: static; order: 1; margin: 0 0 6px auto; padding: 0; }
#Form div.form-set form div.form-box div.form-data div.flex-box .end_date > input:not([type=checkbox]) { order: 2; flex: 0 0 100%; width: 100% !important; }
#Form div.form-set form div.form-box div.form-data div.flex-box .end_date > i,
#Form div.form-set form div.form-box div.form-data div.flex-box .end_date > .zmdi { display: none; }
@media (max-width: 991px) {
  #Form div.form-set form div.form-box div.form-data div.flex-box p.child-1 { grid-template-columns: 1fr; row-gap: 12px; }
}