.share-dialog {
  /* this creates issues if the screen is smaller than the dialog box, the bottom of the box will not be visible.
     But we need this in order to show the suggestions if the suggestions are longer than the dialog (same as XWIKI-11089) */
  overflow: visible;
}
.share-dialog .mail-preview {
  background-color: #fafafa;
  border: 1px solid #E8E8E8;
  border-radius: 4px;
  box-shadow: inset 0 0 7px #E8E8E8;
  padding: 0 10px;
  max-height: 20em;
  overflow: auto;
}
#shareTarget.withScope {
  border-left-width: 25px;
}
.targets-container {
  background: #eeeeee;
  border: 1px dotted #E8E8E8;
  margin: 4px 0;
  max-height: 4em;
  overflow: auto;
}
.target-item {
  background: transparent none left center no-repeat;
  display: inline-block;
  margin-right: 1em;
  padding: 0px 1px 0px 18px;
}
.targets-container .target-user {
  background-image: url("../../../resources/icons/silk/user.png");
}
.targets-container .target-group {
  background-image: url("../../../resources/icons/silk/group.png");
}
.targets-container .target-email {
  background-image: url("../../../resources/icons/silk/email.png");
}

.target-item .delete, .target-item .delete:visited {
  color: transparent; /*#FFFFFF;*/
  cursor: pointer;
  font-size: 70%;
  font-weight: bold;
  text-decoration: none !important;
  vertical-align: super;
}
.target-item:hover .delete {
  color: #777777;
}
.target-item .delete:hover {
  color: #d9534f;
}