.person-container {
  max-width:980px;
  background-color:#fff;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.person-side-panel { width:300px; position:absolute; top:200px; left:570px }
.company-selector { padding:0 0 10px 70px }
.index-people { }
  .index-people h3 { color:#999999; font-size:13px; font-weight:normal }
  .index-people a.user { font-size:10px; text-transform:uppercase }

/* used in many places */
.people-list { overflow-y: auto; width: 100%; table-layout: fixed; display:inline-block; }
.people-list td { font-size:12px; border-bottom:solid 1px #dddddd; padding:0 }
.people-list tr { height:20px; }
.people-list tr:last-child td { border-bottom:0 }
.people-list td.name { width:250px  }
.people-list td.email { width:150px }
.people-list td.groups { width:150px }
.people-list .phone-kind { display:inline-block; width:80px; font-size:11px; color:#888; text-align:left; padding-left:7px; }

#groups { border:1px solid #ccc; height:100px; overflow-y:scroll; padding:5px; margin-top:10px; background:#f1f1f1; }
#groups ul { list-style:inside disc; }

.edit-person .person-history { padding:15px; }

.fields-popover { display:none; position-area:bottom; margin:4px 0 0; min-width:120px; }
.fields-popover:popover-open { display:block; }
.fields-popover li:hover { background-color:#eee; cursor:pointer; }
.fields-popover li {  }
.fields-popover label { cursor:pointer }

.export-popover { display:none; position-area:bottom; margin:4px 0 0; width:185px;}
.export-popover:popover-open { display:block; }
.export-popover .hint { font-size:11px; }

.labels-dialog { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); margin:0; width:700px; }
.labels-dialog[open] { display:block; }
.labels-dialog .indicator { display:block; margin:20px auto; }

/* ================================== */
/* =              Events            = */
/* ================================== */


.tools li { line-height:1.7em; font-size:1.2em; }


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

.person-form { padding:10px; }
  .person-form .form-field .field-label { display: inline-block; width: 90px }
  .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 }
  .person-form .new-group-dialog[open] { display: block }
  .person-form .new-group-dialog #new_group { margin-left: 10px; margin-right: 10px; width: 250px; font-size: 13px}
  .person-form .groups { background-color:#555555; position:absolute; top:-45px; left:455px; width:240px; padding:15px }
    .person-form .groups h3 { color:#eeeeee; text-align:center; margin:0 }
    .person-form .groups ul { padding:0; margin:0 }
    .person-form .groups li { list-style-type:none; padding:4px 0 }
    .person-form .groups a { color:#ccccff; padding:10px 0 }
    .person-form .groups a:hover { color:#ffffff }
    .person-form .groups-dialog { position:absolute; top:45px; left:455px; width:570px; max-height:75%; overflow-y:auto; overflow-x:hidden; }
    .person-form .groups-dialog li:hover { background-color:#444; cursor:pointer; }
    .person-form .groups-dialog li { padding:2px 6px 0px 14px; }
    .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: inline-block;
      font-size: 13px;
      width: calc(100% - 100px);
      border-radius: 0;

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

    /* A glitch happens if we show the normal select before select2 renders */
    .person-form .groups-field :not(.select2-container) select { display: none }
    .person-form .groups-field :not(.select2-container) .groups-select-container { height: 30px; width: 410px; background-color: #f5f5f5 }
    .person-form .groups-field .ts-control { border-radius:0; box-shadow:none }

.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;
}
.show-group .left-column { float: left; width: 420px; padding: 20px; }
.show-group .right-column { float: left; width: 420px; padding: 20px; }