/* Shared login and edit form styles */
.edit, #slform_5 {
  box-sizing: border-box;
  width: min(100% - 32px, 440px);
  margin: 24px auto;
  padding: 20px;
  background: #eee;
  border: 1px solid #aaa;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgb(0 0 0 / 12%);
}
.edit *, #slform_5 * { box-sizing: border-box; }
.edit .row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.edit label, #slform_5 .sltextfield_5 label { display: block; margin: 0 0 5px; font-weight: 600; }
.edit input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
.edit select, .edit textarea,
#slform_5 input[type='text'], #slform_5 input[type='email'], #slform_5 input[type='password'] {
  width: 100%; min-width: 0; padding: 8px; border: 1px solid #777; border-radius: 5px;
}
.edit input[type='checkbox'], .edit input[type='radio'] { width: auto; flex: none; }
.edit .form-check-inline, .edit .checkbox-label { display: inline-flex; align-items: center; gap: 6px; width: auto; }
.edit button, #slform_5 button {
  display: block; margin: 14px auto 0; padding: 9px 24px;
  background: #aac2df; border: 1px solid #555; border-radius: 9px; cursor: pointer;
}
.edit button:hover, #slform_5 button:hover { background: #fff; }
.edit .form-buttons { text-align: center; }
#msg { display: none; padding: 10px; margin: 10px 0; font-weight: 700; }
#msg.success { color: #176b28; }
#msg.error, #slform_5 .slformmsg_5 { color: #b42318; }
.editWrap { display: flex; align-items: flex-start; gap: 20px; }
.photoBlock { flex: 0 0 auto; }
.formPanel { flex: 1; min-width: 0; }
#slform_5 .sltextfield_5, #slform_5 .slcbfield_5, #slform_5 .slcaptchafield_5 { margin-bottom: 15px; }
#slform_5 .slcbfield_5 label { display: inline; font-weight: 400; }
#slform_5 .slcaptchafield_5 input { max-width: 200px; }
#slforgot_5, #slsignup_5 a { text-decoration: underline; cursor: pointer; }
#slfakenamediv_5 { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; }
#myButton_5, .viewpassimage_5 { position: relative; }
img.viewpassimage_5 { position: absolute; width: 16px; height: 16px; right: 10px; top: calc(50% - 8px); }
#slspinner_5 { display: none; position: absolute; right: 6px; top: calc(50% - 8px); width: 16px; height: 16px; border: 2px solid #bcd; border-top-color: #008ad6; border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .editWrap { flex-direction: column; }
  .edit .row { flex-wrap: wrap; }
  .edit { padding: 16px; }
}