.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 {
  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-video {
  margin: 12px 10px 0;
  background: url('../assets/icon/video.png') no-repeat;
  background-size: contain;
}

.icon-face {
  margin: 12px 10px 1px;
  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-left-arrow {
  width: 27px;
  height: 27px;
  background: url('../assets/icon/arrow-left-center.svg') no-repeat;
  background-size: contain;
}

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

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

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

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

.icon-refresh-right {
  width: 27px;
  height: 27px;
  background: url('../assets/icon/rotate-right.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('../assets/icon/msg-copy.svg') 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-replies {
  width: 12px;
  height: 12px;
  background: url('../assets/icon/replies.svg') no-repeat;
  background-size: contain;
}

.icon-msg-revoke {
  width: 20px;
  height: 20px;
  background: url('../assets/icon/msg-revoke.svg') 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('../assets/icon/msg-qnote.svg') 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-style: normal;
  font-size: 12px;
  color: #FFFFFF;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

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

.icon-collapse {
  width: 20px;
  height: 20px;
  background: url('../assets/icon/collapse.svg') 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;
}