/* Do not show the avatar if there is no user associated with the avatar
 * or if the message is not the last message in the group.
 * A hidden
 */
layer-messages-list layer-message-item layer-avatar:not(.layer-has-user),
layer-messages-list layer-message-item:not(.layer-list-item-last) layer-avatar {
  height: 0px;
}
layer-messages-list layer-message-item layer-avatar:not(.layer-has-user) *,
layer-messages-list layer-message-item:not(.layer-list-item-last) layer-avatar * {
  display: none;
}
layer-messages-list layer-message-item .layer-sender-info,
layer-messages-list layer-message-item layer-date {
  display: none;
  color: #ADB9C1;
  font-size: 0.8em;
}
layer-message-item .layer-list-item {
  align-items: flex-end;
  margin-bottom: 4px;
}
layer-message-item .layer-list-item layer-message-status {
  display: none;
}
layer-message-item .layer-list-item .layer-message-item-content {
  padding: 4px 12px;
  display: inline-block;
  border-radius: 16px;
}
layer-message-item.layer-message-item-sent {
  justify-content: flex-end;
}
layer-message-item.layer-message-item-received .layer-message-item-content {
  background-color: #ECEFF1;
  border: solid 1px #E4E9EC;
  color: #313F48;
}
layer-message-item.layer-message-item-received layer-avatar {
  margin-right: 30px;
  margin-left: 5px;
}
layer-message-item.layer-list-item-first .layer-sender-name {
  display: block;
}
layer-message-item.layer-list-item-last layer-date {
  display: block;
}
layer-message-item.layer-message-item-sent .layer-message-item-content {
  background-color: #19A5E4;
  border: solid 1px #2996CC;
  color: #FAFBFC;
}
layer-message-item.layer-message-item-sent layer-avatar {
  margin-right: 5px;
  margin-left: 30px;
}
layer-message-item.layer-list-item-last .layer-sender-details {
  margin-top: 4px;
  display: block;
}
layer-message-item.layer-list-item-last .layer-sender-details layer-date {
  display: inline;
}
layer-message-item.layer-list-item-last.layer-last-message-sent layer-message-status {
  display: inline;
  margin-left: 10px;
}
layer-message-item.layer-list-item-last .layer-message-item-delete {
  margin-bottom: 18px;
}
layer-message-item layer-delete {
  opacity: 0;
}
layer-message-item layer-delete.layer-delete-enabled {
  opacity: 0.4;
  color: #ADB9C1;
  border: solid 1px transparent;
  padding: 2px 4px 8px;
}
layer-message-item layer-delete.layer-delete-enabled:hover {
  opacity: 1;
  color: white;
  border-radius: 12px;
  background-color: #aaa;
  border: solid 1px #888;
}
layer-composer {
  background-color: #FAFBFC;
  border-top: solid 1px #dde4e7;
  /* Any change you make to textarea MUST be made to .hidden-resizer as well!!! */
}
layer-composer textarea,
layer-composer .hidden-resizer {
  border-width: 0px;
  background-color: #FAFBFC;
}
layer-composer.layer-composer-one-line-of-text textarea,
layer-composer.layer-composer-one-line-of-text .hidden-resizer,
layer-composer.layer-composer-one-line-of-text .hidden-lineheighter {
  line-height: 25px;
}
layer-composer .layer-compose-button-panel {
  padding: 6px 10px 6px 2px;
}
layer-composer .layer-compose-button-panel button {
  border: solid 1px #C3CDD4;
  color: #C3CDD4;
  background-color: transparent;
  border-radius: 8px;
  cursor: pointer;
}
layer-composer .layer-compose-button-panel button:hover {
  color: #2AACE7;
  border-color: #2AACE7;
}
layer-conversations-list {
  background-color: #fafbfc;
}
layer-conversation-item .layer-list-item {
  cursor: pointer;
  padding: 12px 5px;
  border-left: 3px solid transparent;
  border-bottom: solid 1px #dde4e7;
}
layer-conversation-item .layer-list-item:not(:first-child) {
  border-top: solid 1px #dde4e7;
}
layer-conversation-item .layer-list-item layer-conversation-title {
  font-weight: bold;
  font-size: 1.0rem;
  color: #313f48;
  margin-bottom: 2px;
}
layer-conversation-item .layer-list-item layer-avatar img,
layer-conversation-item .layer-list-item layer-avatar span {
  background-color: white;
  border: solid 1px rgba(0, 0, 0, 0.1);
  color: #8798a4;
}
layer-conversation-item .layer-list-item layer-conversation-last-message {
  color: #8798a4;
}
layer-conversation-item.layer-conversation-unread-messages .layer-list-item layer-conversation-title {
  color: #18262F;
}
layer-conversation-item.layer-conversation-unread-messages .layer-list-item layer-avatar * {
  border-color: #19a5e4;
  color: #313f48;
}
layer-conversation-item.layer-conversation-unread-messages .layer-list-item layer-conversation-last-message {
  color: #313f48;
}
layer-conversation-item.layer-selected-item .layer-list-item {
  background-color: #ffffff;
  border-left: 3px solid #19A5E4;
}
layer-conversation-item.layer-selected-item .layer-list-item layer-conversation-title {
  font-weight: bold;
}
layer-conversation-item.layer-selected-item .layer-list-item layer-avatar img,
layer-conversation-item.layer-selected-item .layer-list-item layer-avatar span {
  background-color: #fafbfc;
}
layer-conversation-item layer-delete {
  opacity: 0.4;
  color: #ADB9C1;
  border: solid 1px transparent;
  padding: 2px 4px 8px;
}
layer-conversation-item layer-delete:hover {
  opacity: 1;
  color: white;
  border-radius: 12px;
  background-color: #aaa;
  border: solid 1px #888;
}
layer-identities-list {
  background-color: #FFFFFF;
}
layer-identity-item .layer-list-item {
  border-bottom: solid 1px #dde4e7;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 3.5rem;
  color: #313f48;
}
layer-identity-item .layer-list-item:not(:first-child) {
  border-top: solid 1px #dde4e7;
}
layer-identity-item .layer-list-item.layer-identity-item-selected {
  background-color: #f4f5f6;
}
layer-identity-item .layer-list-item layer-avatar {
  padding: 0px 10px;
}
layer-identity-item .layer-list-item label {
  padding: 0px 10px;
}
layer-identity-item .layer-list-item input {
  margin: 0px 10px;
}
layer-notifier {
  background-color: #fff;
  padding: 10px 20px 10px 5px;
  border-radius: 8px;
  box-shadow: 4px 4px 4px #aaa;
}
layer-notifier layer-avatar {
  margin-left: 0px;
  margin-right: 15px;
}
layer-notifier layer-avatar span {
  font-size: 30px;
}
layer-notifier .layer-notifier-title {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 15px;
}
.layer-list-item-separator-parent .layer-list-item-separator-date {
  border-bottom: solid 1px #e4e9ec;
  text-align: center;
  margin-bottom: 20px;
  height: 10px;
}
.layer-list-item-separator-parent .layer-list-item-separator-date span {
  color: #adb9c1;
  position: relative;
  top: 2px;
  background-color: white;
  padding: 2px 15px;
  border: solid 1px #e4e9ec;
  border-radius: 8px;
}
/* Visual indication that this node is no longer valid;
primarily used for debugging... if you see this, your using the tools wrong.
*/
.layer-node-destroyed {
  background-color: black;
  color: black;
  opacity: 0.7;
}