compose_cards.css

.card-compose {
}

.cmp-addr-label, .cmp-subject-label {
  color: #888888;
  display: table-cell;
  width: -moz-min-content;
  white-space: nowrap;
  text-align: left;
  line-height: 3rem;
}

.cmp-addr-label::after, .cmp-subject-label::after {
  content: ':';
}

.cmp-addr-container, .cmp-subject-text {
  display: table-cell;
  width: -moz-available;
}

.cmp-bubble-container {
  width: calc(100% - 3rem);
  float: left;
}

.cmp-peep-bubble {
  float: left;
  margin-left: 0.3rem;
}

.cmp-to-text-container {
  overflow: hidden;
}

input.cmp-addr-text, input.cmp-subject-text {
  height: 3rem;
  margin-left: 0.5rem;
  padding: 0 0 0.2rem;
  font-size: 1.5rem;
  line-height: 2.2rem;
  border: 0 !important;
  background: none;
}

input.cmp-addr-text, input.cmp-dot-text {
  float: left;
  width: 0.5rem;
  max-width: 100%;
}

input.cmp-bcc-text {
  font-size: 1.6rem;
  padding-bottom: 0.4rem;
}

input.cmp-subject-text {
  display: table-cell;
  font-size: 1.6rem;
  text-overflow: ellipsis;
}

.cmp-envelope-bar {
  margin: 0.3rem 0;
}

.cmp-contact-add {
  position: relative;
  left: 0.5rem;
  background: url("images/icons/actionicon_email_addrecipient.png") no-repeat center / 2rem;
  width: 1.8rem;
  height: 1.8rem;
  border: 0.6rem solid transparent;
  border-radius: 50%;
  transition: border 200ms ease;
  display: inline-block;
  vertical-align: middle;
}

.cmp-contact-add:active,
.cmp-attachment-remove:active {
  border: 0.6rem solid #52B6CC;
}

.cmp-envelope-line {
  display: table;
  table-layout: fixed;
  width: calc(100% - 3rem);
  height: 3rem;
  border-bottom: 0.1rem solid lightgray;
  margin: 0 1.5rem;
  padding: 0.4rem 0;
  font-size: 1.5rem;
}

.cmp-body-text {
  -moz-box-sizing: border-box;
  width: calc(100% - 4rem);
  min-height: 10rem;
  margin: 1rem 1.5rem;
  display: block;
  overflow: hidden;
  padding: 0rem;
  font-size: 1.7rem;
  line-height: 1.9rem;
  font-weight: normal;
  border: none;
  box-shadow: none;
  background: #fff;
}

/* Attachment */
.icon-attachment {
  background: url("images/icons/actionicon_attachments.png") no-repeat scroll center / 3rem !important;
}

.cmp-attachment-total {
  border-bottom: none;
}

.cmp-attachment-size {
  display: table-cell;
  white-space: nowrap;
  text-align: left;
  line-height: 3rem;
  padding-left: 0.5rem;
}

.cmp-attachment-container {
  padding: 0 1.5rem;
  margin: 0;
  font-size: 1.2rem;
}
.cmp-attachment-item {
  list-style-type: none;
  min-height: 3.5rem !important;
  height: 3.5rem;
  border-bottom: none !important;
}
.cmp-attachment-item:only-child {
  min-height: 3.8rem !important;
  height: 3.8rem;
}
.cmp-attachment-item:last-child {
  border-bottom: 0.1rem solid lightgray !important;
}
.cmp-attachment-icon {
  background: url("images/icons/message-list-attachment.png") no-repeat scroll center / 3rem auto transparent;
  display: inline-block;
  width: 2rem;
  height: 3.5rem;
}
.cmp-attachment-item:only-child > .cmp-attachment-icon {
  height: 3.8rem;
}
.cmp-attachment-filename,
.cmp-attachment-filesize {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 12.5rem);
  white-space: nowrap;
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 3.5rem;
}
.cmp-attachment-item:only-child > .cmp-attachment-filename,
.cmp-attachment-item:only-child > .cmp-attachment-filesize {
  line-height: 3.8rem;
}
.cmp-attachment-filesize {
  max-width: 6.5rem;
}
.cmp-attachment-filesize:before {
  content: "(";
}
.cmp-attachment-filesize:after {
  content: ")";
}
.cmp-attachment-remove {
  background: url("images/icons/actionicon_email_removeattachment.png") no-repeat scroll center / 2rem;
  width: 2rem;
  height: 2rem;
  top: calc(50% - 1.6rem); /* (100% - 2rem - 0.6rem x 2)/2 */
  border: 0.6rem solid transparent;
  border-radius: 50%;
  position: absolute;
  right: -0.6rem;
}

.cmp-messages-sending p {
  text-align: center;
}