layer-connect-open-button {
  font: normal normal normal 14px/1 FontAwesome;
  border: solid 1px #ccc;
  border-radius: 32px;
  padding: 13px;
  width: 30px;
  height: 30px;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.21);
  background-color: white;
  color: #19A5E4;
  font-size: 30px;
  text-align: center;
}
layer-connect-open-button:hover {
  border-color: #19A5E4;
}
layer-connect-open-button.layer-has-unread-conversations:after {
  content: " ";
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  border-radius: 16px;
  width: 20px;
  height: 20px;
  background-color: #19A5E4;
  border: solid 2px white;
}
.layer-connect-main-dialog {
  display: none;
  position: absolute;
  right: 20px;
  bottom: 100px;
  width: 350px;
  height: 500px;
  border-radius: 8px;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.21);
  flex-direction: column;
}
.layer-open-dialog .layer-connect-main-dialog,
layer-connect-panel-conversation {
  display: flex;
}
layer-connect-dialog-conversation .layer-back-button {
  display: none;
}
layer-connect-panel-conversation {
  border: solid 1px rgba(0, 0, 0, 0.21);
}
.layer-back-button {
  display: inline-block;
  font: normal normal normal 22px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.layer-back-button:before {
  content: "\f053";
}
.layer-connect-main-dialog .layer-tab,
layer-connect-panel-conversation .layer-tab {
  flex-grow: 1;
}
.layer-connect-main-dialog .layer-tab:focus,
layer-connect-panel-conversation .layer-tab:focus {
  outline: none;
}
.layer-connect-main-dialog .layer-dialog-title,
layer-connect-panel-conversation .layer-dialog-title {
  background-color: #19A5E4;
  border-bottom: solid 1px #8bd0ef;
  border-radius: 8px 8px 0 0;
  color: white;
  text-align: center;
  line-height: 60px;
  display: flex;
  flex-direction: row;
}
.layer-connect-main-dialog .layer-title-text,
layer-connect-panel-conversation .layer-title-text {
  flex-grow: 1;
}
.layer-connect-main-dialog .layer-title-buttons,
layer-connect-panel-conversation .layer-title-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.layer-connect-main-dialog .layer-title-buttons .layer-title-button,
layer-connect-panel-conversation .layer-title-buttons .layer-title-button {
  font-size: 22px;
  margin: 0px 6px;
  cursor: pointer;
  width: 0px;
}
.layer-connect-main-dialog .layer-title-buttons.layer-toggle-pannel button,
layer-connect-panel-conversation .layer-title-buttons.layer-toggle-pannel button {
  font-size: inherit;
  color: inherit;
  font-family: inherit;
  border: solid 1px #8bd0ef;
  box-shadow: 0 0 30px 0 #75cdf5;
  border-radius: 8px;
  background-color: transparent;
  position: absolute;
  right: 10px;
  cursor: pointer;
}
.layer-connect-main-dialog .layer-title-buttons.layer-toggle-pannel .layer-toggle-selected,
layer-connect-panel-conversation .layer-title-buttons.layer-toggle-pannel .layer-toggle-selected {
  display: none;
}
.layer-connect-main-dialog layer-compose-bar {
  border-radius: 0 0 8px 8px;
}
layer-connect-panel-conversation {
  border-radius: 8px 8px 0px 0px;
}
layer-connect-panel-conversation .layer-back-button {
  display: none;
}
layer-connect-welcome {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
layer-connect-welcome .layer-connect-welcome-message {
  background-color: #19A5E4;
  color: white;
  text-align: center;
  border-radius: 8px 8px 0px 0px;
  padding: 10px 55px;
}
layer-connect-welcome .layer-connect-welcome-spacer {
  flex-grow: 1;
}
layer-connect-welcome layer-compose-bar {
  border-top: solid 1px #E4E9EC;
}
layer-connect-conversation {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border-radius: 0px 0px 8px 8px;
}
layer-connect-conversation layer-compose-bar {
  border-top: solid 1px #E4E9EC;
}
layer-connect-conversation layer-compose-bar textarea {
  border-radius: 0 0 8px 8px;
}
/* Color Pallete */
/* Color Role Definitions */
/* Font Size Definitions */
/* Presence Widget */
/* Avatar Widget */
/* Identity Item */
/* Identity List */
/* Membership Item */
/* Membership List */
/* Conversation Item */
/* Conversation List */
/* Message Item */
/* If you have custom components to the left or right of the message, update these to allocate space for them;
 * Note that this also shifts any timestamps, sender names, etc... so that everything lines up correctly */
/* DEPRECATED; here solely to prevent preexisting themes from breaking */
/* Messages List */
/* Notifier / Toast */
/* Menu Button */
/* Menu */
/* Typing Indicators */
/* Composer */
/* Composer Button */
/* Spinner */
/* Boundaries (optional components) */
/* Buttons Message Type */
/*
 * Avatar widget theme
 */
layer-avatar {
  position: relative;
  overflow: visible;
  text-align: center;
  /* Every avatar has a span that contains text (initials) or an Image tag. If text, it will have a layer-text-avatar css class */
  /*
     * Handle the layout of each size of Avatar
     */
  /*
     * Presence is not a required part of the Avatar widget.  If you do not want it,
     * you should set the Avatar.showPresence property to false rather than setting
     * display: none.  Why? Because if showPresence is false, the presence widget is not created,
     * which is more efficient.
     */
  /*
     * Clustered Avatars for Group Chats have size and layout adjustments
     */
}
layer-avatar svg .layer-svg-fillable-background {
  fill: #ffffff;
}
layer-avatar svg .layer-svg-fillable {
  fill: #e9ebef;
}
layer-avatar svg .layer-svg-strokable {
  stroke: #e9ebef;
}
layer-avatar span {
  border: solid 1px transparent;
  display: block;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
  /* Text customizations */
  /* Image customizations */
}
layer-avatar span.layer-text-avatar {
  display: flex;
  justify-content: center;
  background-color: #dadde4;
  color: #ffffff;
}
layer-avatar span img {
  width: 100%;
  height: 100%;
}
layer-avatar.layer-size-small {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}
layer-avatar.layer-size-small span {
  height: 30px;
  width: 30px;
}
layer-avatar.layer-size-medium {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
layer-avatar.layer-size-medium span {
  height: 38px;
  width: 38px;
}
layer-avatar.layer-size-large {
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-size: 18px;
}
layer-avatar.layer-size-large span {
  height: 46px;
  width: 46px;
}
layer-avatar.layer-size-larger {
  width: 72px;
  height: 72px;
  line-height: 72px;
  font-size: 20px;
}
layer-avatar.layer-size-larger span {
  height: 70px;
  width: 70px;
}
layer-avatar layer-presence.layer-presence-invisible {
  background-color: #ffffff;
}
layer-avatar layer-presence:before {
  content: " ";
  border: solid 2px #ffffff;
  position: absolute;
  border-radius: 16px;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
}
layer-avatar layer-presence.layer-presence-invisible:before {
  top: -4px;
  bottom: -4px;
  left: -4px;
  right: -4px;
}
layer-avatar.layer-avatar-cluster > span {
  position: absolute;
}
layer-avatar.layer-avatar-cluster > span:nth-child(n+2) {
  border: solid 2px rgba(255, 255, 255, 0.7);
}
layer-avatar.layer-avatar-cluster.layer-size-small > *:nth-child(1),
layer-avatar.layer-avatar-cluster.layer-size-medium > *:nth-child(1),
layer-avatar.layer-avatar-cluster.layer-size-large > *:nth-child(1),
layer-avatar.layer-avatar-cluster.layer-size-larger > *:nth-child(1) {
  display: block;
}
layer-avatar.layer-avatar-cluster.layer-size-small > *:nth-child(2),
layer-avatar.layer-avatar-cluster.layer-size-medium > *:nth-child(2),
layer-avatar.layer-avatar-cluster.layer-size-large > *:nth-child(2),
layer-avatar.layer-avatar-cluster.layer-size-larger > *:nth-child(2) {
  margin-left: 25%;
  margin-top: 25%;
  z-index: 2;
  display: block;
}
layer-avatar.layer-avatar-cluster.layer-size-small > *,
layer-avatar.layer-avatar-cluster.layer-size-medium > *,
layer-avatar.layer-avatar-cluster.layer-size-large > *,
layer-avatar.layer-avatar-cluster.layer-size-larger > * {
  height: 70%;
  width: 70%;
  font-size: 0.7em;
  display: none;
}
layer-avatar.layer-avatar-cluster.layer-size-small > span {
  line-height: 22.4px;
}
layer-avatar.layer-avatar-cluster.layer-size-medium > span {
  line-height: 28px;
}
layer-avatar.layer-avatar-cluster.layer-size-large > span {
  line-height: 33.6px;
}
layer-avatar.layer-avatar-cluster.layer-size-larger > span {
  line-height: 50.4px;
}
/*
 * Presence widget theme
 */
layer-presence {
  box-sizing: border-box;
  /* Styling for each presence state */
  /* Styling for each presence size */
}
layer-presence.layer-presence-away {
  background-color: #ffd624;
}
layer-presence.layer-presence-busy {
  background-color: #eb3838;
}
layer-presence.layer-presence-available {
  background-color: #56bf46;
}
layer-presence.layer-presence-offline {
  background-color: #dadde4;
}
layer-presence.layer-presence-invisible {
  background-color: transparent;
  border: solid 2px #56bf46;
}
layer-presence.layer-size-small {
  width: 8px;
  height: 8px;
}
layer-presence.layer-size-medium {
  width: 10px;
  height: 10px;
}
layer-presence.layer-size-large {
  width: 12px;
  height: 12px;
}
/* Theming for the Composer panel and its buttons */
layer-compose-bar {
  border-top: 1px solid #f2f2f2;
  padding: 8px 4px;
  /* Any layout or size (or font/font-weight or other size allocation changes) change you make to textarea MUST be made to .hidden-resizer and .hidden-lineheighter as well!!! */
}
layer-compose-bar textarea,
layer-compose-bar .hidden-resizer,
layer-compose-bar .hidden-lineheighter {
  padding: 0px 4px;
  border-width: 0px;
  margin: 0px;
  /* Before tinkering with font-size, see http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone/6394497#6394497 */
  font-size: 1rem;
  font-family: sans-serif;
}
layer-compose-bar .layer-compose-edit-panel {
  /* Do not change left/right values or things will break */
  padding: 0px !important;
  /* Do not change left/right values or things will break */
  margin: 0px !important;
}
layer-compose-bar textarea {
  color: rgba(0, 0, 0, 0.87);
}
layer-compose-bar.layer-compose-bar-one-line-of-text textarea,
layer-compose-bar.layer-compose-bar-one-line-of-text .hidden-resizer,
layer-compose-bar.layer-compose-bar-one-line-of-text .hidden-lineheighter {
  line-height: 34px;
}
layer-compose-bar.layer-is-disabled textarea {
  color: #dadde4;
}
layer-compose-bar .layer-button-panel {
  /* Force all layer-replaceable-content to stay at the bottom of the panel */
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  /* Layout of buttons */
  /* The SEND button */
  /* The upload button */
  /* Generic buttons */
}
layer-compose-bar .layer-button-panel .layer-replaceable-inner:empty {
  display: none;
}
layer-compose-bar .layer-button-panel .layer-replaceable-inner > * {
  margin: 0px 8px;
}
layer-compose-bar .layer-button-panel layer-send-button,
layer-compose-bar .layer-button-panel button {
  font-size: 0.9rem;
  padding: 8px 8px;
  font-weight: bold;
  color: #1094d0;
  cursor: pointer;
  border-width: 0px;
  background-color: transparent;
}
layer-compose-bar .layer-button-panel layer-send-button.layer-send-button-has-value,
layer-compose-bar .layer-button-panel button.layer-send-button-has-value {
  color: #1094d0;
}
layer-compose-bar .layer-button-panel layer-send-button:disabled,
layer-compose-bar .layer-button-panel button:disabled {
  color: #dadde4;
}
layer-compose-bar .layer-button-panel layer-file-upload-button label {
  width: 32px;
  height: 32px;
}
layer-compose-bar .layer-button-panel button:hover {
  color: #1094d0;
}
layer-compose-bar.layer-is-empty layer-send-button {
  color: #a4a8b2;
}
layer-compose-bar.layer-is-disabled layer-send-button,
layer-compose-bar.layer-is-disabled button {
  color: #dadde4;
}
layer-conversation-view > .layer-conversation-view-top {
  border-bottom: solid 1px #f2f2f2;
}
layer-message-list {
  background-color: #ffffff;
}
layer-message-list .layer-list-meta {
  height: 50px;
  border: solid 1px transparent;
  /* Fixes dumb chrome reflow bug */
}
layer-message-list .layer-header-toggle {
  height: 50px;
  min-height: 50px;
}
layer-message-list .layer-end-of-results-indicator,
layer-message-list .layer-empty-list {
  font-size: 11px;
  padding: 4px 0px;
  margin: 8px 0px;
  color: #a4a8b2;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
layer-message-list .layer-load-indicator {
  max-height: 50px;
}
layer-message-list .layer-load-indicator layer-loading-indicator {
  position: relative;
  top: -20px;
}
/* Styles for Conversation List widget. Note that most styling of the list is done in layer-conversation-item.less */
layer-conversation-list {
  background-color: #ffffff;
}
layer-conversation-list .layer-list-item {
  cursor: pointer;
  border-bottom: solid 1px transparent;
}
layer-conversation-list .layer-list-item:not(:first-child) {
  border-top: solid 1px transparent;
}
layer-conversation-list .layer-empty-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 25px;
  font-size: 1rem;
  color: #a4a8b2;
}
/*
 * The Conversation Item widget
 *
 * From left-to-right we have roughly:
 * 1. Avatar or Presence
 * 2. Title
 * 3. Date
 * 4. Last Message
 * 5. Menu button
 *
 */
layer-conversation-item {
  /*
     * List items all contain a layer-list-item that contains the real contents of the item.
     */
  /* Style the selected Conversation Item */
  /* Style for Size Large */
  /* Style for Size Medium */
  /* Style for Size Small */
  /* Style for Size Tiny */
  /*
     * Styles for Avatar, Presence or counter showing how many users are in the group
     */
  /*
     * Conversation Titles have 3 states:
     * A. Normal
     * B. Unread
     * C. Selected
     */
  /*
     * Dates have 3 states:
     * A. Normal
     * B. Unread
     * C. Selected
     */
  /**
     * Conversation Last Messages have 3 states:
     * A. Normal
     * B. Unread
     * C. Selected
     */
  /**
     * Conversation Menu button
     */
}
layer-conversation-item .layer-list-item {
  padding-right: 8px;
  padding-left: 8px;
  box-sizing: border-box;
}
layer-conversation-item.layer-selected-item .layer-list-item {
  background-color: #f2f2f2;
}
layer-conversation-item.layer-size-large .layer-list-item {
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 72px;
}
layer-conversation-item.layer-size-large .layer-list-item layer-conversation-title {
  font-size: 1rem;
}
layer-conversation-item.layer-size-large .layer-list-item layer-conversation-item-date {
  font-size: 0.8rem;
}
layer-conversation-item.layer-size-large .layer-list-item layer-conversation-last-message {
  margin-top: 4px;
  font-size: 0.9rem;
}
layer-conversation-item.layer-size-medium .layer-list-item {
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 60px;
}
layer-conversation-item.layer-size-medium .layer-list-item layer-conversation-title {
  font-size: 1rem;
}
layer-conversation-item.layer-size-medium .layer-list-item layer-conversation-item-date {
  font-size: 0.8rem;
}
layer-conversation-item.layer-size-medium .layer-list-item layer-conversation-last-message {
  display: none;
  font-size: 0.8rem;
}
layer-conversation-item.layer-size-small .layer-list-item {
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 48px;
}
layer-conversation-item.layer-size-small .layer-list-item layer-conversation-title {
  font-size: 0.9rem;
}
layer-conversation-item.layer-size-small .layer-list-item layer-conversation-item-date {
  font-size: 0.7rem;
}
layer-conversation-item.layer-size-small .layer-list-item layer-conversation-last-message {
  display: none;
  font-size: 0.7rem;
}
layer-conversation-item.layer-size-tiny .layer-list-item {
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 32px;
}
layer-conversation-item.layer-size-tiny .layer-list-item layer-conversation-title {
  font-size: 0.9rem;
}
layer-conversation-item.layer-size-tiny .layer-list-item layer-conversation-item-date {
  display: none;
  font-size: 0.7rem;
}
layer-conversation-item.layer-size-tiny .layer-list-item layer-conversation-last-message {
  display: none;
  font-size: 0.7rem;
}
layer-conversation-item layer-avatar {
  margin-right: 12px;
}
layer-conversation-item layer-presence:not(.layer-presence-within-avatar) {
  margin-right: 10px;
}
layer-conversation-item layer-presence,
layer-conversation-item .layer-group-counter {
  margin-right: 8px;
}
layer-conversation-item .layer-group-counter {
  font-size: 8px;
  font-weight: bold;
  color: #a4a8b2;
  border: solid 1px #a4a8b2;
  border-radius: 4px;
  width: 12px;
  height: 12px;
  text-align: center;
  line-height: 14px;
}
layer-conversation-item layer-conversation-title {
  color: #1b1c1d;
  font-weight: normal;
  margin-right: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
layer-conversation-item.layer-conversation-unread-messages layer-conversation-title {
  font-weight: bold;
}
layer-conversation-item layer-conversation-item-date {
  color: #a4a8b2;
}
layer-conversation-item.layer-conversation-unread-messages layer-conversation-item-date {
  color: #1b1c1d;
}
layer-conversation-item layer-conversation-last-message {
  color: #a4a8b2;
  overflow-y: hidden;
}
layer-conversation-item.layer-conversation-unread-messages layer-conversation-last-message {
  color: #1b1c1d;
}
layer-conversation-item .layer-conversation-right-side {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
layer-conversation-item .layer-conversation-right-side .layer-replaceable-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
}
layer-conversation-item .layer-conversation-right-side .layer-replaceable-inner layer-menu-button span {
  line-height: 1rem;
  padding-right: 6px;
}
layer-conversation-item .layer-conversation-title-row {
  align-items: center;
}
layer-conversation-item.layer-size-large .layer-conversation-title-row {
  align-items: flex-start;
}
/* Styles for channel Items that appear within the channel List widget */
layer-channel-item {
  /* Style a basic channel Item.  Note that it may be better to put
     * background color on layer-channels-list rather than layer-channel-item
     */
  /* Style the selected channel Item */
  /* Style for Size Large */
  /* Style for Size Medium */
  /* Style for Size Small */
  /* Style for Size Tiny */
}
layer-channel-item .layer-list-item {
  padding-right: 12px;
  padding-left: 12px;
  box-sizing: border-box;
}
layer-channel-item.layer-selected-item .layer-list-item {
  background-color: #f2f2f2;
}
layer-channel-item .layer-channel-title {
  margin-right: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
layer-channel-item.layer-size-large .layer-list-item {
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 72px;
  font-size: 1rem;
}
layer-channel-item.layer-size-medium .layer-list-item {
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 60px;
  font-size: 1rem;
}
layer-channel-item.layer-size-small .layer-list-item {
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 48px;
  font-size: 0.9rem;
}
layer-channel-item.layer-size-tiny .layer-list-item {
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 32px;
  font-size: 0.9rem;
}
layer-identity-list {
  background-color: #ffffff;
}
layer-identity-list .layer-list-item {
  border-bottom: transparent;
}
layer-identity-list .layer-list-item:not(:first-child) {
  border-top: transparent;
}
layer-identity-list .layer-empty-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 25px;
  font-size: 1rem;
  color: #a4a8b2;
}
/*
 * The Identity Item widget
 */
layer-identity-item {
  /*
     * List items all contain a layer-list-item that contains the real contents of the item.
     */
  /*
     * Manage the different sizes
     */
}
layer-identity-item .layer-list-item {
  /* Eventually this may be used outside of a list, but for now, these should always appear selectable */
  cursor: pointer;
  padding-right: 12px;
  padding-left: 12px;
  box-sizing: border-box;
}
layer-identity-item .layer-list-item * {
  cursor: pointer;
}
layer-identity-item .layer-list-item input[type=checkbox] {
  margin-left: 12px;
}
layer-identity-item .layer-list-item .layer-identity-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #1b1c1d;
}
layer-identity-item .layer-list-item .layer-identity-metadata {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #a4a8b2;
  font-size: 12px;
  padding-top: 4px;
}
layer-identity-item .layer-list-item layer-age {
  font-size: 12px;
  color: #a4a8b2;
}
layer-identity-item.layer-size-large .layer-list-item {
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 72px;
}
layer-identity-item.layer-size-large .layer-list-item .layer-identity-name {
  font-size: 0.9rem;
}
layer-identity-item.layer-size-large .layer-list-item layer-avatar {
  margin-right: 12px;
}
layer-identity-item.layer-size-medium .layer-list-item {
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 60px;
}
layer-identity-item.layer-size-medium .layer-list-item .layer-identity-name {
  font-size: 0.9rem;
}
layer-identity-item.layer-size-medium .layer-list-item layer-avatar {
  margin-right: 12px;
}
layer-identity-item.layer-size-small .layer-list-item {
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 48px;
}
layer-identity-item.layer-size-small .layer-list-item .layer-identity-name {
  font-size: 0.9rem;
}
layer-identity-item.layer-size-small .layer-list-item layer-avatar {
  margin-right: 12px;
}
layer-identity-item.layer-size-tiny .layer-list-item {
  padding-top: 8px;
  padding-bottom: 8px;
  min-height: 32px;
}
layer-identity-item.layer-size-tiny .layer-list-item .layer-identity-name {
  font-size: 0.9rem;
}
layer-identity-item.layer-size-tiny .layer-list-item layer-presence.presence-without-avatar {
  margin-right: 8px;
}
layer-membership-list {
  background-color: #ffffff;
}
layer-membership-list .layer-list-item {
  cursor: pointer;
  border-bottom: transparent;
}
layer-membership-list .layer-list-item > * {
  cursor: pointer;
}
layer-membership-list .layer-list-item:not(:first-child) {
  border-top: transparent;
}
layer-membership-item {
  /* Style the selected Membership Item; reusing conversation style */
}
layer-membership-item .layer-list-item {
  color: #1b1c1d;
  font-size: 0.9rem;
  line-height: 3.5rem;
  padding: 20px 5px;
}
layer-membership-item .layer-list-item:not(:first-child) {
  border-top: transparent;
}
layer-membership-item.layer-selected-item .layer-list-item {
  background-color: #f2f2f2;
}
/* Styles for the Toast Popup that notifies users of new Messages */
layer-notifier {
  min-width: 320px;
  border-radius: 8px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  padding: 10px;
  border: solid 1px #f2f2f2;
  align-items: flex-start;
}
layer-notifier .layer-notifier-title {
  margin-bottom: 5px;
  font-size: 0.8rem;
  color: #1b1c1d;
  font-weight: bold;
  display: flex;
  flex-direction: row;
}
layer-notifier .layer-notifier-title:after {
  content: ':';
}
layer-notifier .layer-message-item-placeholder {
  font-size: 0.8rem;
  color: #1b1c1d;
  font-weight: normal;
}
layer-notifier .layer-notifier-message {
  line-height: 1.3rem;
  max-height: 3.6rem;
}
layer-notifier .layer-message-item-main {
  overflow-y: hidden;
  text-overflow: ellipsis;
}
layer-notifier.layer-notifier-toast-fade {
  top: 10px;
}
layer-notifier.layer-notifier-toast {
  top: 10px;
}
layer-notifier layer-avatar {
  margin-left: 0px;
  margin-right: 10px;
}
@media screen and (min-width: 640px) {
  layer-notifier {
    max-width: 60%;
  }
}
@media screen and (max-width: 640px) {
  layer-notifier {
    max-width: 95%;
    box-sizing: border-box;
  }
  layer-notifier.layer-notifier-toast {
    top: 4px;
    right: 4px;
  }
}
/* Styles for the Toast Popup that notifies users of new Messages */
layer-prompt.layer-prompt-showing {
  animation-name: layer-prompt-fade-in;
  animation-duration: 0.4s;
}
layer-prompt.layer-prompt-fading {
  animation-name: layer-prompt-fade-out;
  animation-duration: 0.4s;
  opacity: 0.01;
}
@keyframes layer-prompt-fade-in {
  from {
    opacity: 0.1;
  }
  to {
    opacity: 1.0;
  }
}
@keyframes layer-prompt-fade-out {
  from {
    opacity: 1.0;
  }
  to {
    opacity: 0.01;
  }
}
layer-prompt {
  background-color: #f2f2f2;
  padding: 10px;
  border: solid 1px #dadde4;
  align-items: flex-stretch;
  display: flex;
  flex-direction: column;
}
layer-prompt .layer-prompt-title {
  margin-bottom: 5px;
  font-size: 0.8rem;
  color: #1b1c1d;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
layer-prompt .layer-prompt-title:after {
  content: ':';
}
layer-prompt .layer-prompt-text {
  font-size: 0.8rem;
  color: #1b1c1d;
  font-weight: normal;
}
layer-prompt .layer-prompt-main {
  overflow-y: hidden;
  text-overflow: ellipsis;
  padding-top: 5px;
}
layer-prompt .layer-prompt-title,
layer-prompt .layer-prompt-text {
  text-align: center;
  padding: 4px 20px;
}
layer-prompt layer-action-button button {
  background-color: #f2f2f2;
}
@media screen and (max-width: 480px) {
  layer-prompt {
    width: 100vw;
    right: inherit;
    padding: 0px;
    bottom: 0px;
  }
  layer-prompt layer-action-button {
    border: solid 1px #e9ebef;
  }
}
@media screen and (min-width: 480px) {
  layer-prompt {
    width: 320px;
    border-radius: 8px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    right: 20px;
    bottom: 20px;
  }
}
.layer-list-item-separator-parent .layer-list-item-separator {
  margin-top: 4px;
  margin-bottom: 4px;
  color: #a4a8b2;
  font-size: 0.7rem;
}
.layer-list-item-separator-parent .layer-list-item-separator:first-child {
  margin-top: 12px;
}
.layer-list-item-separator-parent .layer-list-item-separator:last-child {
  margin-bottom: 12px;
}
.layer-list-item-separator-parent .layer-list-item-separator-date {
  height: 25px;
}
.layer-list-item-separator-parent .layer-list-item-separator-date-inner {
  border-bottom: solid 1px #dadde4;
  text-align: center;
  height: 12px;
}
.layer-list-item-separator-parent .layer-list-item-separator-date-inner layer-date {
  display: inline-block;
  color: #a4a8b2;
  font-size: 0.7rem;
  background-color: #ffffff;
  padding: 2px 15px;
  border: solid 1px #dadde4;
  border-radius: 8px;
}
/* Welcome message replaces the need for a first date indicator */
.layer-first-message-of-conversation .layer-list-item-separator-date {
  display: none;
}
layer-menu {
  background-color: #ffffff;
  border: solid 1px #f2f2f2;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  padding: 4px 0px;
}
layer-menu .layer-menu-button-menu-item {
  padding: 8px 32px 8px 16px;
  min-height: 32px;
  box-sizing: border-box;
  cursor: pointer;
  border-bottom: solid 1px #f2f2f2;
  color: #1b1c1d;
  font-size: 0.8rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
layer-menu .layer-menu-button-menu-item:hover {
  background-color: #f2f2f2;
  color: #313f48;
}
layer-menu .layer-menu-button-menu-item:last-child {
  border-bottom-width: 0px;
}
/*
 * The Menu Button widget
 */
layer-menu-button {
  display: none;
}
layer-menu-button span {
  padding: 0px 8px;
  font-size: 20px;
  color: #a4a8b2;
}
layer-menu-button span:hover {
  opacity: 1;
  color: #1b1c1d;
}
layer-menu-button.layer-has-menu {
  display: block;
}
.layer-list-item:hover layer-menu-button span {
  opacity: 1;
}
/* Animation */
@-webkit-keyframes layer-loader {
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes layer-loader {
  to {
    transform: rotate(360deg);
  }
}
/* Parent Nodes */
.layer-load-indicator {
  justify-content: center;
  display: flex;
  flex-direction: row;
}
.layer-load-indicator .layer-replaceable-inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 15px 0px;
}
layer-loading-indicator {
  display: block;
  margin: 15px 0px;
  width: 50px;
  height: 50px;
}
layer-loading-indicator > div {
  border-top-color: #dadde4;
  border-right-color: #dadde4;
  border-bottom-color: #f2f2f2;
  border-left-color: #f2f2f2;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  border-width: 4px;
  border-style: solid;
  -webkit-animation: layer-loader 1.2s infinite linear;
  animation: layer-loader 1.2s infinite linear;
}
/* Layout the Conversation panel */
layer-conversation-view layer-typing-indicator {
  height: 0px;
  text-align: center;
}
layer-typing-indicator.layer-typing-occuring span {
  display: inline;
  line-height: 18px;
  position: relative;
  top: -32px;
  overflow: visible;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 4px 6px;
  font-size: 0.7rem;
  color: #313f48;
}
/*

layer-conversation-view layer-typing-indicator {
  height: 0px;
  display: flex;
  flex-direction: column;
  align-content: stretch;
  background-color: @typing-indicators-background;
}

layer-typing-indicator.layer-typing-occuring span {
  text-align: center;
  font-size: @typing-indicators-size;
  color: @typing-indicators-color;
  top: -22px;
  height: 22px;
  display: block;
  line-height: 14px;
  position: relative;
  overflow: visible;
  background-color: @typing-indicators-background;
  padding: 2px 6px 0px 6px;
  margin: 0px 20px; // Do not cover scrollbars
}
*/
layer-file-upload-button {
  /* Inspired by http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */
}
layer-file-upload-button input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
layer-file-upload-button label {
  display: flex;
  pointer-events: none;
}
layer-file-upload-button svg {
  flex-grow: 1;
}
layer-file-upload-button svg .layer-svg-fillable {
  fill: #a4a8b2;
}
layer-file-upload-button svg .layer-svg-strokable {
  stroke: #a4a8b2;
}
layer-file-upload-button:hover svg .layer-svg-fillable {
  fill: #1094d0;
}
layer-file-upload-button:hover svg .layer-svg-strokable {
  stroke: #1094d0;
}
layer-dialog.layer-dialog-showing {
  animation-name: layer-dialog-fade-in;
  animation-duration: 0.4s;
}
layer-dialog.layer-dialog-showing .layer-dialog-inner {
  animation-name: layer-dialog-fade-in;
  animation-duration: 1.2s;
}
layer-dialog.layer-dialog-hiding {
  animation-name: layer-dialog-fade-out;
  animation-duration: 0.4s;
  opacity: 0.1;
}
@keyframes layer-dialog-fade-in {
  from {
    opacity: 0.1;
  }
  to {
    opacity: 1.0;
  }
}
@keyframes layer-dialog-fade-out {
  from {
    opacity: 1.0;
  }
  to {
    opacity: 0.01;
  }
}
.layer-conversation-view-width-large layer-dialog {
  padding: 22px 22px;
}
.layer-conversation-view-width-large layer-dialog .layer-dialog-inner {
  max-width: 535px;
  max-height: 535px;
  box-shadow: 2px 2px 8px black;
  border-radius: 8px 8px 4px 4px;
}
.layer-conversation-view-width-medium layer-dialog {
  padding: 22px 22px;
}
.layer-conversation-view-width-medium layer-dialog .layer-dialog-inner {
  max-width: 535px;
  max-height: 535px;
  box-shadow: 2px 2px 8px black;
  border-radius: 8px 8px 4px 4px;
}
.layer-conversation-view-width-small layer-dialog,
.layer-conversation-view-width-tiny layer-dialog {
  padding: 0px;
  background-color: #f2f2f2;
}
layer-dialog {
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.5);
}
layer-dialog .layer-dialog-inner {
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
layer-dialog .layer-dialog-inner > .layer-dialog-content-container {
  overflow: hidden;
}
layer-dialog .layer-dialog-inner layer-title-bar {
  height: 64px;
  padding: 0px 24px;
  box-sizing: content-box;
}
layer-dialog .layer-dialog-inner layer-title-bar .layer-title-bar-text {
  font-size: 1rem;
}
layer-dialog .layer-dialog-inner .layer-dialog-content {
  border-radius: 0px;
}
layer-dialog .layer-dialog-content-container > .layer-replaceable-inner > layer-message-viewer > layer-title-bar {
  display: none;
}
layer-dialog > .layer-dialog-inner > .layer-dialog-content-container > .layer-replaceable-inner > :first-child {
  flex-grow: 1;
}
layer-title-bar {
  background-color: #ffffff;
  border-bottom: solid 1px #dadde4;
  height: 56px;
  padding: 0px 16px;
  box-sizing: content-box;
}
layer-title-bar .layer-title-bar-icon {
  width: 24px;
  height: 24px;
  background-size: 24px;
  margin-right: 8px;
}
layer-title-bar .layer-title-bar-icon svg {
  flex-grow: 1;
}
layer-title-bar .layer-title-bar-icon svg .layer-svg-strokable {
  stroke: #a4a8b2;
}
layer-title-bar .layer-title-bar-icon svg .layer-svg-fillable {
  fill: #a4a8b2;
}
layer-title-bar .layer-title-bar-icon svg .layer-svg-fillable-background {
  fill: #ffffff;
}
layer-title-bar .layer-title-bar-text {
  color: #1b1c1d;
  font-size: 0.9rem;
  font-weight: bold;
}
layer-title-bar .layer-title-buttons {
  margin-left: 24px;
}
layer-title-bar .layer-title-buttons > .layer-replaceable-inner > * + * {
  margin-left: 12px;
}
layer-title-bar .layer-title-close-button {
  cursor: pointer;
  display: flex;
  width: 24px;
  height: 24px;
}
layer-title-bar .layer-title-close-button svg {
  flex-grow: 1;
}
layer-title-bar .layer-title-close-button .layer-svg-strokable {
  stroke: #a4a8b2;
}
layer-title-bar .layer-title-close-button .layer-svg-fillable {
  fill: #a4a8b2;
}
layer-title-bar .layer-title-close-button .layer-svg-strokable-background {
  stroke: transparent;
}
layer-title-bar .layer-title-close-button:hover .layer-svg-strokable {
  stroke: #1b1c1d;
}
layer-title-bar .layer-title-close-button:hover .layer-svg-fillable {
  fill: #1b1c1d;
}
layer-message-viewer > layer-standard-message-view-container:not(.layer-standard-message-view-no-metadata) > .layer-card-body-outer {
  margin: 8px 0px;
}
layer-message-viewer > layer-standard-message-view-container:not(.layer-standard-message-view-no-metadata) > .layer-card-body-outer .layer-standard-card-container-title,
layer-message-viewer > layer-standard-message-view-container:not(.layer-standard-message-view-no-metadata) > .layer-card-body-outer .layer-standard-card-container-description,
layer-message-viewer > layer-standard-message-view-container:not(.layer-standard-message-view-no-metadata) > .layer-card-body-outer .layer-standard-card-container-footer {
  padding-left: 12px;
  padding-right: 12px;
}
layer-message-viewer > layer-standard-message-view-container:not(.layer-standard-message-view-no-metadata) > .layer-card-body-outer .layer-standard-card-container-title {
  max-height: 2.7rem;
  overflow-y: hidden;
}
layer-message-viewer > layer-standard-message-view-container:not(.layer-standard-message-view-no-metadata) > .layer-card-body-outer .layer-standard-card-container-description {
  max-height: 12rem;
  overflow-y: hidden;
}
layer-standard-message-view-container .layer-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
layer-standard-message-view-container > .layer-card-top > .layer-message-type-view {
  box-sizing: border-box;
}
.layer-root-viewer > layer-standard-message-view-container .layer-card-body-outer {
  margin: 8px 0px;
}
.layer-root-viewer > layer-standard-message-view-container.layer-standard-message-view-no-metadata .layer-card-body-outer {
  margin: 0px 0px;
}
layer-message-viewer > layer-standard-message-view-container:not(.layer-standard-message-view-no-metadata) > .layer-card-top {
  overflow: hidden;
  border-radius: 16px 16px 0px 0px;
  max-height: 450px;
  background-color: #f2f2f2;
  border-bottom: solid 1px #e9ebef;
}
layer-standard-message-view-container.layer-no-core-ui > .layer-card-top {
  display: none;
}
layer-standard-message-view-container.layer-has-title > .layer-card-body-outer > .layer-card-body > .layer-standard-card-container-description:not(:empty),
layer-list-item-container.layer-has-title > .layer-card-body-outer > .layer-card-body > .layer-standard-card-container-description:not(:empty) {
  padding-top: 4px;
}
layer-standard-message-view-container.layer-has-description > .layer-card-body-outer > .layer-card-body > .layer-standard-card-container-footer:not(:empty),
layer-list-item-container.layer-has-description > .layer-card-body-outer > .layer-card-body > .layer-standard-card-container-footer:not(:empty) {
  padding-top: 4px;
}
layer-standard-message-view-container .layer-standard-card-container-title,
layer-list-item-container .layer-standard-card-container-title {
  color: #1b1c1d;
  font-size: 0.9rem;
}
layer-standard-message-view-container .layer-standard-card-container-description,
layer-list-item-container .layer-standard-card-container-description {
  color: #6e727a;
  font-size: 0.9rem;
}
layer-standard-message-view-container .layer-standard-card-container-footer,
layer-list-item-container .layer-standard-card-container-footer {
  color: #a4a8b2;
  font-size: 0.8rem;
}
layer-standard-message-view-container {
  cursor: pointer;
}
layer-standard-message-view-container .layer-next-icon {
  width: 24px;
  height: 30px;
  margin-left: 16px;
}
layer-standard-message-view-container.layer-standard-message-view-no-metadata {
  cursor: inherit;
}
layer-titled-message-view-container > .layer-card-top {
  overflow: hidden;
  border-radius: 0px 0px 16px 16px;
}
layer-titled-message-view-container layer-title-bar {
  padding: 8px 12px;
  line-height: 24px;
  height: 24px;
}
layer-titled-message-view-container layer-title-bar .layer-title-bar-text {
  font-weight: normal;
}
/* 95%, 80% and 70% must be changed both here and layer-message-viewer.js */
.layer-conversation-view-width-small layer-message-list layer-message-viewer.layer-root-viewer:not(.layer-dialog-content),
.layer-conversation-view-width-tiny layer-message-list layer-message-viewer.layer-root-viewer:not(.layer-dialog-content) {
  max-width: 95%;
}
.layer-conversation-view-width-medium layer-message-list layer-message-viewer.layer-root-viewer:not(.layer-dialog-content) {
  max-width: 80%;
}
.layer-conversation-view-width-large layer-message-list layer-message-viewer.layer-root-viewer:not(.layer-dialog-content) {
  max-width: 70%;
}
layer-message-viewer.layer-root-viewer.layer-dialog-content {
  width: 100%;
  max-width: 100%;
}
layer-message-item-received layer-standard-message-view-container.layer-standard-message-view-no-metadata > .layer-card-top {
  background-color: #f2f2f2;
  color: #1b1c1d;
  flex-grow: 1;
}
layer-message-item-received layer-standard-message-view-container.layer-standard-message-view-no-metadata > .layer-card-top a,
layer-message-item-received layer-standard-message-view-container.layer-standard-message-view-no-metadata > .layer-card-top a:visited {
  color: #1b1c1d;
  text-decoration: underline;
}
layer-message-item-sent layer-standard-message-view-container.layer-standard-message-view-no-metadata > .layer-card-top {
  background-color: #f2f2f2;
  color: #1b1c1d;
  flex-grow: 1;
}
layer-message-item-sent .layer-root-viewer > layer-standard-message-view-container.layer-standard-message-view-no-metadata > .layer-card-top {
  background-color: #19A5E4;
  color: #ffffff;
  flex-grow: 1;
}
layer-message-item-sent .layer-root-viewer > layer-standard-message-view-container.layer-standard-message-view-no-metadata > .layer-card-top a,
layer-message-item-sent .layer-root-viewer > layer-standard-message-view-container.layer-standard-message-view-no-metadata > .layer-card-top a:visited {
  color: #ffffff;
  text-decoration: underline;
}
.layer-root-viewer.layer-standard-message-view-no-metadata {
  border-width: 0px;
}
layer-message-viewer {
  font-size: 0.9rem;
  text-align: left;
}
layer-message-viewer.layer-model-not-supported {
  justify-content: center;
  font-style: italic;
}
layer-message-viewer.layer-card-border-standard,
layer-message-viewer.layer-card-border-rounded-top,
layer-message-viewer.layer-card-border-rounded-bottom {
  border-style: solid;
  border-width: 1px;
  border-color: #dadde4;
  overflow: hidden;
}
layer-message-viewer.layer-card-border-standard {
  border-radius: 16px;
}
layer-message-viewer.layer-card-border-list {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #dadde4;
}
layer-message-viewer.layer-card-border-rounded-top {
  border-radius: 18px 18px 0px 0px;
}
layer-message-viewer.layer-card-border-rounded-bottom {
  border-radius: 0px 0px 18px 18px;
}
layer-message-viewer > layer-standard-message-view-container,
layer-message-viewer > layer-titled-message-view-container {
  max-width: 100%;
  width: 100%;
}
layer-message-viewer > .layer-message-type-view {
  max-width: 100%;
  flex-grow: 1;
}
layer-message-viewer:not(.layer-root-viewer) {
  width: 100%;
}
layer-message-viewer p.layer-line-wrapping-paragraphs {
  margin: 0px;
}
layer-message-viewer p.layer-line-wrapping-paragraphs + p.layer-line-wrapping-paragraphs {
  margin-top: 1rem;
}
layer-message-viewer.layer-size-large {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
layer-message-viewer.layer-location-message-view .layer-standard-card-container-description p.layer-line-wrapping-paragraphs + p.layer-line-wrapping-paragraphs {
  margin-top: 0px;
}
.layer-location-message-view p.layer-line-wrapping-paragraphs {
  line-height: 1.0rem;
}
/* TODO: Refactor this so that group theme doesnt have chat bubbles */
layer-standard-message-view-container.layer-standard-message-view-no-metadata > .layer-card-top > layer-text-message-view {
  padding: 8px 12px;
}
layer-standard-message-view-container.layer-standard-message-view-no-metadata > .layer-card-top > layer-text-message-view p.layer-line-wrapping-paragraph {
  line-height: 1.4rem;
}
layer-standard-message-view-container:not(.layer-standard-message-view-no-metadata) > .layer-card-top > layer-text-message-view {
  padding: 8px 12px;
  overflow-y: auto;
}
layer-standard-message-view-container:not(.layer-standard-message-view-no-metadata) > .layer-card-top > layer-text-message-view p.layer-line-wrapping-paragraph {
  line-height: 1.4rem;
}
layer-text-message-view p.layer-line-wrapping-paragraphs {
  word-break: break-word;
  word-wrap: break-word;
}
layer-message-item-status layer-text-message-view p {
  text-align: center;
}
layer-message-viewer.layer-text-message-view.layer-standard-message-view-no-metadata {
  border-radius: 16px;
}
layer-message-viewer.layer-text-message-view:not(.layer-standard-message-view-no-metadata) {
  border-radius: 16px;
}
layer-link-message-view .layer-link-message-view-image {
  height: 250px;
  background-size: cover;
  background-position: 50%;
  width: 100%;
}
layer-link-message-view a {
  display: block;
  padding: 8px 12px;
  text-decoration: underline;
}
layer-message-viewer.layer-link-message-view svg .layer-svg-fillable {
  fill: #a4a8b2;
}
layer-message-viewer.layer-link-message-view svg .layer-svg-strokable {
  stroke: #a4a8b2;
}
layer-file-message-view,
layer-audio-message-view.layer-file-audio {
  height: 88px;
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAoCAYAAAB0HkOaAAAAAXNSR0IArs4c6QAAA99JREFUWAntmG1MW1UYx//33lJaSgfSdg5GbWHY8Q66F4Z+0WRq2JclhpAYhEQTTEz8aGI0cfGDid9mNBGtfiEsy1CWJfOTb3G+TCYGtrkolBGBgBtQaDtpgb7c3us5sNvcW3rJ7dv0AydNz7nnnPs8vz7P/zy3uQxk7Z3Phr5gRaaD41hAlC1kMdyIRk0cywSNZtH5Znd3YDdTjLT4dv/5twTg3TN9XYxep5Oms+5vTM3ipmdGuLvin1uP6I6/99rzPjWjJATbTWSZxvYmF3IJItmutFnYxmqH06CPXnvD/W2JNJ/cJ2BoLEhmEpFK3pjtdeujTraxynGoiPVde31w0JTKXgIm1WKu544crmbrHXaXOaIfOXt2xJhs/4HCUOfHamu4w/bKhpBp/he3210gB3rgMNR5W10Nd8he3rzIlF6VA+Xu2Mh/YtJ49u4ydBwHhiGS3P6g3Grhgpvhx5d84mWy/RS9Je8wLS4nwpEYOG7n2aitqtQt+wJPSOx5h2FJNNqbXZI/RX9vLYQfx/5IlNf/RDMKItnFHowsGIphzjWzwQu4NB2Axx+GxaDD6ZpSVJcUKpyqXeQkTbcDYWzyIkIxAf03vTCQp35fkw0nKoox8OcqFoJRNf+K+axhRpfWtyKxFo3jk9+9OPqwCZ2uh+DYp0d7uQlPVpjx098hhVO1i6zS9OviOn5YWMOL9Vacm1jF0QMmPFVpVvgqIPUlEid/TjS0jCMjBxny+BQgVDe00X7kTght5cUaUICMYCjIlfsRSQYZW97AR0Q3VEOf3lohujGhwWLIDwzVCE1ND0lNKpBv5v7BC7UWuG95CYQRJx/ZpwmEbkorMr8RkCvz2xpRA+ltsOLibT/qCcgzDu0gacH8dS+Cr8ivfrnRhs+n/DhCTo0kVpoaGhEJpK7MiGfTBEkL5uc7QZyqKsXiegyF5IQ8bd8+Nde9O0Gec6YXEQpCm+Y0TQciqC0zwKxnESanxB+O4/uFIL6WRYSmJlMQCqO5zpQUcljd5LdKO60n748v4YCpAL1EyMP3NZJJaiiE1DTDUDEOefx4tdW2pRWqFwo3OOFDkzV9sUoA8l4zzGP7i+AL8/jwuhd1JF20oNFn0kkCKQlZbjiTsWYYapzWjBZbESbJE1kQRXRUlcBmTMvEroxpW6LObQe1lfddPadY1HyaUtyb86k9GLWQ7kVmLzJqEVCb/39qJi4KmzGej6tR52M+yvMQBCFReBMDkeMuj0/OvHTQZoV9f1k+fCts8oKIgS+/I9+iR1pQvKc48/GFHvL+5AMdy8WkDXns43FRHJ14patzmGG2MvIv6wlTLI2yIDIAAAAASUVORK5CYII=');
}
layer-file-message-view.layer-file-image-png,
layer-file-message-view.layer-file-image-jpeg,
layer-file-message-view.layer-file-image-gif,
layer-file-message-view.layer-file-image-svg,
layer-file-message-view.layer-file-image-tiff,
layer-file-message-view.layer-file-image-bmp {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAoCAYAAAB0HkOaAAAAAXNSR0IArs4c6QAABFxJREFUWAntV1tsG0UUPbuztuIYO3Zst40b4zwcx+QFNCQkQEVBqlD5rEr5qEDiA774REIgUfGBxF8RUgVYFRJUqkCAKA2PItq0pCWNgtrGqqo4rUrSPJo0BMd27Njxc5mNtcvasdd1Y5efjCzPnTt37j175s7sXQay9v6xr79heWYfISzAyyY2IUbicS1hmZBGxze8c+iQX8kVI06+98mJd9PAB4dfP8ioOU5Ub7ofuzEFz8Rken5p+fZqjOv98M39vkJOKQWZxrNMR3+nE+UEIvqut5jYjiZ7Q5U6PvK2+0yNqM/tJTACF3RnJKZyDTc7fqylge1otDdXs76Rt44f1+bzJ4HJN1luXXdrE9tmtzl1MfWlI0cuaXL9P1AwQvAel4O02urbw9qZYbfbrZIDeuBghOBPPuIgzba6rgXG8IccUPmOjfwRc+Sp+UVwhIBhaEpmfqgzm0gourbrro8/Rc1fFJZUHMyjzgasxRIgZOPZcDXWc4s+/1Mi9oqDYSkb/V1OMV5WH1gJY+jydel6/V9yJguRbLAFRkZGlqiYM1Pzf+P7wREY9HkvzCxHxQapVBpGnRYv7X26oKkiGGHV464mPN/TWdBBvolFXwC+YAjbTQaYanTrJuHIGk4PX8lnLunKnjMTM/P4/PRFnJlewUcnBjC9sCQFKyaUHczJ86Oo7noGrLUZpr4XMDh2oxgGab7sYAxGIxiS2X2WI/AHg1KwYkJJYNI8j59GPDh6chDXbs3k9d3rtGNpaACxxTmEPBext4R8K5rAYsRYIokvaS6Ea6zgWvtw9uY4Lt+8jZef64VWUyWaodvViFp6+pb8QWx39sO+wyLNFRPuiZlgOAL3D+ewus0B1Q473QYCVXMnghYHPvtxCFcpKKEJJ+jX0WvQazXobW8pCYiwvigzodUojv18AaSlG5w2c0yFhULj9LXgO3fj/F/j+NM7CT8F7Tc8jKu/DKO/1YY9u9pLKh0VmYmuxXF9bgmqtr4NQDJwaEXAslA3dSBqdSGaZsGkEli2tuP32RCOfvfbOluibbFeEcwKZUVltIBV/5cThRwKLJl79kBPeFTNjSOitWBGb4ebsjQ05i20LEuvvE1MaSU6w7DQOzqgWfEjOOFBTG/Gcl0bzk3Pw3PrAsxadVbw3IEiM/Qk008GRZNcf+tjld4I0xPPQs8xqLrjReQhM+7odmLWt5LXXlQqM0M/XujD3lcTckknsBQOIOAdQ7zaSP1srPbkzhXBEIokEYmABP6RrylZFrYuPOVFOi0VdXl9KIJx2q2YmL2L6MK9v1+EKMIFGaV1r7xV0fKzs8UmV22QFcEYaP3x6r7dGxZVSnGfGVEZOFtgCvG6xcwWM4UYKKSXcibFp6OJZDJVyLAS+ngySW/ltHTXSQJPyKkr3snXdlrMsG2rrUTsLJ9J+mr4YuAs/ecnxImsN9fhT796hb7LPuZYkn2Xi9bl7VMpnh8df+PggW8ZZn1H/gU7OUSBmAhI2QAAAABJRU5ErkJggg==');
}
layer-file-message-view.layer-file-application-pdf {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAoCAYAAAB0HkOaAAAAAXNSR0IArs4c6QAABSZJREFUWAnNWGtsFFUU/mZmd7uPbpfu0vdit7SstZSHYHkVEv4oIZEfKMEfhB8mYhPjLzQhakSMJvwz4YePookGFQX/iEZjwBAfWEIKorVv2t3utl22j+2yu93343pncKa72wWZndZ4ktt759xzzv3mnHPPnC6DLDrx4ZfnWcLs5TgWIFkbCpaRRMLAsUxIZyS2Vw4d8t/PFCNuvv7e569mgLePHznIaFQqka14vjnkxB+DjoxnZm4sHFdtOfniU757GaUuuEuEZVq3r7NjKYGItq0VFrZ1db1Nq0lcPdZ5ySTy82cJDO8LGhnJU/mCSp83rrGxrQ31jXrWd/XlM2cMhewxr737mQMMQxhCKjUadaleW1JIThYvnkii4+k9sJiM4MM06wvAvqpWsNE9OJLud433GUMPbTt6dEc02/Dd5CBkNZ+vvBF+KCW9VovAfEQAk2+rrbmJS2fI2mGX+7fOzs6tHR0d0oE5mVptWYGdG1touAgcE178eWsMaprM+3a1CbwgPeDGwCjmgvMQZcXDLnf3CHzx+X7z1kd4QOn1tyaYKxTQThGQlDO8clmpHtoSNXpH3WhtrMeWtXaoOA7WKgv6HePgQ3hk/xOUxwqyeq0GfQ63MKLxxD3Pd3qm4KDDeXsaTu80XFMzqFlp4egLbfIypguiYo5neGYgFMHQ2CTCkRh2PdqCv0Zc4A8acE4IgxCCJhr/DMnAHwwLPNFYoXmD3YZYPAmOW3w3mhusqimff4eotwhMbYUZuze3otFaja6eQVFOmidn5lBbUY6JaR/stlocLtst7H363U+STPaCZRhsX2/PZknrOzTcP1/vlcrrIjDBcASOSa8AJJFMwaDTSspqFYd1TfX4oesmDZMOw2MefPtrt7SvdLEIzDwNj9s7m2O3styE5/Y/DpIh6HeOw+vzC2ByhJbgIQfMsMsDfmRTOBrDWx+dz2YJ60Kyi4RkMuh3EZxMnQcQl9LgAWQXRFT0bp+jH4EaBky72WRssFZaFnYVrOqU2DnxwdmzNBnpzZVPs9EUSWXk6/kDIfLm6XNSW5FT9IpxhDuUwMlrHpzumSlGPUdHMZh+XxTPNJsxeieG+STtiBSQYjA6mnXJNEGDqURx/6EYTLNZh2veMCgeGNTKzOXUmWI8XKVXQU+9Y9QorxDKXuUf9KYSDtMRqS0p5p0EnSUB4w0noaVtxcBcrGggvKJiMK5gAmatCvvXlOOSK4gYnzxFkmIwg9QbzWYt+NxZa9HhsjtYJJQl8MyQ/y4YHsEuaymcgTj6aO0RSY6fFN2mcVp9+eQtozeJL3d87myo0OPj3lmh7iRoy+GLpsDSJu+N7XUo0OyJmIVZUZi6aX2xlWnw9cgdnPp9Cr9MhJCibenehhVC7rRVGfDSY9XQsCyGHiC5i/KML5bCVU8YXZ55bKstxcPlWuyxlYGvxiJtqtLjymSIfrduYzNdt1gWOkZRJn+WDeYivTE8iHYKoq3agAP0FhWichq+fatXCKPQfiHewqsU2s3jfe8MgP8wHmurgTMYR3udMU9C2aMsMDemwnhhYyUuugL0KqthLVUrOz1PWxaYQDyNd65PYcQfx5M0BEtNsnKGv558DdlaY1DcLhR6EVlgjBoW2yiQ5SJZYVouEKLd/yeYNMlEk6lUWkT5X8yJVAqZTEZKFWlBOO7CjQHHs3UVK7Gq0rzsWOi/Nvjkmx/pXyL9upDzO8Xx9784TK/JKRXLKW/b/v110mlCrvU/f/DAVwwjRORv7Q8/9lLmpIIAAAAASUVORK5CYII=');
}
layer-file-message-view.layer-file-application-zip,
layer-file-message-view.layer-file-application-x-tar,
layer-file-message-view.layer-file-application-x-bzip2,
layer-file-message-view.layer-file-application-gzip,
layer-file-message-view.layer-file-application-x-apple-diskimage {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAoCAYAAAB0HkOaAAAAAXNSR0IArs4c6QAAA9RJREFUWAntmF1MFFcUx/8zs4wsLAvIrnaFZZev5WtZtRQbTJu08IT61Ch9sG3SGHww+takaVONDyY+mJj4oll9aUmaKhobjEnTYkNbPgwCqQYVmqbQtAX5yAAL+72zO727OuPsroPALW0fuNnZ+3XOub+ce+bcmWGgKqevXO1gJaaF41hAUk2s0PSHQob4NJ+hC+pYTkwV9YfD2RzLLOtzJPsnhw8vpM6r+4zcOXnxy09jwJlTba0Mr9PJwy+tBx/9ip77ozDnGVFfXYaaUmuSzs+/TOD+2Hhsam7+d19It+fs8XeEJAFVh7jgaZFYxtlY58BaQOKaDlsh9Ft4/DUrYFpYfGYtuSoyF7DOUps9kw/f/djdlZs8+7ynwMR9QXZG8dRzkZVb59q/xiQBOfDma2hqqNMU3lVhZ50ltrIsVrj7UXt79osEFZgXTa5m7IP9b8Ocn4v+B2MYHv1tRZX6ylK2xmZ15IT4/vPn+/WpwtQwmWSLWJZBMBxGOJIWv6nroaGqnKu0FtV6s//oc7vdGWoBapjLN7/FDImVpgYXGl2Vatua7dery7kyq8X1hMnrVQOt/rbRMH3i3f248X0/7gw8gMfrxxu7qtMkJ6ZmoOM4MAwJyac/WEwF3HIg+Oq0IHUShX1xJWqY2QUPImIUhiw9DPrMNJCdDjuCoQg4Lv3eqCop0s0IC3tlJWqYa9/1Jmw173Ghrtwm21Vqlnij0eVQ+urG4pIXPw49VNIrdcx8duQQirabcOunQXSRraIp1DBD5Hb2+YOwW8woJlA0hRqme3CEBK4PdRV2OOyFNCyghjnZ1grrKyZ0kNi53TP438J0/nAPgmcZDTUV2Em8Q1OoPTM5JyQyrynfiK25OTQs9Nt07FALSWD5+KZvGN1DI1Qw1Hnmi9vdmJ334K16J3ZXlVLBUG1TPPP+KXjgJ4m87/E4BshFU6hg4jnGb7QgbK2Ft9iFAfJUt5qTWwuYCmbeG4C4JRvc4jRY/xJ4gxG+QFBrrZeOU8HI1sXtJYgaSfZVThl5Zm31PwKjLJl+MCtTq2lQwZBXEOIN8k7xrDDEMyy7fpPr1yQANbYdyFmcBOvzgFuaAy8GkGvIktnWXFPlmWJyJr3XVI+HE1PI5HnsrW1eM4BagQombqjEsi1xqY2ut021TetdVEtvE2bTM1oe0BrfjJlNz2h5QGv8/xkzUSkWiIjkOfJfLGFRRCwWU44kpSFxXOfw6PiHhWYTrNu2bjiSGJPw+a075F8akxdLehw6demr98n3kwvkE2pEFtjAOhqVpIHHR1sPXmeYxI78DQJPGgcwuHjkAAAAAElFTkSuQmCC');
}
layer-file-message-view.layer-file-text-plain,
layer-file-message-view.layer-file-application-msword,
layer-file-message-view.layer-file-text-html {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAoCAYAAAB0HkOaAAAAAXNSR0IArs4c6QAAAzxJREFUWAljZEACDbNXrGL6z+jJzMzEwPAfSYIC5rdfv7iZmRg/c/L+V6iMjn6PzyhGmGTttKVV/xgYWupSwxjZWFhgwhTT52/eZ7hw496/Z6/fPfj6k8WsPSfoLS5DgUEAAf+ZGHUsddUYqOkQmNkyosJMOkryChxsv46Xz9zNDxNHp+GOAYUFMGbgIYWukFK+gaoCk46ivDIX09vjJYsWcWMzD+4YbJLUFjNWV2LSkpdV4/3Jdqyv7xgnuvl0dQzIclMNFWZ1WRntL9yPjs6cOZMV2UF0dwzIcnNNFWZlWUm954wCR5AdhDfb/Pz1m+H337/IjsfJZmJkZODiYMcqf//ZSwYWZmYGRqAaUKoEJUxJEWHmz99/GL14+38jkOsF0ojXMRNX72Rg5OACqSMIfnz+yJDq68ggISyAolZfTYHhx8/fDMzMmHlDQ1GG5eXb91YwDXgdw8DOyfBKQB6mFi/NxfKa4eOXrxiOAYWYpZ4aVr0fPn1hOHjmCrx4xesYUS5WBr5vT7AahC7469cPBikRfXRhkvh4HZPoZUeSYZQqxuuYyWt2Mfyh1Aag/h/fvjOkBzgzCPHx4DUNr2N+MDAzvBRRwWsAMZI8H54xvH7/kTLHMALTgcSrG8TYh1fNj69fGYT5tfGqAUniDZmSKG+CBlBTwYCUwLg8gDdk3nz4zPAZmPioCViADTdZcRGsRuJ1zKFzVxnO3biLVSO5gnzcXAxl8YFYteN1TJCTBQMI0wsMnTRz7+lLhjfvP1E1YFhZWRgM1RWxmok3mu49fcFw7d5jrBrJFeTh5CDPMS5m+gwgTC8wdNLMxdsPGB6/eEPVgOFgZ8UZ2njTzE9gC+0LlQu9v/+AXUUcAK9jzHRUGUCYXmDopJkjF64z3H70jKoBA+pBhLvZYDUTbzQJ8/My/JIUxaqRXEF2NpR+G4oxeB2jqSjDAML0AoMqzYw6Ble0j4YMwZD5+//f999//hA35IDLNBLFf/35w/Dv3z94joYz/jMzbzx7/V6itKgIg6yYEInGkq78z7//DAs27QGS/+EdM5Rxirrpy2OBgycTWZiYf5NuPMk6/v79///ktbSwkNWMjOAYAQArWNoHozi5SwAAAABJRU5ErkJggg==');
}
layer-audio-message-view.layer-file-audio,
layer-audio-message-large-view .layer-file-audio,
layer-file-message-view.layer-file-application-ogg,
layer-file-message-view.layer-file-audio-mpeg,
layer-file-message-view.layer-file-audio-wav,
layer-file-message-view.layer-file-audio-aac,
layer-file-message-view.layer-file-audio-mp3,
layer-file-message-view.layer-file-audio-mp4 {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAoCAYAAAB0HkOaAAAAAXNSR0IArs4c6QAAA/hJREFUWAntmE1sE0cUx/+7s3biOE4TO05ibCeOHRwSEqcK/YBIVXtoD3BEFRfUQw9w6rESolIRByR6QuqlVdRLhVSB2hO9FNEKqVILCuoXpaWhoAQlxh/Ymyy242/vMuuwlj/WYeOPwCEj2zPz5s17v33zZnfHDMrK2a8uf8tKzGFCWEAqG2iimcxmjYRl4gaT5Dp9/Pj6VqYYZfDTL775RATOnTlxjNFznCJuuv7z3jL+WlwSA5G1hxsZ7o3zHx3l6xmlIdgsEstMHZr2opUgim2H1cJOuUdcnfrszVPzP76iyKvrEowcC7oypUhVKzbbf3Wvi50aHfF0sfzNjy9eNKrZK8GoDbZadmDczU6OOL2mjP7GhQs3DNX2dxRGdv76vjEy7nTsTxhXfp2fn9eVA+04jOz8zYkx4nHafEGm95dyoNZtm/JLrGovB8LgCAHD0JTc/MDWbyHxVHo2xEtXqPoReUrbYWa8LqQzORBSuzf2jTq4ML8+p7C3HYal0Tjk8yr+KmohlsDPv/1Tur2+kJypICrrtDQy6UwWESGG8FoM/qiA4JqAWCKJt6b3Ys43XuZWvdkwzIPVIAL8E6xG1hEV4sjkC8gxLHI6A9KkC2KnAaJplOaKgLxYWgl1imfShmEuX19A3OKCqDdDstrpLqlN0C09qww2DMPpO1AwWVRMNi5qawIzhfy2yBqOTNGLJILNpMHkkmCzKejol+Qz0NFHrp5jkKIsiV6bZqCmYMiGAHsqBJ97GENmK/p6umHuMUHHkSLAZ5d+0AwiKzYFIxuYdNnxzuyE3Gy6tDVntkvXdGSqHQqJDayEopAkbfeW8vnbgsnm8wjRO6tIE1etXF24gz+WA4gb+sBSXUbXraZWV6YZ5tbdJVy/vYhUhwmgjqinCqMPg49xayWKmG2yQk7i0Yr+Vh1NMCFewLW/H0DYM11hiyTWSv2lQAQJGpGaIorQyUcfDUWT1v+rIcS7B2rMyXnBsZvbeMw+AONGbRQ6noThsQ/WzFUTaIJxWPvQmRRq5utjEbj3WIvy4SEr5jw29D76Fzr+EfS8Hz0rt/Guz4MBc93TSYVNTcvkplc2M+jHneA9JLv76ZlGQmfsMWacFgwP0f6z8t5r+3Fw0g1/mC++YjoHZ2E0dCjDz601wchWjr59AHM0d+77w8UHtNdxUPWKTV0GTIw6nutYTUEzjDx5yNJb/KoZaoVMU860wpEWG7sw9aK0G5ndyNSLQD35y5kzBUlM5fL0JLaDRX4/EkWxdOMtNSRCrvz+39KHdms/nAPmtiPJp8yvv/+J/kqLirOKY+CZLy99QP8/+Zy+FuQUhTbWhYIkLdw9eez97ximuCJPATBxKF9I728VAAAAAElFTkSuQmCC');
}
layer-message-viewer.layer-audio-message-view layer-standard-message-view-container .layer-card-body-outer {
  align-items: flex-end;
  margin: 4px 0px 8px 0px;
  position: relative;
}
layer-message-viewer.layer-audio-message-view layer-standard-message-view-container .layer-card-body-outer .layer-card-body {
  display: flex;
}
layer-message-viewer.layer-audio-message-view layer-standard-message-view-container .layer-card-body-outer svg {
  width: 36px;
  height: 36px;
  margin: 0px 12px 0px 8px;
}
layer-message-viewer.layer-audio-message-view layer-standard-message-view-container .layer-card-body-outer svg .layer-svg-fillable {
  fill: #6e727a;
}
layer-message-viewer.layer-audio-message-view layer-standard-message-view-container .layer-card-body-outer svg .layer-svg-strokable {
  stroke: #6e727a;
}
layer-message-viewer.layer-audio-message-view layer-standard-message-view-container .layer-card-body-outer svg .layer-svg-fillable-background {
  fill: #ffffff;
}
layer-message-viewer.layer-audio-message-view layer-standard-message-view-container .layer-card-body-outer svg .layer-svg-strokable-background {
  stroke: #ffffff;
}
layer-message-viewer.layer-audio-message-view layer-standard-message-view-container .layer-card-top {
  border-bottom-width: 0px;
}
layer-message-viewer.layer-audio-message-view layer-audio-message-view.layer-audio-preview .layer-audio-images {
  width: 100%;
  background-size: 100%;
  align-self: center;
}
layer-message-viewer.layer-audio-message-view .layer-audio-progress-container {
  height: 4px;
  position: relative;
  background-color: #ffffff;
}
layer-message-viewer.layer-audio-message-view .layer-audio-progress-bar {
  background-color: #1094d0;
  height: 4px;
  width: 0px;
  position: absolute;
  z-index: 10;
}
layer-message-viewer.layer-audio-message-view .layer-audio-buffer-bar {
  background-color: #dadde4;
  height: 4px;
  width: 0px;
  position: absolute;
  z-index: 9;
}
layer-audio-message-large-view {
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  /* IE 11 */
}
layer-audio-message-large-view.show-audio-file-icon .layer-file-audio {
  height: 100px;
  width: 100px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  display: inline-block;
}
layer-audio-message-large-view .layer-audio-inner {
  padding: 12px 32px;
  text-align: center;
}
layer-audio-message-large-view .layer-audio-inner .layer-audio-preview {
  background-size: 100%;
  margin-bottom: 12px;
}
layer-audio-message-large-view .layer-audio-inner .layer-card-body > *:not(:empty) {
  margin-bottom: 4px;
}
layer-audio-message-large-view .layer-audio-inner .layer-card-body > *:last-child {
  margin-bottom: 0px;
}
layer-audio-message-large-view .layer-audio-inner .layer-standard-card-container-title {
  color: #1b1c1d;
  font-size: 1rem;
}
layer-audio-message-large-view .layer-audio-inner .layer-standard-card-container-description {
  color: #6e727a;
  font-size: 0.9rem;
}
layer-audio-message-large-view .layer-audio-inner .layer-standard-card-container-footer {
  color: #a4a8b2;
  font-size: 0.8rem;
}
layer-audio-message-large-view .layer-vertical-spacer {
  flex-grow: 1;
}
layer-audio-message-large-view .layer-audio-controls {
  background-color: #ffffff;
  font-size: 0.8rem;
  color: #6e727a;
  min-height: 30px;
}
layer-audio-message-large-view .layer-audio-controls svg {
  cursor: pointer;
}
layer-audio-message-large-view .layer-audio-controls svg .layer-svg-strokable {
  stroke: #6e727a;
}
layer-audio-message-large-view .layer-audio-controls svg .layer-svg-fillable {
  fill: #6e727a;
}
layer-audio-message-large-view .layer-audio-controls input[type=button] {
  box-sizing: border-box;
  width: 31px;
  height: 31px;
  background-color: transparent;
  color: inherit;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 0px;
  border-width: 0px;
  outline: none;
}
layer-audio-message-large-view .layer-audio-controls.layer-disabled input[type=button],
layer-audio-message-large-view .layer-audio-controls input[type=button]:disabled {
  opacity: 0.4;
}
layer-audio-message-large-view .layer-play-pause-button,
layer-audio-message-large-view .layer-play-pause-button {
  width: 11px;
  height: 13px;
  margin: 8px 10px;
}
layer-audio-message-large-view .layer-audio-time-range-disabled,
layer-audio-message-large-view .layer-audio-volume-range-disabled {
  background-color: #f2f2f2;
}
layer-audio-message-large-view .layer-audio-time-range,
layer-audio-message-large-view .layer-audio-time-range-disabled,
layer-audio-message-large-view .layer-audio-volume-range,
layer-audio-message-large-view .layer-audio-volume-range-disabled {
  flex-grow: 1;
  margin: 0px 18px;
  padding: 0px;
  width: 50px;
  /* Flexbox workaround */
}
layer-audio-message-large-view .layer-audio-time-range,
layer-audio-message-large-view .layer-audio-volume-range {
  height: 10px;
}
layer-audio-message-large-view .layer-audio-time-range-disabled,
layer-audio-message-large-view .layer-audio-volume-range-disabled {
  height: 2px;
}
layer-audio-message-large-view .layer-audio-volume-range,
layer-audio-message-large-view .layer-audio-volume-range-disabled {
  max-width: 80px;
}
layer-audio-message-large-view .layer-audio-separator {
  padding: 0px 4px;
}
layer-audio-message-large-view .layer-volume-enabled-button,
layer-audio-message-large-view .layer-volume-muted-button {
  width: 25px;
  height: 25px;
  margin: 3px;
}
layer-audio-message-large-view .layer-audio-forward-fifteen,
layer-audio-message-large-view .layer-audio-rewind-fifteen {
  width: 19px;
  height: 21px;
  margin: 4px 6px;
}
layer-audio-message-large-view input[type=range]::-ms-tooltip {
  display: none;
}
layer-audio-message-large-view.layer-audio-message-large-view-width-tiny:not(.layer-is-ios) .layer-audio-forward-fifteen,
layer-audio-message-large-view.layer-audio-message-large-view-width-small:not(.layer-is-ios) .layer-audio-forward-fifteen,
layer-audio-message-large-view.layer-audio-message-large-view-width-medium:not(.layer-is-ios) .layer-audio-forward-fifteen,
layer-audio-message-large-view.layer-audio-message-large-view-width-tiny:not(.layer-is-ios) .layer-audio-rewind-fifteen,
layer-audio-message-large-view.layer-audio-message-large-view-width-small:not(.layer-is-ios) .layer-audio-rewind-fifteen,
layer-audio-message-large-view.layer-audio-message-large-view-width-medium:not(.layer-is-ios) .layer-audio-rewind-fifteen {
  display: none;
}
layer-audio-message-large-view.layer-audio-message-large-view-width-small .layer-audio-volume-range,
layer-audio-message-large-view.layer-audio-message-large-view-width-tiny .layer-audio-volume-range,
layer-audio-message-large-view.layer-audio-message-large-view-width-small .layer-audio-volume-range-disabled,
layer-audio-message-large-view.layer-audio-message-large-view-width-tiny .layer-audio-volume-range-disabled {
  display: none;
}
layer-message-viewer.layer-video-message-view.layer-root-viewer.layer-standard-message-view-no-metadata {
  border-width: 1px;
}
layer-message-viewer.layer-video-message-view.layer-root-viewer.layer-standard-message-view-no-metadata layer-standard-message-view-container.layer-standard-message-view-no-metadata {
  cursor: pointer;
}
layer-message-viewer.layer-video-message-view.layer-root-viewer.layer-standard-message-view-no-metadata layer-standard-message-view-container.layer-standard-message-view-no-metadata > .layer-card-top {
  background-color: transparent;
}
layer-video-message-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
layer-video-message-view:not(.layer-video-message-has-preview) .layer-video-message-preview {
  background-color: #1b1c1d;
}
layer-video-message-view .layer-video-message-preview {
  background-size: cover;
  background-position: 50% 50%;
}
layer-video-message-view svg {
  position: absolute;
  width: 36px;
  height: 36px;
}
layer-video-message-view svg .layer-svg-fillable {
  fill: #6e727a;
}
layer-video-message-view svg .layer-svg-strokable {
  stroke: #6e727a;
}
layer-video-message-view svg .layer-svg-fillable-background {
  fill: #ffffff;
}
layer-video-message-view svg .layer-svg-strokable-background {
  stroke: #ffffff;
}
layer-video-message-large-view {
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
layer-video-message-large-view video {
  margin: 12px 0px;
}
layer-video-message-large-view .layer-video-inner {
  margin: 0px 32px 12px 32px;
  text-align: center;
}
layer-video-message-large-view .layer-video-inner > *:not(:empty) {
  margin-bottom: 4px;
}
layer-video-message-large-view .layer-video-inner > *:last-child {
  margin-bottom: 0px;
}
layer-video-message-large-view .layer-video-inner .layer-standard-card-container-title {
  color: #1b1c1d;
  font-size: 1rem;
}
layer-video-message-large-view .layer-video-inner .layer-standard-card-container-description {
  color: #6e727a;
  font-size: 0.9rem;
}
layer-video-message-large-view .layer-video-inner .layer-standard-card-container-footer {
  color: #a4a8b2;
  font-size: 0.8rem;
}
layer-video-message-large-view video {
  align-self: center;
}
layer-message-viewer.layer-image-message-view > layer-standard-message-view-container.layer-standard-message-view-no-metadata {
  width: auto;
  min-width: auto;
}
layer-image-message-view.layer-image-view-ie11-mode {
  background-size: cover;
  background-position: center center;
}
layer-image-message-view.layer-image-view-ie11-mode img {
  display: none;
}
layer-message-viewer.layer-carousel-message-view:not(.layer-titled-message-view-container) {
  border-width: 0px;
  border-radius: 0px;
}
layer-message-viewer layer-titled-message-view-container layer-carousel-message-view .layer-carousel-message-view-items > layer-message-viewer {
  margin: 0px 0px;
  border-radius: 0px;
  border-width: 0px 1px 0px 0px;
  position: static;
}
layer-message-viewer layer-titled-message-view-container layer-carousel-message-view layer-message-viewer .layer-card-top {
  border-radius: 0px 0px 0px 0px;
}
layer-carousel-message-view > .layer-next-icon {
  background-color: #dadde4;
  opacity: 0.75;
  border: solid 1px #a4a8b2;
  border-radius: 6px 0px 0px 6px;
  height: 40px;
  width: 40px;
  background-size: 32px;
  right: 0px;
  top: 50%;
}
layer-carousel-message-view > .layer-next-icon .layer-svg-fillable {
  fill: #a4a8b2;
}
layer-carousel-message-view > .layer-next-icon .layer-svg-strokable {
  stroke: #a4a8b2;
}
layer-carousel-message-view .layer-next-icon.layer-previous-icon {
  left: 0px;
  border-radius: 0px 6px 6px 0px;
}
layer-carousel-message-view .layer-carousel-message-view-items > layer-message-viewer {
  margin: 0px 4px;
}
layer-carousel-message-view .layer-carousel-message-view-items {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
layer-carousel-message-view .layer-carousel-message-view-items > layer-message-viewer {
  display: flex;
  white-space: initial;
  flex-direction: row;
}
layer-receipt-message-product-view {
  padding: 12px;
  border-bottom: solid 1px #dadde4;
}
layer-receipt-message-product-view .layer-receipt-message-view-quantity:not(:empty)::before {
  content: "Quantity: ";
}
layer-receipt-message-product-view .layer-receipt-message-view-name {
  color: #1b1c1d;
  font-size: 0.9rem;
  padding: 4px 0px;
}
layer-receipt-message-product-view .layer-receipt-message-view-price {
  color: #a4a8b2;
  font-size: 0.8rem;
  padding: 4px 0px;
}
layer-receipt-message-product-view .layer-receipt-message-view-options:not(:empty)::before {
  content: "Options: ";
}
layer-receipt-message-product-view > .layer-receipt-message-image {
  width: 20%;
  margin-right: 12px;
  align-self: center;
  background-size: cover;
  background-position: 50%;
  height: 0px;
  padding-bottom: 20%;
}
layer-receipt-message-view {
  min-width: 192px;
}
layer-receipt-message-view .layer-receipt-details .layer-card-body-outer {
  margin: 0px 0px !important;
}
layer-receipt-message-view .layer-receipt-details .layer-standard-card-container-description {
  padding: 0px !important;
  color: #1b1c1d;
  font-size: 0.8rem;
}
layer-receipt-message-view .layer-receipt-details label {
  font-size: 0.7rem;
  color: #a4a8b2;
  padding-bottom: 4px;
  display: block;
}
layer-receipt-message-view layer-message-viewer.layer-location-card {
  border-width: 0px;
  padding: 0px;
  margin: 0px;
}
layer-receipt-message-view layer-message-viewer.layer-location-card .layer-card-body-outer {
  align-items: flex-start;
}
layer-receipt-message-view layer-message-viewer.layer-location-card .layer-card-body-outer .layer-next-icon {
  margin-top: 0px;
}
layer-receipt-message-view layer-message-viewer.layer-location-card .layer-card-body {
  margin: 0px;
}
layer-receipt-message-view layer-message-viewer.layer-location-card .layer-card-body .layer-card-description {
  color: #1b1c1d;
}
layer-receipt-message-view .layer-receipt-detail-item:not(:last-child) {
  border-bottom: solid 1px #dadde4;
}
layer-receipt-message-view .layer-receipt-detail-item {
  padding: 8px 12px;
}
layer-receipt-message-view .layer-receipt-detail-item.layer-receipt-summary {
  padding: 12px 12px;
  align-items: flex-end;
}
layer-receipt-message-view .layer-receipt-detail-item.layer-receipt-summary label {
  padding-bottom: 0px;
}
layer-receipt-message-view .layer-location-card > layer-standard-message-view-container {
  min-height: 0px;
}
layer-receipt-message-view layer-standard-message-view-container:not(.layer-standard-message-view-no-metadata) .layer-card-body-outer {
  padding-bottom: 0px;
}
layer-receipt-message-view .layer-receipt-summary {
  display: flex;
  flex-direction: row;
}
layer-receipt-message-view .layer-receipt-price {
  flex-grow: 1;
  text-align: right;
  font-size: 1rem;
}
layer-receipt-message-view .layer-receipt-summary label {
  font-size: 1rem;
}
layer-choice-message-view .layer-choice-message-view-label {
  background-color: #f2f2f2;
  color: #1b1c1d;
  padding: 12px;
}
layer-choice-message-view .layer-choice-message-view-choices layer-action-button button {
  padding: 12px;
  margin: 0px;
  border-color: #dadde4;
  border-width: 1px 0px 0px 0px;
  border-radius: 0px;
  outline: none;
}
layer-choice-tiles-message-view .layer-choice-message-view-answers {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
layer-choice-tiles-message-view .layer-choice-message-view-answers layer-action-button button {
  border-radius: 0px;
  border: solid 1px #a4a8b2;
  color: #a4a8b2;
}
layer-message-viewer.layer-choice-label-message-view.layer-choice-no-selection {
  display: none;
}
layer-message-viewer.layer-choice-label-message-view layer-choice-label-message-view .layer-choice-message-view-label {
  font-weight: bold;
  min-width: 70px;
}
layer-message-viewer.layer-choice-label-message-view layer-choice-label-message-view .layer-choice-message-view-label::after {
  content: ":";
  margin-right: 8px;
}
layer-message-viewer.layer-choice-label-message-view layer-choice-label-message-view .layer-choice-message-view-choice {
  color: #6e727a;
}
layer-buttons-message-view {
  min-width: 192px;
}
layer-buttons-message-view > .layer-button-content > layer-message-viewer.layer-standard-message-view-no-metadata,
layer-buttons-message-view > .layer-button-content layer-message-viewer {
  border-width: 0px;
  border-radius: 0px;
}
layer-buttons-message-view .layer-button-list > * {
  border-width: 1px 0px 0px 0px;
  border-color: #dadde4;
  border-style: solid;
}
layer-buttons-message-view .layer-button-list layer-action-button > button {
  padding: 8px 12px;
  outline: none;
  flex-grow: 1;
}
layer-buttons-message-view.layer-button-card-no-content > .layer-button-list > *:first-child {
  border-top-width: 0px;
}
layer-buttons-message-view > .layer-button-list > *:last-child {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  overflow-y: hidden;
}
layer-buttons-message-view layer-choice-button layer-action-button {
  border-right: solid 1px #dadde4;
}
layer-buttons-message-view layer-choice-button layer-action-button:last-child {
  border-right-width: 0px;
}
layer-buttons-message-view layer-message-viewer > layer-titled-message-view-container > .layer-card-top {
  border-radius: 0px 0px 0px 0px;
}
layer-message-viewer.layer-root-viewer.layer-buttons-message-view.layer-button-card-with-choices {
  min-width: 250px;
}
layer-product-message-view .layer-card-top {
  overflow: hidden;
  border-radius: 16px 16px 0px 0px;
  background-color: #f2f2f2;
  border-bottom: solid 1px #e9ebef;
  text-align: center;
}
layer-product-message-view .layer-card-top .layer-top-content-for-border-radius {
  border-radius: 16px 16px 0px 0px;
}
layer-product-message-view .layer-card-top .layer-product-message-image {
  height: 250px;
  background-size: cover;
  background-position: 50%;
  width: 100%;
}
layer-product-message-view .layer-card-body-outer {
  margin: 6px 0px;
  text-align: left;
}
layer-product-message-view .layer-card-product-header {
  padding: 2px 12px;
  color: #6e727a;
  font-size: 0.8rem;
  display: flex;
  flex-direction: row;
}
layer-product-message-view .layer-card-product-brand {
  flex-grow: 1;
}
layer-product-message-view .layer-card-product-name,
layer-product-message-view .layer-card-product-price {
  padding: 2px 12px;
  color: #1b1c1d;
  font-size: 0.9rem;
}
layer-product-message-view .layer-card-product-description {
  padding: 2px 12px;
  color: #313f48;
  white-space: normal;
}
layer-product-message-view .layer-card-product-choices {
  padding: 0px 12px;
  color: #1b1c1d;
  font-size: 0.9rem;
}
layer-product-message-view .layer-card-product-choices layer-message-viewer:first-child {
  margin-top: 14px;
}
layer-product-message-view .layer-card-product-choices layer-message-viewer:last-child {
  margin-bottom: 14px;
}
layer-product-message-view .layer-card-product-choices layer-message-viewer {
  display: flex;
  margin-top: 2px;
  margin-bottom: 2px;
}
body layer-message-item-status layer-message-viewer.layer-message-item-main.layer-feedback-message-view {
  flex-grow: 0;
}
layer-message-viewer.layer-feedback-message-view {
  cursor: pointer;
}
layer-feedback-message-large-view:not(.layer-feedback-enabled) .layer-feedback-message-view-ratings span svg .layer-svg-strokable,
layer-feedback-message-view:not(.layer-feedback-enabled) .layer-feedback-message-view-ratings span svg .layer-svg-strokable {
  stroke: #a4a8b2;
}
layer-feedback-message-large-view:not(.layer-feedback-enabled) .layer-feedback-message-view-ratings span svg .layer-svg-fillable,
layer-feedback-message-view:not(.layer-feedback-enabled) .layer-feedback-message-view-ratings span svg .layer-svg-fillable {
  fill: #a4a8b2;
}
layer-feedback-message-large-view.layer-feedback-enabled .layer-feedback-message-view-ratings span {
  cursor: pointer;
}
layer-feedback-message-view.layer-feedback-enabled .layer-feedback-message-view-ratings span,
layer-feedback-message-large-view:not(.layer-feedback-enabled) .layer-feedback-message-view-ratings span {
  cursor: default;
}
.layer-feedback-message-view-ratings,
layer-feedback-message-view {
  font-size: 2.0rem;
  text-align: center;
  padding: 4px 0px;
  min-height: 40px;
}
.layer-feedback-message-view-ratings span,
layer-feedback-message-view span {
  width: 32px;
  height: 48px;
  display: inline-block;
}
.layer-feedback-message-view-ratings span.layer-feedback-selector-unselected svg .layer-svg-fillable,
layer-feedback-message-view span.layer-feedback-selector-unselected svg .layer-svg-fillable {
  fill-opacity: 0;
}
.layer-feedback-message-view-ratings span.layer-feedback-selector-selected svg .layer-svg-fillable,
layer-feedback-message-view span.layer-feedback-selector-selected svg .layer-svg-fillable {
  fill-opacity: 1;
}
.layer-feedback-message-view-ratings span + span,
layer-feedback-message-view span + span {
  margin-left: 1.5rem;
}
.layer-feedback-message-view-ratings span:first-child,
layer-feedback-message-view span:first-child {
  margin-left: 0.7rem;
}
.layer-feedback-message-view-ratings span:last-child,
layer-feedback-message-view span:last-child {
  margin-right: 0.7rem;
}
layer-feedback-message-view {
  font-size: 2.0rem;
  text-align: center;
  padding: 4px 0px;
  overflow: hidden;
}
layer-message-viewer.layer-feedback-message-view.layer-feedback-enabled .layer-card-top {
  background-color: #ffffff;
}
layer-message-viewer.layer-feedback-message-view.layer-feedback-enabled .layer-card-top span svg .layer-svg-strokable {
  stroke: #19A5E4;
}
layer-message-viewer.layer-feedback-message-view.layer-feedback-enabled .layer-card-top span svg .layer-svg-fillable {
  fill: #19A5E4;
}
layer-message-viewer.layer-feedback-message-view.layer-feedback-enabled .layer-card-top span:hover svg .layer-svg-strokable {
  stroke: #1094d0;
}
layer-message-viewer.layer-feedback-message-view.layer-feedback-enabled .layer-card-top span:hover svg .layer-svg-fillable {
  fill: #1094d0;
}
layer-message-viewer.layer-feedback-message-view:not(.layer-feedback-enabled) .layer-card-top {
  color: #1b1c1d;
  background-color: #f2f2f2;
}
layer-message-viewer.layer-feedback-message-view:not(.layer-feedback-enabled) .layer-card-top svg .layer-svg-strokable {
  stroke: #a4a8b2;
}
layer-message-viewer.layer-feedback-message-view:not(.layer-feedback-enabled) .layer-card-top svg .layer-svg-fillable {
  fill: #a4a8b2;
}
layer-feedback-message-large-view {
  background-color: #f2f2f2;
}
layer-feedback-message-large-view.layer-feedback-enabled .layer-feedback-message-view-ratings {
  background-color: #ffffff;
}
layer-feedback-message-large-view.layer-feedback-enabled .layer-feedback-message-view-ratings span svg .layer-svg-strokable {
  stroke: #19A5E4;
}
layer-feedback-message-large-view.layer-feedback-enabled .layer-feedback-message-view-ratings span svg .layer-svg-fillable {
  fill: #19A5E4;
}
layer-feedback-message-large-view.layer-feedback-enabled .layer-feedback-message-view-ratings span:hover svg .layer-svg-strokable {
  stroke: #1094d0;
}
layer-feedback-message-large-view.layer-feedback-enabled .layer-feedback-message-view-ratings span:hover svg .layer-svg-fillable {
  fill: #1094d0;
}
layer-feedback-message-large-view:not(.layer-feedback-enabled) .layer-feedback-message-view-ratings {
  color: #1b1c1d;
  background-color: #e9ebef;
}
layer-feedback-message-large-view:not(.layer-feedback-enabled) .layer-feedback-message-view-comment {
  background-color: #e9ebef;
}
layer-feedback-message-large-view:not(.layer-feedback-enabled) .layer-feedback-message-view-comment:empty {
  display: none;
}
layer-feedback-message-large-view .layer-feedback-message-view-input,
layer-feedback-message-large-view .layer-feedback-message-view-comment,
layer-feedback-message-large-view .layer-feedback-message-view-ratings {
  border-radius: 4px;
  margin: 4px 32px;
  border: solid 1px #e9ebef;
}
layer-feedback-message-large-view .layer-feedback-message-view-ratings {
  font-size: 2.0rem;
  text-align: center;
  padding: 4px 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
layer-feedback-message-large-view .layer-feedback-message-view-label {
  text-align: center;
  font-size: 0.7rem;
  color: #a4a8b2;
  padding: 12px 32px 4px 32px;
}
layer-feedback-message-large-view .layer-feedback-message-view-input,
layer-feedback-message-large-view .layer-feedback-message-view-comment {
  padding: 16px;
  font-size: 0.9rem;
  resize: none;
}
layer-feedback-message-large-view layer-action-button {
  margin: 8px 32px 12px 32px;
}
layer-feedback-message-large-view layer-action-button button {
  border-radius: 4px;
  border: solid 1px transparent;
}
layer-feedback-message-large-view layer-action-button button:disabled {
  background-color: #ffffff;
  cursor: not-allowed;
}
layer-feedback-message-large-view layer-action-button button:hover:not(:disabled) {
  border-color: #e9ebef;
  background-color: #ffffff;
}
layer-message-viewer.layer-response-message-view,
layer-message-viewer.layer-status-message-view {
  border-width: 0px;
}
layer-message-viewer.layer-response-message-view {
  justify-content: center;
}
/* See layer-button-card for where these are used */
.layer-action-button-style {
  padding: 8px 12px;
  text-align: center;
  background-color: #ffffff;
  color: #1094d0;
  font-size: 1rem;
  border-radius: 0px;
  border-width: 0px;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0px;
  font-weight: bold;
  cursor: pointer;
}
.layer-action-button-focus-style {
  background-color: #e9ebef !important;
  color: #1094d0;
}
.layer-action-button-hover-style {
  background-color: #f2f2f2;
  color: #1094d0;
}
.layer-action-button-disabled-style {
  background-color: #e9ebef;
  color: #a4a8b2;
  cursor: default;
}
.layer-action-button-selected-style {
  background-color: #19A5E4;
  color: #ffffff;
}
layer-action-button button,
layer-url-button button {
  padding: 8px 12px;
  text-align: center;
  background-color: #ffffff;
  color: #1094d0;
  font-size: 1rem;
  border-radius: 0px;
  border-width: 0px;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0px;
  font-weight: bold;
  cursor: pointer;
}
layer-action-button button:focus,
layer-url-button button:focus,
layer-action-button button:active,
layer-url-button button:active {
  background-color: #e9ebef !important;
  color: #1094d0;
}
layer-action-button button:hover,
layer-url-button button:hover {
  background-color: #f2f2f2;
  color: #1094d0;
}
layer-action-button button:disabled,
layer-url-button button:disabled {
  background-color: #e9ebef;
  color: #a4a8b2;
  cursor: default;
}
layer-action-button.layer-action-button-selected button,
layer-url-button.layer-action-button-selected button {
  background-color: #19A5E4;
  color: #ffffff;
}
img.layer-emoji {
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
  height: 1em;
}
img.layer-emoji.layer-emoji-line {
  height: 2em;
}
p.layer-emoji-line {
  font-size: 2.0em;
  line-height: 1.0em;
  margin: 0px;
}
span.layer-emoji-char {
  font-size: 1.3em;
  vertical-align: -0.2em;
}
/* 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;
}
p.layer-line-wrapping-paragraphs {
  line-height: 1.4rem;
}
layer-message-list {
  /*
   * Layout of the List itself
   */
  padding-top: 8px;
  padding-bottom: 16px;
  /*
   * Layout for the Header and Footer
   */
  /* Styling for Message header and footer contents */
  /* Do not show the avatar if there is no user associated with the avatar
    * (only happens with messages sent via via Server API 1.0 using a bot name)
    * or if the message is not the last message in the Message Group.
    */
  /*
   * Common layout for all types of messages
   */
  /* Left/Right panel layout */
  /* Menu Button in Left/Right Panel; note that this will render within the 12px margin between the Replaceable Content div and the right edge of the Message Item */
  /*
  * Custom formatting for Messages sent by the session owner.
  */
}
layer-message-list layer-message-status {
  color: #a4a8b2;
  font-size: 0.7rem;
  text-transform: capitalize;
  display: none;
}
layer-message-list .layer-message-item .layer-list-item layer-date {
  color: #a4a8b2;
  font-size: 0.7rem;
}
layer-message-list .layer-last-message-sent layer-message-status {
  display: inline-block;
}
layer-message-list layer-message-item-sent.layer-list-item-last .layer-list-item layer-date,
layer-message-list layer-message-item-received.layer-list-item-last .layer-list-item layer-date {
  display: inline-block;
}
layer-message-list .layer-sender-name {
  color: #a4a8b2;
  font-size: 0.7rem;
}
layer-message-list .layer-message-header,
layer-message-list .layer-message-footer {
  display: none;
  flex-direction: row;
}
layer-message-list .layer-message-header .layer-replaceable-inner:empty,
layer-message-list .layer-message-footer .layer-replaceable-inner:empty {
  display: none;
}
layer-message-list .layer-message-header .layer-replaceable-inner,
layer-message-list .layer-message-footer .layer-replaceable-inner {
  width: 100%;
  margin-top: 2px;
  margin-bottom: 2px;
}
layer-message-list .layer-message-item.layer-list-item-first {
  margin-top: 14px;
}
layer-message-list layer-message-item-received.layer-list-item-first .layer-message-header,
layer-message-list layer-message-item-received.layer-list-item-last .layer-message-footer {
  display: flex;
  margin-right: 5px;
}
layer-message-list layer-message-item-sent .layer-message-item-main {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
layer-message-list layer-message-item-sent.layer-list-item-last .layer-message-footer .layer-replaceable-inner {
  justify-content: flex-end;
}
layer-message-list layer-message-item-sent.layer-list-item-first .layer-message-header,
layer-message-list layer-message-item-sent.layer-list-item-last .layer-message-footer {
  display: flex;
}
layer-message-list layer-message-item-sent.layer-list-item-first .layer-message-header .layer-replaceable-inner,
layer-message-list layer-message-item-sent.layer-list-item-last .layer-message-footer .layer-replaceable-inner {
  margin-left: 5px;
}
layer-message-list layer-message-item-sent.layer-list-item-first .layer-message-header .layer-replaceable-inner layer-message-status,
layer-message-list layer-message-item-sent.layer-list-item-last .layer-message-footer .layer-replaceable-inner layer-message-status {
  margin-right: 5px;
}
layer-message-list.layer-message-list-show-my-avatars layer-message-item-sent .layer-message-right-side layer-avatar {
  display: block;
}
layer-message-list:not(.layer-message-list-show-my-avatars) layer-message-item-sent .layer-message-right-side layer-avatar {
  display: none;
}
layer-message-list.layer-message-list-show-other-avatars layer-message-item-received .layer-message-left-side layer-avatar {
  display: block;
}
layer-message-list:not(.layer-message-list-show-other-avatars) layer-message-item-received .layer-message-left-side layer-avatar {
  display: none;
}
layer-message-list .layer-message-item:not(.layer-message-preview) layer-message-status:after {
  content: '-';
  margin-left: 5px;
}
layer-message-list layer-avatar:not(.layer-has-user),
layer-message-list .layer-message-item:not(.layer-list-item-last) layer-avatar {
  visibility: hidden;
  overflow: hidden;
}
layer-message-list .layer-list-item {
  font-size: 0.8rem;
}
layer-message-list .layer-list-item .layer-message-row {
  margin-bottom: 2px;
  margin-top: 2px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  /* Align avatar with Message Viewer */
}
layer-message-list .layer-message-row {
  flex-grow: 1;
}
layer-message-list .layer-message-item:not(.layer-message-item-hide-replaceable-content) .layer-message-left-side:not(.layer-replaceable-content-empty),
layer-message-list .layer-message-item:not(.layer-message-item-hide-replaceable-content) .layer-message-right-side:not(.layer-replaceable-content-empty) {
  display: flex;
  flex-direction: row;
}
layer-message-list .layer-message-item:not(.layer-message-item-hide-replaceable-content) .layer-message-left-side .layer-replaceable-inner {
  position: relative;
}
layer-message-list .layer-message-item:not(.layer-message-item-hide-replaceable-content) .layer-message-left-side layer-avatar {
  padding-right: 8px;
}
layer-message-list .layer-message-item:not(.layer-message-item-hide-replaceable-content) .layer-message-right-side .layer-replaceable-inner {
  position: relative;
}
layer-message-list .layer-message-item:not(.layer-message-item-hide-replaceable-content) .layer-message-right-side layer-avatar {
  padding-left: 8px;
}
layer-message-list .layer-message-item {
  padding-right: 12px;
  padding-left: 12px;
}
layer-message-list .layer-message-item .layer-message-left-side layer-menu-button.layer-has-menu,
layer-message-list .layer-message-item .layer-message-right-side layer-menu-button.layer-has-menu {
  margin-left: 2px;
}
layer-message-list .layer-message-item .layer-message-left-side layer-menu-button.layer-has-menu span,
layer-message-list .layer-message-item .layer-message-right-side layer-menu-button.layer-has-menu span {
  padding-right: 3px;
}
layer-message-list layer-message-item-sent .layer-list-item .layer-message-footer {
  text-align: right;
}
layer-message-list .layer-message-status-pending .layer-message-item-content,
layer-message-list .layer-message-status-pending layer-message-viewer.layer-root-viewer {
  opacity: 0.5;
}
layer-message-list .layer-message-preview .layer-message-item-content,
layer-message-list .layer-message-preview layer-message-viewer.layer-root-viewer {
  opacity: 0.5;
}
layer-message-list layer-message-item-status .layer-list-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 8px 0px;
}
layer-message-list layer-message-item-status .layer-message-item-main {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
layer-message-list layer-message-item-status layer-message-viewer {
  background-color: transparent;
  color: #a4a8b2;
  font-size: 0.7rem;
}
layer-message-list layer-message-item-status layer-message-viewer .layer-card-top {
  background-color: transparent;
}
layer-message-list layer-message-item-status layer-message-viewer layer-text-message-view {
  padding-top: 0px;
  padding-bottom: 0px;
}
layer-message-list layer-message-item-status layer-message-viewer.layer-status-message-view {
  padding: 0px 4px;
}
.layer-conversation-view-width-small layer-message-list .layer-message-item {
  padding-right: 8px;
  padding-left: 8px;
}
.layer-conversation-view-width-tiny layer-message-list .layer-message-item {
  padding-right: 4px;
  padding-left: 4px;
}
layer-message-viewer.x-layer-scheduling-view.layer-root-viewer:not(.layer-dialog-content) {
  width: 350px;
}
layer-message-viewer x-layer-scheduling-view .layer-scheduling-option,
layer-message-viewer x-layer-scheduling-view layer-action-button {
  border-bottom: solid 1px #f2f2f2;
}
x-layer-scheduling-view {
  /*
  &:not(.layer-scheduling-initialized-done) {
    &.layer-scheduling-done {
      .layer-scheduling-invite {
        animation: slide-left-out 1.5s forwards;
        position: absolute;
        display: block;
      }
      .layer-scheduling-appointment {
        animation: slide-left-in 1.5s forwards;
        position: absolute;
        display: block;
      }
    }
  }

  @keyframes slide-left-in {
    0% {
      display: block;
    }
    1% { transform: translateX(100%); }
    60% { transform: translateX(100%); }
    99% { transform: translateX(0%); }
  }

  @keyframes slide-left-out {
      1% { transform: translateX(0%); }
      60% { transform: translateX(0%); }
      99% { transform: translateX(-100%); }
      100% {
        display: none;
      }
  }
  */
}
x-layer-scheduling-view .layer-scheduling-appointment {
  display: none;
}
x-layer-scheduling-view .layer-scheduling-appointment,
x-layer-scheduling-view .layer-scheduling-invite {
  background-color: #f2f2f2;
}
x-layer-scheduling-view.layer-scheduling-initialized-done .layer-scheduling-invite {
  display: none;
}
x-layer-scheduling-view.layer-scheduling-initialized-done .layer-scheduling-appointment,
x-layer-scheduling-view.layer-scheduling-animation .layer-scheduling-appointment {
  display: block;
}
x-layer-scheduling-view.layer-scheduling-animation .layer-scheduling-invite {
  animation: fade-out 0.7s forwards;
  animation-delay: 1s;
  display: block;
  position: absolute;
  z-index: 2;
}
x-layer-scheduling-view.layer-scheduling-animation .layer-scheduling-appointment {
  animation: fade-in 0.7s forwards;
  animation-delay: 1s;
  display: block;
}
x-layer-scheduling-view .layer-message-bottom-button-panel {
  border-top: solid 1px #dadde4;
}
x-layer-scheduling-view .layer-scheduling-hours-label {
  color: #a4a8b2;
  font-size: 0.7rem;
  text-align: center;
  margin-bottom: 8px;
}
x-layer-scheduling-view .layer-scheduling-option {
  padding: 8px 12px;
  text-align: center;
  background-color: #ffffff;
  color: #1094d0;
  font-size: 1rem;
  border-radius: 0px;
  border-width: 0px;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0px;
  font-weight: bold;
  cursor: pointer;
}
x-layer-scheduling-view .layer-scheduling-option:focus,
x-layer-scheduling-view .layer-scheduling-option:active {
  background-color: #e9ebef !important;
  color: #1094d0;
}
x-layer-scheduling-view .layer-scheduling-option:hover {
  background-color: #f2f2f2;
  color: #1094d0;
}
x-layer-scheduling-view .layer-scheduling-option.layer-scheduling-option-disabled {
  background-color: #e9ebef;
  color: #a4a8b2;
  cursor: default;
}
x-layer-scheduling-view .layer-scheduling-option .layer-scheduling-option-details {
  font-size: 0.8rem;
  text-align: center;
  color: #a4a8b2;
  font-weight: normal;
}
x-layer-scheduling-view .layer-scheduling-option.layer-scheduling-option-selected.layer-scheduling-option-disabled {
  background-color: #19A5E4;
  color: #ffffff;
}
x-layer-scheduling-view .layer-scheduling-option.layer-scheduling-option-selected.layer-scheduling-option-disabled .layer-scheduling-option-details {
  color: #ffffff;
}
x-layer-scheduling-view .layer-scheduling-option:last-child {
  border-bottom-width: 0px;
}
x-layer-scheduling-view .layer-scheduling-details {
  display: flex;
  flex-direction: row;
  padding: 8px 12px;
}
x-layer-scheduling-view .layer-scheduling-details .layer-scheduling-title-wrapper {
  padding-right: 12px;
  flex-grow: 1;
}
x-layer-scheduling-view .layer-scheduling-location:empty {
  display: none;
}
x-layer-scheduling-view .layer-scheduling-location {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 8px;
}
x-layer-scheduling-view .layer-scheduling-time-description:empty {
  display: none;
}
x-layer-scheduling-view .layer-scheduling-time-description {
  margin-top: 8px;
}
x-layer-scheduling-view .layer-scheduling-time-description em {
  font-weight: bold;
  font-style: normal;
}
x-layer-scheduling-view .layer-scheduling-location,
x-layer-scheduling-view .layer-scheduling-location a {
  font-size: 0.7rem;
  color: #a4a8b2;
  white-space: nowrap;
}
x-layer-scheduling-view .layer-scheduling-description {
  font-size: 0.8rem;
  color: #1b1c1d;
  height: 4.2rem;
}
@keyframes fade-in {
  0% {
    display: block;
    opacity: 0.1;
  }
  99% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    position: absolute;
    z-index: 2;
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}
x-layer-scheduling-large-view {
  background-color: #f2f2f2;
}
x-layer-scheduling-large-view .layer-scheduling-body {
  padding: 16px;
}
x-layer-scheduling-large-view .layer-scheduling-avatar-wrapper {
  display: flex;
  flex-direction: row;
}
x-layer-scheduling-large-view .layer-scheduling-avatar-wrapper .layer-scheduling-details {
  flex-grow: 1;
  width: 100px;
  /* Flexbox workaround */
}
x-layer-scheduling-large-view layer-avatar {
  margin-left: 16px;
}
x-layer-scheduling-large-view.x-layer-scheduling-large-view-width-tiny .layer-scheduling-row,
x-layer-scheduling-large-view.x-layer-scheduling-large-view-width-small .layer-scheduling-row {
  display: block;
}
x-layer-scheduling-large-view.x-layer-scheduling-large-view-width-tiny .layer-scheduling-row > div,
x-layer-scheduling-large-view.x-layer-scheduling-large-view-width-small .layer-scheduling-row > div {
  width: auto;
}
x-layer-scheduling-large-view .layer-scheduling-row {
  display: flex;
  flex-direction: row;
}
x-layer-scheduling-large-view .layer-scheduling-row > div {
  padding-bottom: 16px;
  flex-grow: 1;
  width: 100px;
  /* Flexbox workaround */
}
x-layer-scheduling-large-view .layer-scheduling-row > div > div {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
x-layer-scheduling-large-view .layer-scheduling-row a {
  color: #6e727a;
  font-weight: bold;
}
x-layer-scheduling-large-view .layer-scheduling-header {
  font-size: 0.7rem;
  color: #a4a8b2;
  margin-bottom: 4px;
}
x-layer-scheduling-large-view .layer-message-bottom-button-panel {
  border-top: solid 1px #dadde4;
}
x-layer-scheduling-large-view .layer-message-bottom-button-panel layer-action-button {
  border-top: solid 1px #f2f2f2;
}
x-layer-scheduling-large-view .layer-message-bottom-button-panel layer-action-button:first-child {
  border-top-width: 0px;
}
/* Message Type Containers */
/* Message Type Misc */
layer-call-message-view .layer-call-buttons button {
  border-width: 1px 0px 0px 0px;
  border-color: #dadde4;
  border-style: solid;
}
layer-call-message-view .layer-call-no-provider-nodes {
  margin: 8px 12px;
}
.layer-call-message-view .layer-call-title-status {
  font-size: 56px;
  /*height: 24px;
    background-color: @color-g5;
    border-radius: 16px;
    width: 16px;
    height: 16px;*/
}
.layer-call-message-view .layer-call-title-status-3,
.layer-call-message-view .layer-call-title-status-4,
.layer-call-message-view .layer-call-title-status-5 {
  color: #ffd624;
}
.layer-call-message-view .layer-call-title-status-6 {
  color: #56bf46;
}
.layer-call-message-view .layer-call-title-status-7,
.layer-call-message-view .layer-call-title-status-8,
.layer-call-message-view .layer-call-title-status-9 {
  color: #a4a8b2;
}
.layer-call-message-view .layer-call-title-status-1,
.layer-call-message-view .layer-call-title-status-2 {
  color: #19A5E4;
}
body layer-receipt-message-large-view {
  padding: 0px;
}
/* FIXES THAT MAY NEED TO MOVE TO XDK */
layer-dialog .layer-dialog-content.layer-receipt-message-large-view {
  /*width: auto;
  max-width: initial;
  min-width: initial !important;*/
}
layer-dialog layer-receipt-message-large-view .layer-location-message-view {
  width: auto !important;
}