.icon {
  box-sizing: border-box;
  display: inline-block;
  width: 20px;
  height: 20px;
}

.icon-more {
  margin: 0;
  background: url('../assets/icon/more.png') no-repeat;
  background-size: contain;
}

.icon-chat-setting {
  background: url('../assets/icon/chat-setting.png') no-repeat;
  background-size: contain;
}

.icon-image {
  cursor: pointer;
  margin: 12px 10px 0;
  background: url('../assets/icon/image.png') no-repeat;
  background-size: contain;
}

.icon-files {
  margin: 12px 10px 0;
  background: url('../assets/icon/files.png') no-repeat;
  background-size: contain;
}

.icon-files-word {
  background-size: 100% 100% !important;
  width: 40px;
  height: 40px;
  margin: 0px 10px 0px 0px;
  background-size: contain;
  background: url('../assets/images/word.png') no-repeat;
}

.icon-files-excel {
  background-size: 100% 100% !important;
  width: 40px;
  height: 40px;
  margin: 0px 10px 0px 0px;
  background-size: contain;
  background: url('../assets/images/excel.png') no-repeat;
}

.icon-files-image {
  background-size: 100% 100% !important;
  width: 40px;
  height: 40px;
  margin: 0px 10px 0px 0px;
  background-size: contain;
  background: url('../assets/images/image.png') no-repeat;
}

.icon-files-pdf {
  background-size: 100% 100% !important;
  width: 40px;
  height: 40px;
  margin: 0px 10px 0px 0px;
  background-size: contain;
  background: url('../assets/images/pdf.png') no-repeat;
}

.icon-files-ppt {
  background-size: 100% 100% !important;
  width: 40px;
  height: 40px;
  margin: 0px 10px 0px 0px;
  background-size: contain;
  background: url('../assets/images/ppt.png') no-repeat;
}

.icon-files-txt {
  background-size: 100% 100% !important;
  width: 40px;
  height: 40px;
  margin: 0px 10px 0px 0px;
  background-size: contain;
  background: url('../assets/images/txt.png') no-repeat;
}

.icon-files-unknown {
  background-size: 100% 100% !important;
  width: 40px;
  height: 40px;
  margin: 0px 10px 0px 0px;
  background: url('../assets/images/unknown.png') no-repeat;
}

.icon-files-zip {
  background-size: 100% 100% !important;
  width: 40px;
  height: 40px;
  margin: 0px 10px 0px 0px;
  background-size: contain;
  background: url('../assets/images/zip.png') no-repeat;
}

.icon-video {
  margin: 12px 10px 0;
  background: url('../assets/icon/video.png') no-repeat;
  background-size: contain;
}

.icon-face {
  margin: 12px 10px 1px 18px;
  background: url('../assets/icon/face.png') no-repeat;
  background-size: contain;
}

.icon-custom {
  margin: 12px 10px 0;
  background: url('../assets/icon/custom.png') no-repeat;
  background-size: contain;
}

.icon-call {
  margin: 12px 2px 0 10px;
  background: url('../assets/icon/call.png') no-repeat;
  background-size: contain;
}

.icon-call-voice {
  margin: 5px;
  width: 20px;
  height: 10px;
  background: url('../assets/icon/voice-call.png') no-repeat;
  background-size: contain;
}


.icon-call-video {
  margin: 5px;
  width: 20px;
  height: 14px;
  background: url('../assets/icon/video-call.png') no-repeat;
  background-size: contain;
}


.icon-down-arrow {
  margin: 0;
  width: 7px;
  height: 7px;
  background: url('../assets/icon/down.png') no-repeat;
  background-size: contain;
}

.icon-location {
  margin: 12px 10px 0;
  background: url('../assets/icon/location.png') no-repeat;
  background-size: contain;
}

.icon-selected {
  width: 16px;
  height: 16px;
  background: url('../assets/icon/selected.svg') no-repeat;
  background-size: contain;
}

.icon-unselected {
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 8px;
}

.icon-cancel {
  width: 16px;
  height: 16px;
  background: url('../assets/icon/cancel.svg') no-repeat;
  background-size: contain;
}

.icon-left {
  width: 12px;
  height: 12px;
  background: url('../assets/icon/right.png') no-repeat;
  background-size: contain;
  transform: rotate(180deg);
}

.icon-right {
  width: 12px;
  height: 12px;
  background: url('../assets/icon/right.png') no-repeat;
  background-size: contain;
}

.icon-right-transparent {
  width: 12px;
  height: 12px;
  background: url('../assets/icon/back.svg') no-repeat;
  transform: rotate(180deg);
  background-size: contain;
}

.icon-down {
  width: 12px;
  height: 12px;
  background: url('../assets/icon/right.png') no-repeat;
  background-size: contain;
  transform: rotate(90deg);
}

.icon-edit {
  width: 16px;
  height: 16px;
  background: url('../assets/icon/edit.png') no-repeat;
  background-size: contain;
}

.icon-voice {
  width: 16px;
  height: 16px;
  background: url('../assets/icon/voice.png') no-repeat;
  background-size: contain;
}

.icon-reserve {
  transform: rotate(180deg);
}

.icon-del {
  width: 16px;
  height: 16px;
  background: url('../assets/icon/del.png') no-repeat;
  background-size: contain;
}

.icon-work {
  width: 36px;
  height: 36px;
  background: url('../assets/icon/work.png') no-repeat;
  background-size: contain;
}

.icon-public {
  width: 36px;
  height: 36px;
  background: url('../assets/icon/public.png') no-repeat;
  background-size: contain;
}

.icon-meeting {
  width: 36px;
  height: 36px;
  background: url('../assets/icon/meeting.png') no-repeat;
  background-size: contain;
}

.icon-room {
  width: 36px;
  height: 36px;
  background: url('../assets/icon/room.png') no-repeat;
  background-size: contain;
}

.icon-system {
  width: 36px;
  height: 36px;
  background: url('../assets/icon/system.png') no-repeat;
  background-size: contain;
}

.icon-words {
  background: url('../assets/icon/words.png') no-repeat;
  background-size: contain;
}

.icon-evaluate {
  background: url('../assets/icon/evaluate.png') no-repeat;
  background-size: contain;
}

.icon-star {
  width: 17px !important;
  height: 24px;
  background: url('../assets/icon/star.svg') no-repeat;
  background-size: contain;
  margin-top: 2px !important;
}

.icon-star-light {
  width: 24px !important;
  height: 24px !important;
  background: url('../assets/icon/star-light.svg') no-repeat;
  background-size: contain;
}

.icon-back {
  width: 27px;
  height: 27px;
  background: url('../assets/icon/back.svg') no-repeat;
  background-size: contain;
}

.icon-bottom-double {
  width: 12px;
  height: 12px;
  background: url('../assets/icon/double-arrow.svg') no-repeat;
  background-size: contain;
}

.icon-c2c {
  width: 20px;
  height: 20px;
  background: url('../assets/icon/c2c.svg') no-repeat;
  background-size: contain;
}

.icon-group {
  margin-left: 40px;
  width: 14px;
  height: 14px;
  background: url('../assets/icon/startGroup.svg') no-repeat;
  background-size: contain;
}

.icon-msg-del {
  width: 20px;
  height: 20px;
  background: url('../assets/icon/msg-del.svg') no-repeat;
  background-size: contain;
}

.icon-msg-forward {
  width: 20px;
  height: 20px;
  background: url('../assets/icon/msg-forward.svg') no-repeat;
  background-size: contain;
}

.icon-msg-copy {
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40' height='40' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cpath d='M467 0c7.732 0 14 6.268 14 14v233c0 7.732-6.268 14-14 14H353.036l-12.174 12.205a4 4 0 0 1-5.664 0L323.024 261H14c-7.732 0-14-6.268-14-14V14C0 6.268 6.268 0 14 0h453z' id='b'/%3E%3Cfilter x='-10.1%25' y='-14%25' width='120.2%25' height='135.4%25' filterUnits='objectBoundingBox' id='a'%3E%3CfeOffset dy='10' in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur stdDeviation='14.5' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0' in='shadowBlurOuter1'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-42 -33)'%3E%3Cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3E%3Cuse fill='%23FFF' xlink:href='%23b'/%3E%3C/g%3E%3Cg transform='translate(0 .25)' fill-rule='nonzero'%3E%3Crect stroke='%23444' stroke-width='4' x='6' y='11.712' width='20.487' height='24.585' rx='1'/%3E%3Cpath d='M36 2.016v26.71a.5.5 0 0 1-.5.5h-3.035a.5.5 0 0 1-.5-.5V6.046l-19.674.001a.5.5 0 0 1-.5-.5V2.516a.5.5 0 0 1 .5-.5H36z' fill='%23444'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat;
  background-size: contain;
}


.icon-msg-play {
  width: 20px;
  height: 20px;
  background: url('../assets/icon/msg-play.svg') no-repeat;
  background-size: contain;
}

.icon-msg-reply {
  width: 20px;
  height: 20px;
  background: url('../assets/icon/msg-reply.svg') no-repeat;
  background-size: contain;
}

.icon-msg-revoke {
  width: 18px;
  height: 20px;
  margin-right: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40' height='40' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cpath d='M467 0c7.732 0 14 6.268 14 14v233c0 7.732-6.268 14-14 14H353.036l-12.174 12.205a4 4 0 0 1-5.664 0L323.024 261H14c-7.732 0-14-6.268-14-14V14C0 6.268 6.268 0 14 0h453z' id='b'/%3E%3Cfilter x='-10.1%25' y='-14%25' width='120.2%25' height='135.4%25' filterUnits='objectBoundingBox' id='a'%3E%3CfeOffset dy='10' in='SourceAlpha' result='shadowOffsetOuter1'/%3E%3CfeGaussianBlur stdDeviation='14.5' in='shadowOffsetOuter1' result='shadowBlurOuter1'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0' in='shadowBlurOuter1'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-161 -164)'%3E%3Cuse fill='%23000' filter='url(%23a)' xlink:href='%23b'/%3E%3Cuse fill='%23FFF' xlink:href='%23b'/%3E%3C/g%3E%3Cpath d='M9.949 18.825a.5.5 0 0 1-.855.352l-6.957-7.029a.5.5 0 0 1 0-.703l6.957-7.029a.5.5 0 0 1 .855.352v4.967h12.75C31.081 9.736 38 15.65 38 23.134c0 7.382-6.733 13.237-14.962 13.394l-.339.004H10.44a1 1 0 0 1-1-1v-2.123a1 1 0 0 1 1-1h12.26c6.266 0 11.22-4.236 11.22-9.275 0-4.955-4.79-9.134-10.907-9.272l-.313-.003H9.95v4.967z' fill='%23444' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
  background-size: contain;
}

.icon-msg-resend {
  width: 20px;
  height: 20px;
  background: url('../assets/icon/msg-revoke.svg') no-repeat;
  background-size: contain;
  transform: rotate(180deg);
}

.icon-msg-quote {
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 41' class='design-iconfont'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M36 5.273v26.621H22.715L20 34.675l-2.714-2.78H4V5.273h32z' stroke='%23444' stroke-width='4'/%3E%3Cpath fill='%23444' d='M11 16.374h4v4.032h-4zM18 16.374h4v4.032h-4zM25 16.374h4v4.032h-4z'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
  background-size: contain;
}

.icon-close-h5 {
  width: 20px;
  height: 20px;
  background: url('../assets/icon/icon-close-h5.svg') no-repeat;
  background-size: contain;
}

.icon-download-h5 {
  width: 20px;
  height: 20px;
  background: url('../assets/icon/icon-download-h5.svg') no-repeat;
  background-size: contain;
}

.icon-download {
  width: 20px;
  height: 20px;
  background: url('../assets/icon/icon-download.svg') no-repeat;
  background-size: contain;
}

.icon-error {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #FF584C;
  font-size: 12px;
  color: #FFFFFF;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* .icon-close {
 * width: 16px;
 *  height: 16px;
 *  background: url('../assets/icon/close.png') no-repeat;
 *  background-size: contain;
 *}
 */

.icon-close {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
  border-radius: 50%;
}

.icon-close::before,
.icon-close::after {
  content: "";
  position: absolute;
  /*方便进行定位*/
  background-color: #8F959E;
  height: 16px;
  width: 2px;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -1px;
}

.icon-close::before {
  transform: rotate(45deg);
}

.icon-close::after {
  transform: rotate(-45deg);
}

.plus {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
}

.plus::before,
.plus::after {
  content: "";
  position: absolute;
  background-color: #232832;
  border-radius: 0.5px;
  width: 1px;
  height: 14px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.plus::after {
  transform: rotate(90deg);
  width: 0.5px;
}