/* Native date selection works without JavaScript on registration and account forms. */
input.ni-birthday-picker[type="date"] { display:block; width:100%; min-width:0; max-width:100%; min-height:48px; box-sizing:border-box; font:inherit; color:inherit; color-scheme:light; }
input.ni-birthday-picker[type="date"]::-webkit-calendar-picker-indicator { cursor:pointer; opacity:.8; padding:6px; }
.ni-passport-field:has(.ni-birthday-picker) em,.ni-member-field--birthday em { color:var(--ni-danger,#a15f56); font-style:normal; }
@media(max-width:760px) { input.ni-birthday-picker[type="date"] { font-size:16px; } }

/* Marks sit beside the control without shifting required fields away from
   optional fields. Their position follows the control's actual height. */
.ni-required-control { position:relative; display:flex; align-items:center; width:100%; min-width:0; }
.ni-required-control > .ni-required-mark { position:absolute; inset-inline-end:calc(100% + 10px); top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:12px; margin:0; padding:0; color:#a36359; font:600 16px/1 sans-serif; pointer-events:none; }
.ni-required-control > :not(.ni-required-mark) { flex:1 1 0%; width:0; min-width:0; margin:0; }
/* Reserve one gutter per grid column for marks; required and optional controls
   retain the same full width and labels share their control's start edge. */
html body.ni-page-member [data-ni-member-field-grid="account-profile-basic"] {
  padding-inline-start:22px;
  column-gap:38px;
}
.ni-passport-form--register .ni-passport-field .ni-passport-notice { display:block; margin:6px 0 0; line-height:1.5; overflow-wrap:anywhere; }
.ni-passport-form--register .ni-passport-notice:empty { display:none; }