/* ================================== */
/* =         Person Form            = */
/* ================================== */

.person-form { padding:10px; }
  .new-person .person-form-actions { box-sizing:border-box; max-width:980px; margin-top:12px; padding:0 10px; }
  .person-form-actions { display:flex; align-items:center; gap:15px; min-height:36px; }
  .person-form-notice { color:#777; }
  .person-form-buttons { display:flex; align-items:center; gap:10px; margin-left:auto; }
  .person-form-buttons .smooth-button { display:inline-block; box-sizing:border-box; min-width:120px; margin:0; }
  .person-form .form-field .field-label { display: inline-block; width: 90px }
  .person-form .stacked-field .field-label { display: block; width: auto; margin-bottom: 6px }
  .person-form input[type=text] { width: calc(100% - 100px) }
  .person-form #cities { display: inline-block; width: calc(100% - 100px); vertical-align: middle }
    .person-form #cities select { width: 100% }
  .person-form .new-group-link { float: right; padding-top: 5px }
  .person-form .new-group-dialog { display:none; width:360px; max-width:calc(100% - 60px); }
  .person-form .new-group-dialog[open] { display:block; }
  .person-form .new-group-dialog::backdrop { background-color:rgba(0, 0, 0, .4); }
  .person-form .new-group-dialog label { display:block; margin-bottom:6px; }
  .person-form .new-group-dialog #new_group { box-sizing:border-box; display:block; width:100%; font-size:13px; }
  .person-form .new-group-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
    .person-form .email-flags { float: right }
      .person-form .email-flags a { color:#f33; font-size:11px; font-weight:bold; }
      .person-form .multiple-emails { font-size:13px; padding-right: 10px; font-weight: bold; }
      .person-form .email-status { position:absolute; left:-20px; top:3px; padding:4px 8px; }
    .person-form .email-label { display:inline-block; position:relative; width:90px }
    .person-form .email-field { display:inline-flex; align-items:center; gap:4px; width:calc(100% - 100px) }
    .person-form .data-form .email { flex:1; min-width:0; width:auto }
    .person-form .send-mail { position:relative }
    .person-form {
      &.company {
        .nickname-field, .company-field, .profession-field, .title-field, .gender-field, .birthdate-field {
          display: none
        }
      }
      &.not-company {
        .website-field {
          display: none
        }
      }
    }
    .person-form .notes-field {
      --lexxy-editor-rows: 3lh;
      display: block;
      font-size: 13px;
      width: 100%;
      box-sizing: border-box;
      border-radius: 0;

      .lexxy-editor__content {
        padding-block: 0;
      }
    }

    /* A glitch happens if we show the normal select before select2 renders */
    .person-form .groups-table { width: 100%; }
    .person-form .groups-field :not(.select2-container) select { display: none }
    .person-form .groups-field :not(.select2-container) .groups-select-container { min-height: 30px; background-color: #f5f5f5 }
    .person-form #person-groups-select { display: block; width: 100%; }
    .person-form .groups-select-container { width: 100%; }

.person-form .zips-dialog { overflow-y:auto; overflow-x:hidden; max-height:75%; }
.person-form .zips-dialog tr:hover { background-color:#555; cursor:pointer; }
.data-form .phones th {
  color: #999;
  font-size: 10px;
  text-transform: uppercase;
}

.data-form .phones .remove-phone {
  font-size: 16px;
  margin-left: 10px;
  opacity: 0;
  pointer-events: none;
}

.data-form .phones .phone:hover .remove-phone {
  opacity: 1;
  pointer-events: auto;
}