@zegocloud/zimkit-react/index.css

ZEGO ZIMKit SDK for Web React

.btn {
  text-align: center;
  background-color: #3478fc;
  border-radius: 4px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.err-tip {
  align-self: flex-start;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 400;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #f64326;
  line-height: 14px;
}

.err-icon {
  margin-right: 8px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA/dJREFUaEPVmkFsFFUYx///WZdgKwdCL1ASD/ZgYjihgcSoENCYYCxEw0UkGsIsZKeRogESimkQEiRqMZ2JzIjRKFyIRppoNApBCQeNcONAYj2YgL204VBaSredj8xMW5lht7vLfrPN7HHnzf97v/e+73vfe28IhZ90dz+KidKL8Lke8J+EoAPkUgiWhPLEKERugRgEjOsw5CIW539lX9+dRs3zYQVk94GlkLFO+NIJyEsAWurUGgf4CwwOgK0D/OzYrTrfnxmbOt8Ss7cFHNkL8fcBMyNcp0aZ5qOgcRyy7BN6veP1yNU8A3L2bA7nf98BsBeQ5fUYqb0thwDpxcYXvuDWrdO1vFcTgOzqboeUzkHk6VpEG25DXgHzm3my72Y1raoAYr6zBpj+Pr1Rr9TFYDZyW+h9+ud8EPMCSMHaBpHPASyuNhIpPZ8AuZOufboiZqUHM53/JqWO1SdLvlkJouwMRG4z9dsCjnwScAJ4ZF05d3oAIAxYv/RX832+2qRwCEb+mWRgxwDCVHnh0h9NyzbV+px8HmSnDc+vvT/FxgHMognArVf3wfY8Ss/uuf9/Ma0jgBxsXBsFeo43qzMHEK6wGB5Ucp2P6TnvxQGKHwF4t3GAIL22dcyu2P8DFLp6IP4HjRsIijfDodtvxQAKXTbELyrpH6LbfyTQCgHCwmx69F+92sY4Ra9/ZxzAOgWRHSoAwChySx4PCsAIYFfXW/D9L5XEg2E5Q9fZFgconobgDTUbhvE2T/Z/FQGYVlAqbFYTB7+jZ7+eCOJvAXlN0cY5evYWhpuRscnhh6jn5+kLf6Rnv5IA+AGQTXoAGEfrojbKbutVTMuAonDgQhfoOhsTLnQegg2qdnLspBS6+iD+HlVh4DI957lEEF+GyLOqdmicoBSKP0HwsqowcJWeE9s7iFm8AmC1qh3iZ4pZ/BtAh64wr9G1VyUWsmsAnlK1AwxSCtYwRJbpCvMfenZsUMS0glX+CVU75AjFtO4CskhXGDfpOisTQXwDgnZVO+BkSgAcoWu3JYI4jZmeTMuFxujZjyXWgduAtKrOQORCqQTxFF07nwjiKQA5VYAoiFNJo8r9rCAXptF0FrImAQQLWRqlRHO6D4SlRCrFXFMIomIuMJVCOT0JyvuQ/NchCkvbITysu94wKqdDAP0NzQG6zoeJhWw/BMfU5ia2oVHfUuZX0DsxFE+je5YDpf+UAOJbynAWNDf1SBmARnxTH8WB4rEKkaILVThWiSDUDrbSDOLyB1shQNaPFqOMlOHD3dkMkenj9TmI6HYmmxccCYhsXjHF3Smjl3xzEFm+Zp2DyPJFd7ymyeinBskiLLMfe5SrJhfyc5t7GQsCoTkmJBsAAAAASUVORK5CYII=);
  background-size: cover;
  width: 24px;
  height: 24px;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-thumb {
  /*滚动条内部滑块*/
  border-radius: 3px;
  background-color: #bebebe;
  opacity: 0.6;
  transition: background-color 0.3s;
  cursor: pointer;
}

*::-webkit-scrollbar-thumb:hover {
  /*鼠标悬停滚动条内部滑块*/
  background: #bebebe;
}

*::-webkit-scrollbar-track {
  /*滚动条内部轨道*/
  background: transparent;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

.dialog {
  z-index: 4;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 360px;
  min-height: 214px;
  background-color: #fff;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1),
    0px 12px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
}
.dialog .top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  padding: 0 42px;
  box-sizing: border-box;
}
.dialog .top .title {
  position: relative;
  padding: 0 18px;
  line-height: 48px;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  height: 100%;
  cursor: pointer;
}
.dialog .top .title.actived {
  font-weight: 500;
}
.dialog .top .title.actived::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 0;
  width: 32px;
  height: 3px;
  background-color: #3478fc;
  border-radius: 4px;
}
.dialog .content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 24px;
  width: 100%;
}
.dialog .content .peer,
.dialog .content .group,
.dialog .content .attend {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.dialog .content .peer .input-box,
.dialog .content .group .input-box,
.dialog .content .attend .input-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 34px;
}
.dialog .content .peer .btn-box,
.dialog .content .group .btn-box,
.dialog .content .attend .btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog .content .peer .btn-box .cancel-btn,
.dialog .content .group .btn-box .cancel-btn,
.dialog .content .attend .btn-box .cancel-btn,
.dialog .content .peer .btn-box .create-peer-btn,
.dialog .content .group .btn-box .create-peer-btn,
.dialog .content .attend .btn-box .create-peer-btn {
  width: 100px;
  height: 36px;
  line-height: 34px;
}
.dialog .content .peer .btn-box .cancel-btn,
.dialog .content .group .btn-box .cancel-btn,
.dialog .content .attend .btn-box .cancel-btn {
  margin-right: 20px;
  background-color: #fff;
  color: #3478fc;
  border: 1px solid #e8e8e8;
}
.dialog .content .peer .err-tip,
.dialog .content .group .err-tip,
.dialog .content .attend .err-tip {
  position: absolute;
  bottom: -14px;
}
.dialog .content input {
  margin-bottom: 8px;
  padding: 9px 0;
  width: 312px;
  height: 40px;
  border: none;
  border-bottom: 1px solid #ebecec;
}
.dialog .content .en-input {
  width: 410px;
}

.conversation {
  display: flex;
  width: 350px;
  height: 720px;
  background-color: #fff;
  border-radius: 0 0 0 8px;
}
.conversation .left-banner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 8px;
  width: 70px;
  height: 100%;
  background-color: #f2f2f2;
  border-radius: 0 0 0 8px;
}
.conversation .left-banner .item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  padding: 8px 0 6px;
  width: 54px;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.conversation .left-banner .item .icon {
  width: 24px;
  height: 24px;
  background-size: cover;
}
.conversation .left-banner .item .message-icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAqlJREFUaEPtWL+LE0EUfm8WfxJSWAgaC9FCnOzG8kx1FhZGRbjiCgULBUFUzkb8I8RG0UMQtBAURBCLMzaC2sSUJrOjjWJh7sDCIgT1kLwneySw2SSbuDvxjMx2ycz73vve983s8hCm/MEprx8sgfVW0CpgFUjZgf/TQoVCYVe73b7GzIcAYEfKJqUNX0HEV47jXK3Val+iYH0KdIp/x8zb0mY2GY+I3xzHORAl0Ucgn88/ZOaTJpObwkLER77vnwrj9RGQUi7/A7YZxnlFa71zFAEOb9Bar+tBl1LG1jNIAUvAlOcDHKuAPQMp/WQtZC1kLTShF5mUcgkAjnYa/FxrfSzc7LTrXayJHeJRwGnXLYFuB4bdQhGLLGmtj8dY6I/XJ65Aystl7PBRVrRfo2O3MuFGq4D9lEhoHXsLjXoPpGzs2OGpD7EQQo6TTQhBuVzuc7lcXo3bXyqVNjUajd1EJMbBJSIdNyUZNNj6yMx7xgGP7kHEr0KI+Xq9/mZQvOd5s0T0mJm3J8T/5Pv+3ti5UD6fv8XMF5MkCGIQ8bvjOCdqtdrLMIbneYeJ6Bkzb02Bfdv3/UuxBGZmZrKtVustM+9PmggAfgLAnNb6RYAhpTwCAE8BYHNSTER8n8lkDlar1WYsgWCxWCxuaTabV5h5FhF7RnmDCmDmwM/7ImuriDjf+e8JM2/sSYz4AQB6hmhDsJcR8XU2m71eqVR+9Nk2aUeica7rLhDRjUiRv4LfzLwh/L8Q4rJS6qaJ3Ebnnq7rnieixeAoDCmOhRAXlFJ3TBS/duZMAXVxXNc9S0R3ASB6TZIQ4pxS6p7JnMYJBMW5rnuaiO4DgNMpti2EOKOUemCy+IkoEFJijpnXfI6IC0qp4BYy/kxEAeNVxgBaAn+z24NyTb0CvwHmhaNAjISz7gAAAABJRU5ErkJggg==);
}
.conversation .left-banner .item .create-chat-icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAOhJREFUaEPtmeEJxCAMhRvnuFtAcZBb5Ia6RTqI6AK9OfTwR6Fw2AYk1Mjr72DzXr5oRFqUf6Q8/wUC7q4gKjBtBbz3r5zzpwo0xrxDCKuEWDGEnHNbKeVRkyaib4zxqUqAtbYcE04piZglsmhNHAKYvKECLaOAEBBiOgCEOo3CLgSEgFCnA8MitM/z+0gspPNy2TqKn90nmrvQcZ6//ItwwNl9Yl4B6hHqpQLTKNNBjBLDngPMCjbD0ANMB9ED6AEmKq0wIASEgFCnA9MipP6BQ/0TkxCZf8uKnQMQwHQAFWAaJRamvgI/JXO4MSLfc2EAAAAASUVORK5CYII=);
}
.conversation .left-banner .item .exit-icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAgVJREFUaEPtmb1KA0EUhe+dRR/ASiWCYDeTjYUvYCGIhZ2NdorY2PsOWvgAInYqgl0KwSpPIJrMjJ0WBtNZi7B7ZcCFGLLJZr1ZM7CpZ8+c7575ycwgeP5Dz/1DCfDfCZYJJAnUarVKFEUnRLQKAHNMyXQQsREEwVGz2Wz302RJ4Mf8ExHNMBn/JYOIH0EQLPeDYAFQSl0R0fY4zCeaiHhtjNnp7YMFQEr5zjhs0urQsdbOjwuAuoWttVyFGapbWEd5hpeUsgTIVDil1BsRVVxjRGwbYxYyfTikUWEJhGG4EcfxmfMjhDhotVp3XgFwmO2nUVgCJUBKBdgSUEq5XfaUiD6FELta68a4qt6tywJQrVb34jg+dwvMzyrzbIyRXgD0mvcKIMX8FyJuaq3vJzqBNPMAsGWMqRdh3vWRaw64CUtEl8mY5zLrduhRN7m8AB0imuUy3q0z6t+MXABSylcAWPQWQCm1DgB1IprihChsCDnTSqlNALgloukuCBJC7GutLzjBBmnlGkKJ4ACIba31TREQfwJISwIRX4wxS14ApEA8WGtXvAFwRsMwXIui6BgRP4no0Fr76BVAEWbLA81/VXlsy+goQN4f6r2/Vsmy4YySaNI2i255tZj14DHpCfh9ve79A4f3T0xufHv9yJdngnJ9w7KMcpnJo1MC5Kka5zfeJ/ANYxl0QIJIi10AAAAASUVORK5CYII=);
}
.conversation .left-banner .item:hover .create-chat-text {
  color: #3478fc;
}
.conversation .left-banner .item:hover .create-chat-icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAO9JREFUaEPtmcENwjAMRePCGLBFGYJFmKFiANQZughD0C1gDGhQDpUqobSWIou6ej1bqf/3c+IoEpx/4jz/gIB/V5AKbLYC9TWeZRi6JDBW1aW/yd1CrBlCp+bzjCEeUtIS5PVod0dXAurmHacJ9+3exCyTRVPiCFDyRgVyRoEQCCkdAKFCo9iFQAiECh1YLULjPD+OxEY6F5dNo/jcfSK7C03n+cW/GAfM3Se2K8A9QqVUMI0qHWSUWO05oKxgNoweUDpID9ADSlRyYSAEQiBU6MBmEfL/wOH9icmIzJ9lzc4BBCgdoAJKo8zC3FfgC1n9sjG2Te1QAAAAAElFTkSuQmCC);
}
.conversation .left-banner .item:hover .exit-text {
  color: #ff4a50;
}
.conversation .left-banner .item:hover .exit-icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAhBJREFUaEPtmTFPFEEcxd87Ra2txGBCYmdjwRewMDHuesntYXN2EGNj73eAwg9gjB0aA9xecrdHQsUnMFrRQeGF66hPE3mGPTAn3MKw/G9hkr165s37zfvP7M0M4fmPnvtHCXDVCZYJHCegen0Gv7QM4QmgaZtk2Aexhdt8x2azN07TJIHU/EA/AN21MX5Shfu4w8fjIGwAwugzpMZkzB+pkl+YxK9OoVkMqiDasyubLEfssxvfnxBATaPC7LZskg3O1y1soDxJqwRwnDYF0U9AM8Pm7LEbP3Dsemaz4hKo1p7jDz+kbm7oDdutDa8ALMyO0ygsgRIgYwbMElBQa4B8D2mAys0Fdta2JjXro7omAAqjRUgfD7eX4SbDbSbxIy8ATpn3CSDD/G9QVXZam9c6gWzzlZfsrLeLMH84Rq41kC5YYOVfzZu5Ze+iH7l8AGHUh3TPzPd/Qhf7m5EPIKjtApj1FyCcfwYdtAFN2UIUVELp4nkxX4UO1iDdGoEQyNdM4k+2YNlquUroWC4TolJpsNP8WgTEpQAykyB3mMQPvQAYC0F+YxLPeQOQQoT1p4CWAA2gqbfsrn73CqAIs+WB5qpm+axxL70LuULJ90O9/9cqDjdormmaHyldBnapVRedk21cdMu70eHJyffrde8fOHx/YkrLyOdHvjw7jFUfk13IykwenRIgz6xZ9vE+gb+K819As+zCfQAAAABJRU5ErkJggg==);
}
.conversation .left-banner .item .text {
  font-size: 12px;
  font-weight: 500;
  color: #666666;
  line-height: 16px;
  text-align: center;
}
.conversation .left-banner .item .total {
  position: absolute;
  top: -16px;
  right: -14px;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-color: #FF4A50;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  border-radius: 50%;
  transform: scale(0.5);
  line-height: 40px;
  text-align: center;
}
.conversation .left-banner .item:last-child {
  margin-bottom: 0;
}
.conversation .conversation-content {
  padding: 8px 8px 0 8px;
  width: 280px;
  overflow-y: auto;
}
.conversation .conversation-content .conversation-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  width: 100%;
  height: 68px;
  border-radius: 5px;
}
.conversation .conversation-content .conversation-item.actived {
  background: linear-gradient(270deg, #64b0fe 0%, #3478fc 100%);
}
.conversation
  .conversation-content
  .conversation-item.actived
  .conversation-info
  .item-message
  .message-text {
  color: #fff;
}
.conversation
  .conversation-content
  .conversation-item.actived
  .conversation-info
  .info-top
  .item-name,
.conversation
  .conversation-content
  .conversation-item.actived
  .conversation-info
  .info-top
  .item-date {
  color: #fff;
}
.conversation .conversation-content .conversation-item:hover {
  cursor: pointer;
  background-color: #f2f2f2;
}
.conversation .conversation-content .conversation-item .head-portrait {
  position: relative;
  flex-shrink: 0;
  margin-right: 10px;
  text-align: center;
  width: 44px;
  height: 44px;
  line-height: 42px;
  border-radius: 8px;
  box-sizing: border-box;
}
.conversation .conversation-content .conversation-item .head-portrait img {
  width: 100%;
  height: 100%;
}
.conversation .conversation-content .conversation-item .head-portrait .group {
  width: 100%;
  height: 100%;
  background-image: url(data:image/png;base64,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);
  background-size: cover;
}
.conversation
  .conversation-content
  .conversation-item
  .head-portrait
  .unread-count {
  position: absolute;
  top: -18px;
  right: -16px;
  width: 40px;
  height: 40px;
  background-color: #FF4A50;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  border-radius: 50%;
  transform: scale(0.5);
  line-height: 40px;
  text-align: center;
}
.conversation .conversation-content .conversation-item .conversation-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 44px;
}
.conversation
  .conversation-content
  .conversation-item
  .conversation-info
  .info-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.conversation
  .conversation-content
  .conversation-item
  .conversation-info
  .info-top
  .item-name {
  max-width: 110px;
  font-size: 16px;
  font-weight: 500;
  color: #18191a;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation
  .conversation-content
  .conversation-item
  .conversation-info
  .info-top
  .item-date {
  font-size: 12px;
  font-weight: 400;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #b8b8b8;
  line-height: 17px;
}
.conversation
  .conversation-content
  .conversation-item
  .conversation-info
  .item-message {
  display: flex;
  align-items: center;
  margin-top: 4px;
}
.conversation
  .conversation-content
  .conversation-item
  .conversation-info
  .item-message
  .message-text {
  max-width: 160px;
  height: 18px;
  font-size: 12px;
  font-weight: 500;
  color: #b1b4bb;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation .default-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  color: #394256;
}
.conversation .default-content .text {
  line-height: 22px;
  text-align: center;
  white-space: pre-wrap;
}
.conversation .abnormal-content {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.conversation .abnormal-content .reload-btn {
  margin-top: 620px;
  width: 100px;
  height: 36px;
  line-height: 36px;
}

.conversation .err-icon {
  margin-right: 4px;
  width: 12px;
  height: 12px;
}

.chat {
  display: flex;
  flex-direction: column;
  width: 680px;
  height: 720px;
  background-color: #f2f2f2;
  border-radius: 0 0 8px 0;
}
.chat .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e6e6e6;
  width: 100%;
  height: 55px;
}
.chat .header .title {
  margin-left: 24px;
  font-size: 16px;
  font-weight: 500;
  color: #18191a;
  line-height: 56px;
}
.chat .header .more-icon {
  margin-right: 8px;
  width: 40px;
  height: 40px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAAXNSR0IArs4c6QAAAW5JREFUeF7t1bENwjAUBmG/hh1gBGcn1oCKggrWYKd4BNiB5iE6FKWJTo6IdNS+yPn0o0TxhwQC1cZFQDgCAQWEAjB3gQJCAZi7QAGhAMxdoIBQAOYuUEAoAHMXKCAUgLkLFBAKwNwFCggFYO4CBYQCMHeBAkIBmLtAAaEAzF2ggFAA5i5QQCgAcxcoIBSAuQsUEArA3AUKCAVg7gIFhAIwX22BtdZdRFwz8/i9c0Q8MvPSWntP36HXWWg1m68GOAzDLTNPv7eIiPs4jufpzXqd3TRgrfVZStlPXuLVWjvMLLDLWQEh9qYBe/0tlzx304C9PgxLnrtpwB6X/4dnrvYV/oeX7XEHAaGqgAJCAZi7QAGhAMxdoIBQAOYuUEAoAHMXKCAUgLkLFBAKwNwFCggFYO4CBYQCMHeBAkIBmLtAAaEAzF2ggFAA5i5QQCgAcxcoIBSAuQsUEArA3AUKCAVg7gIFhAIwd4ECQgGYfwCXBpZRA0dekwAAAABJRU5ErkJggg==);
  background-size: cover;
}
.chat .header .more-icon:hover {
  cursor: pointer;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAAXNSR0IArs4c6QAAAXVJREFUeF7t1TFKw2AAhuHEgngF3byDV3H1GtZFxMV6DVev0ju46RVEqBHcql3kIcXC2zlv+PPkKxmHfiQwUl08BIgjCDBAFMC8BQaIApi3wABRAPMWGCAKYN4CA0QBzFtggCiAeQsMEAUwb4EBogDmLTBAFMC8BQaIApi3wABRAPMWGCAKYN4CA0QBzFtggCiAeQsMEAUwb4EBogDmLTBAFMB8bwu8vJuOX94/74dxuPo+8zQ8nZ8c3T7fjR8/n2Gua9FqZ743wIvlZjUM0/X2KcbH9Wqx/Hmyua49bMCbzeswTadbDzGOb+uHxdkvwJmuDRCxDxuwv7C9v7k+DH+5rz3B7npvH5E5Dv8f7hkgvoUAA0QBzFtggCiAeQsMEAUwb4EBogDmLTBAFMC8BQaIApi3wABRAPMWGCAKYN4CA0QBzFtggCiAeQsMEAUwb4EBogDmLTBAFMC8BQaIApi3wABRAPMWGCAKYN4CA0QBzFsgAn4BWQ2KUS1/mnMAAAAASUVORK5CYII=);
}
.chat .message-content {
  flex-grow: 1;
  padding: 16px 12px 0 12px;
  height: 200px;
  overflow-y: scroll;
  position: relative;
}
.chat .message-content .message-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0 16px 0;
}
.chat .message-content .message-item .time-box {
  align-self: center;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 500;
  color: #b1b4bb;
}
.chat .message-content .message-item .message-box {
  display: flex;
}
.chat .message-content .multi-select {
  margin: 0 4px 0 12px;
  cursor: pointer;
}
.chat .message-content .multi-select .select-icon {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 2px solid #CBCCCC;
  border-radius: 50%;
}
.chat .message-content .multi-select .select-icon.selected {
  position: relative;
  background-color: #3478FC;
  border: 2px solid #3478FC;
}
.chat .message-content .multi-select .select-icon.selected::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 7px;
  width: 5px;
  height: 11px;
  background-color: transparent;
  border-radius: 1px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.chat .message-content .message-item .message-box .left-msg {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
.chat .message-content .message-item .message-box .right-msg {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
}
.chat .message-content .message-item .message-box .right-msg .msg-text {
  background-color: #3478fc;
  color: #fff;
}
.chat .message-content .message-item .message-box .right-msg .message-bubble {
  align-items: flex-end;
  word-break: break-all;
}
.chat .message-content .message-item .message-box .right-msg .err-icon {
  align-self: center;
}
.chat .message-content .message-item .message-box .right-msg .msg-audio {
  justify-content: flex-end;
  background-color: #3478fc;
  color: #fff;
}
.chat .message-content .message-item .message-box .right-msg .msg-audio:active {
  background-color: #175ce6;
}
.chat .message-content .message-item .message-box .right-msg .play-animation {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAoxJREFUWEftmU2ITlEYx39/HykbsbCzMpqRKNTIAknZKVZmyM7HBgtJFgoLSdJEKexYMLOxsLCShYWSjw1RiJXCwoKQlEdPndHxNGbuve97maM5y/Oee8/v/p//ec5zzisKayqMlyngtiPWFYXNbCOwUtLJSQ9sZjuBC8B04LikY21Cd6RwUvZmgh3lbBW6MbCZ9QL3gDlB0a/AKkmP21C6EbCZzU2wiwLUW2CTpAdtwPo7mwK7Z/eMoezaNmEbAScrPAFmBOBBScNRWTNze7h1utJqK2xm14EtYfYzkg7mfWY2EzgP7Opm9qgFbGargbsB9j3QI+lTAL6UYLuaPeoCXwF2BOC9klzJX83M9gHnxvDAYUmnOvFGZWAzc8+6mp4hRtsroE/S99EOM1sIPAPcEnnzzLFZ0pu/BbweuB0mOyHpSFDXF97WMWDXSfrSCaw/W0fhs8D+MGG/pPuZuksA3zDy934AlkVlzWyapB91P6AOsIe5L5vAQ7tAkmXAR4FYSxyQNBSisBS4DNyoW3tUAk7+9S03z71XJW0PII+A5VnfR2C+pG/ZRzmsR2VW6qtVe1QF9i34eQjfaUmHMpDZwOcwZljSYDbGKzqHzT/Kf64MXRW4P9UOOc9voU7Z4WUAjmNWAA//4NtK0FWBNwC3wkQDkkYy9dYAdyYYsxu4OM5CmxD6vwUuzhI9wIsGi25E0sC/WHSezmJauyZp26RMaw5lZk+BxUVsHAm4uK25uOLHffwOmJfZ4jXQOynLy2SLcgr4BFzWESlBl3MITcB+41POMT9Bl3ORkoDLuqrKrFHGZWBWzPhFdhnXrRl0ORfaQeky/jIY57jTyk+VjkitzNzwpVPADYWr/NhPbex2PHZa6pwAAAAASUVORK5CYII=);
}
.chat .message-content .message-item .message-box .right-msg .play-animation.playing {
  animation: whitePlaying 1s linear infinite;
}
@keyframes whitePlaying {
  0% {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAANlJREFUWEftltEJwkAQRGfNh9X4oUVZRyzDT1uwDUlLjgQSkAPPPZZcWJh8z8HjZW73DMk+S8YLAW/9x2RYhgsDqoQqoUps3QEZluG6Ac1hb0NIHszs7c2vuV0MkzwBeAB4mtnYAt0deIF9ATguoLcW6K7AJAcAM+y5sOqG7g18ATD9qIALujfwFcC90tm/0AKu3XiS6SqR69LN9lONtbUuqRbHF3Se1dyyists17EWAd318RMBl+GIPc9ZGfZYimRkOGLPc1aGPZYiGRmO2POclWGPpUgmneEPPAQ6LYCqezsAAAAASUVORK5CYII=);
  }
  50% {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAYlJREFUWEftl71KBDEURs+niOAD+AKWoqCNlfgKdq4PoJ2NlZ1aWgmChXZ2u62PYCf+NBY2trYWgoKNVwayEMPqzJCMbDAp8zNzcnJzk4jMijLjpQB3vWLFcDEcGCghUULir0PCzFYkXacy31kMm9kUcApsAYeSDlJAdwl87mCHnEmgOwE2sx3gZITRPUlHMaaTA5vZHPAIVCHhl1tgXdLzuAH3gY0RsGuS3mNgq7FJDZvZPPAQfPcFWAzNmtmEpM+2E0gNvA+E2WBX0rEPZmYLwAVw2TZ7pAa+B5Y8uFdgVtLHsM7B3gDTrq5V9kgGbGYzwFuwxH1Jmx7sJFDB+pOqmhtDpwSussNTAPwtHMxsGbj7IW4bQacEXgWuApiepIFneBs4+2Wj1UL/a+DsQmLUphtI6o3lpqugzCyftOaAszs48jqaneV8Lj8OOK/rpYPO5wLvpbB8nkjOcl6PUM90Hs/8ti+Jpv2TXX6a/jC2XwGONVg3vhiuMxTbXgzHGqwbXwzXGYpt/wJES7gtFDMa3QAAAABJRU5ErkJggg==);
  }
  100% {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAoxJREFUWEftmU2ITlEYx39/HykbsbCzMpqRKNTIAknZKVZmyM7HBgtJFgoLSdJEKexYMLOxsLCShYWSjw1RiJXCwoKQlEdPndHxNGbuve97maM5y/Oee8/v/p//ec5zzisKayqMlyngtiPWFYXNbCOwUtLJSQ9sZjuBC8B04LikY21Cd6RwUvZmgh3lbBW6MbCZ9QL3gDlB0a/AKkmP21C6EbCZzU2wiwLUW2CTpAdtwPo7mwK7Z/eMoezaNmEbAScrPAFmBOBBScNRWTNze7h1utJqK2xm14EtYfYzkg7mfWY2EzgP7Opm9qgFbGargbsB9j3QI+lTAL6UYLuaPeoCXwF2BOC9klzJX83M9gHnxvDAYUmnOvFGZWAzc8+6mp4hRtsroE/S99EOM1sIPAPcEnnzzLFZ0pu/BbweuB0mOyHpSFDXF97WMWDXSfrSCaw/W0fhs8D+MGG/pPuZuksA3zDy934AlkVlzWyapB91P6AOsIe5L5vAQ7tAkmXAR4FYSxyQNBSisBS4DNyoW3tUAk7+9S03z71XJW0PII+A5VnfR2C+pG/ZRzmsR2VW6qtVe1QF9i34eQjfaUmHMpDZwOcwZljSYDbGKzqHzT/Kf64MXRW4P9UOOc9voU7Z4WUAjmNWAA//4NtK0FWBNwC3wkQDkkYy9dYAdyYYsxu4OM5CmxD6vwUuzhI9wIsGi25E0sC/WHSezmJauyZp26RMaw5lZk+BxUVsHAm4uK25uOLHffwOmJfZ4jXQOynLy2SLcgr4BFzWESlBl3MITcB+41POMT9Bl3ORkoDLuqrKrFHGZWBWzPhFdhnXrRl0ORfaQeky/jIY57jTyk+VjkitzNzwpVPADYWr/NhPbex2PHZa6pwAAAAASUVORK5CYII=);
  }
}
.chat .message-content .message-item .message-box .right-msg .loading {
  margin-right: 8px;
  background-image: url(data:image/png;base64,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);
  background-size: cover;
  width: 18px;
  height: 18px;
  animation: turn 1s linear infinite;
  align-self: center;
}
@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
.chat .message-content .message-item .message-box .center-msg {
  display: flex;
  justify-content: center;
  width: 100%;
}
.chat .message-content .message-item .head-portrait {
  flex-shrink: 0;
  text-align: center;
  margin: 0 12px;
  width: 36px;
  height: 36px;
  line-height: 34px;
  border-radius: 8px;
}
.chat .message-content .message-item .head-portrait img {
  width: 100%;
  height: 100%;
}
.chat .message-content .message-item .message-bubble {
  position: relative;
  display: flex;
  flex-direction: column;
}
.chat .message-content .message-item .message-bubble .send-name {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #394256;
}
.chat .message-content .message-item .msg-text {
  padding: 11px 12px;
  max-width: 320px;
  background-color: #fff;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 400;
  color: #2a2a2a;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat .send-box {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e6e6e6;
  width: 100%;
  height: 155px;
}
.chat .send-box .tool-box {
  display: flex;
  box-sizing: border-box;
  padding: 8px 16px;
  height: 49px;
}
.chat .send-box .tool-box .expression {
  position: relative;
  width: 34px;
  height: 34px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAACR5JREFUaEPtWW1wVGcVfs69u0s+KLtI7VdiUIvFYrUwWKwDg7Q4VkaFKgb8IS2IEyDMZu8laQrWyo62QgOb9242fJg69aM62gmtSivUtipYp0Kt06lUK7ZF0yZB+iGpYWOye+89zsEbTJa7mw2Efjg9fxhy9773fc553nOec17CW9zoLb5/vA1gaASrq6v1yZMnl6TT6RAzBzVN0+S567puaWmprev6QEdHR397e7szVpE/6wjE4/FAb2/vZa7rXsXMVwB4LzNfQkQTAZR6G/03gB5m7iai54nozwCeCIfDz8TjcftswJwVAMMwLgewkZlnEdH5AMoBnPR6AXMB9AF4BcBBx3E2pVKpp84UxKgBxONxraenp4qIapnZBBCQjzMzE5Fs7ASAfiJ6mZmPyzOJBjMLQInIeGYuI6LBb9tEtJ2ZVVdX14ujpdeoAJimWcrMqwCsFap43hZ6/AHA48z8uK7rT544caKzra1NwJwyeRdAheu6M4nowwCuAjBLQHngnwdwJxGllFKyZlFWNIC1a9dOCgaDW5l5CRGVeZ7tYOYNtm3vP3bs2Cvt7e2ZYr5aU1MTDIfDk7LZ7DVEFGfmy4acld3ZbHbttm3bXi1mraIArF69+oKSkpJvAVgoTJEDqWnaDgC3jcZbfhuSyLiuexMAA0CEiBjAbsdxoqlUqnMkECMC8Dz/bQCLhM4AniWim9Lp9J62trbsSB8o5rmk38rKyk8z820AJJMJiD2O46xIpVIvF1qjIACP89sB3ODxXbi+LBKJHI7H45JNxswkORw/fvx9RPQ9AB+R8gHg3kgkckM8Hu/P96G8ALxsU8fMt8tBI6LnJAqWZT0zZrv2Waiurq5K07RHmHkKEcmZWt/V1ZXKl53yAjAM490AHgYwRdKhpmkrwuHw/WPteR8MZJrmQtd1dxLRRQCe03V9USKRkOJ3muUFYJpmEzPXC3WI6JvpdDo+VpwfKYKSpcrLy29m5m8IlTRN29bc3FxXNACvwv5RihQRdQC4PDfbCMV6e3vnO46zmYgqmfnBUCh0S1NTU8HM0djYWDkwMPA1TdMWMXOnpNHOzs49uRTx6sbTzCz1xg4EAjO2bt36dC6I0yIg2qanp+cHAJYCkIKy0rKsH+W+GIvFFgK4h4hKvGdy6O4jolVKqX/6eau2tnZ8KBT6DoDPDUoOIupn5mWWZe3y+wYR/dir4D+PRCLX52qn0wDU19dPs237ASJ6D4Df2ra9tLW1tTt3ccMwfiZ1Iefvr+q6PieRSPwlT86vYGbRPZOGPieiXyulrs19Z/369RP7+/t3A5gD4Jiu69fmnoXTAJimeSMzp5h5PBGJPtngV2ENw3gAwKdyNnKcmWfny1SmaVYAOMTMolRPGRE9qpSamwtg3rx5genTp98hmksiRURrlFKSZv/37tD/SEGpqKjYDGCd0IeZVyaTyXv8vPl6UEi+G4vFlhLRTmYOE1Gir6/vK0OTybAINDQ0lNu2/X2Po8c0TZvb3Nz8Vz8A4p0ZM2Z8xpPTlwD4FRF9VSkl9SKvmaY5xXXdW4loAREJNTeHw+Fd+fqCdevWSa+x1xOP9w0MDHx5x44dJ1Wu2DAAa9asmRgKhfYQ0dUAOvr6+qblqspCmzsXz2pqasrKysp+B+BDzHzAcZzFQ8/kMACeaPsNgKlE9IRSSiTvG26GYfwSgBzyw7ZtL2htbf2bbwRqa2svCoVCBwFUSRW2LOsTb/juRaYaxr0erV8govlDaTosAm9WAKZp7mLmxQAKAyiWQtFodJzkZADvGosIEdFR27YfSqVSA37rFU0h0zTfwcx7PDn7dyKa5tewGIaxgJm3AbhwjABI5a6xLEuyzTDzJL0c4itlCEBEi5VSXb5nQNJoNpu9m4g+K5WPiOb4pUXDMJYBEADnMbNDRGc0GmFm0Vq6J1lWWZZ1tw8AUcMPAriUmX+SyWRW5k2jxRayWCx2HRFJvbiAiB5jZtErvuHPFyEiCjDzFwF8FMBrzLw0mUz+Ivf3oypk8rJpmiuYuYWZyzVN25pOp2/JldHRaLRS13VJbdKMP+W67sKWlpYXRkOnmpqa88vKyh7xqHHUcZxZuT2w12puElnPzBlN02qVUiIGT5mfFvogM4uAkoZmfzAY/MKWLVv+kbs5wzB2ApARi9imSCQSj8fjRU0lqqurQxUVFTcD+Lq8rGnaD5ubmyUaw8wwjAiAnwL4GICXiOjjSqlDBQEUK6e9KIgHpwLIEpFELWFZ1tFCkTAM42IAUQANAILScbmuO98vgqK3Ri2n5eOGYUwH8HuvoREtNN0vG9XX1891HKddzgIA8f5jRNSslLrfD0R9ff11juOs93g/zvPqjUopOaTDbPny5SXhcPhJInq/NDS6rl+dSCRkqDDMCrWUSdd1ozICZOaN3d3dt/s01mQYxgqZDwEQz540b4j7MDMf8eY8lwK4xqvwgz97CcCGSCTy3dw+20sm0s6KlGZN0+5USg3StTgAxTb1MuiKxWKz5YAx8ye9qXReFsmAgIiEetuVUvs9gMNoPSZN/RAvyOivhIj+xMyfTyaTh/12F41GJwQCgSuZ+Xqv0ZEMNRhhGVTJ7HMvEbUz8yHLsnr81pGeOZPJ7GXmDxCRDM5u7evrU/kGCgUHW56UvQtAtdfDHnRdd0lLS8uL3vQsr6cbGxvPs2374kAgIN/obmpq6i10uAVsY2NjRSaTkZoyW6YRRCSqYEmh8eX/92hx0GNeypS8LxpIQEu3JlIicbbDXck2kUhEJoBy13ChdyZEE9VZlnVkhKgVf8kXjUbfqeu6bFomEZIC5eLiiOu6Zmlp6aMHDhzo3bdvX1GayDtfoqOkkb/DS5WyZIaIHrJt+0sjDXUHgY1IoaEeGKsLDk3TZsq11Ot6wTEIRLxXVVU1lZlXu667JueK6TUAIo3lmknuwHr+W0ZOjlFkFjTe+3fCkLs0uWK6S9O0ZG9v77OjHV+OKgK5fGxoaLjCcRwpNjMBTPDSbcE1BY0oVyL6l1R7Xdc3+lXYkbh/RhTyW/Qtfc2aC0imyrquj9d1XS70xgWDQWlWkM1mnWAwmOnv7+9zHOfEaGlSKBpnRaFiw3wuf/c2gHPp3WLW/g+RXrBtgcQ2+QAAAABJRU5ErkJggg==);
  background-size: cover;
  cursor: pointer;
}
.chat .send-box .tool-box .expression:hover {
  background-image: url(data:image/png;base64,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);
}
.chat .send-box .tool-box .expression .expression-content {
  z-index: 4;
  position: absolute;
  left: 0;
  bottom: 44px;
  /* transform: translateX(-50%); */
}
.chat .send-box .image-file {
  margin-left: 16px;
  width: 34px;
  height: 34px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABXRJREFUeF7tml1oHFUUx8+5m8V+yRbET7QhkWIVQahVSB5sBVERH+qDKW39QFAsqMncSZqiSXW0GiRb9k60oGgVFFprlOKLoC8aoSYUKn5UFPFFKm2s7UMWtdZsdv5y05lys2x2J2Zndu3sPO3HnXvP/3fPPffcD6aEP5xw/dQE0PSAhBNoDoGEO0AzCDaHQNgh4DjOsnw+vxHAXUS0ioguDvtuTOX+IKJjzPxpJpP5yHGcM2HaDeUBUsouAIqIrgpTaQOUOcHMUik1Ws2WqgCklIMAdlWrqBH/Z+adSqkXK9lWEYDf8++XVsDMRSI622CilwBIlbF1UyVPmBeAHvNTU1M/m24P4JQQ4n6l1BcNJn7WHCnles/zPmDmSw37TqxcuXL1fDFhXgBSyi0A9gUVafEjIyOXNaLwUpt6enp+NyEw81al1P5yts8LwLKsd4jooeAlZt7QqD1fKkx7AoAx4/d3Xdd9eKEAPieiDfolPeaVUi3/h94PbJRSzhgxYcx13dsXCuAIEd3sA/hLKbViPgC2bd8E4FEAN/rlv2fmvblc7tt6QZNS/glgud/+V67rrqs5AMdxWvL5/E4iegbAHA9h5hkiGspkMrscx9GfY31iASClfB7AsxXnWeYXlFLPxar+3IwQrQf4bn/E7HlmntRCAVxpBM8ZZl4X93CIHICU8lUATwZChRCDuVzuJf3dtu0Bz/POZ2DMvEcp9VScXhAHgDEA6/2gN6mUmrNOkFKeMDxh3igcFZTIAViWZU6T5QBMArjCF3jhAUj8EKgQBNnoeZ1EXZhBULt2nNOg4zhCt+k4jhcmbkQeA3xjap4ISSmXEpHO5W8honXMfC0RXQ7gknNZOXsAzjLzMSL6hYh+AnAonU4fymazvxmpcLR5gNkLi02FAbBt2/cCeJCZ7zFS2DCdbZb5TgixP51Ovzc9Pf1D5KnwQq0rLa/dOp/P61VaP4A1i63PeB9EpIdKsEESzVpgMQZblrWWmV8DcGuFevTG5lEiOk5EejNmGsBFRLQCQJseHgDC7FE0FgDbti0A2dIFlA/iMBEdZOaPM5nMj9WC3o4dO1YVCoXbANwJ4D4NpwzQxgDgrx7f1mO91Ehm/jKVSg3u3r3b3MhYkJPpACqE2Oh5ng3AXP7WH8Do6GhqfHxcb7FtKlH1DTM/rZT6ZEFqqxSWUv4NYIlfrP4ALMt6nYgeN+1m5g/b2toe6O7u/qeW4v0cpbbTYCqV0nPxGgBpz/OmhRCncrncr2EM7+3t3VwsFudsSjLzK5lMRlYb42HqL1empokQAE8Iodf5s9mY8ZwkosOpVOpAa2vrwXI92d/ff3WhUNBz8vmjNGYeUEoN/VdxYd6rKYAwDTLzaQB72tvbXzZBSCl10HskqIOZDyilNoepczFlYgdgGKsPU7a5rvtZb2/vDZ7nHQ08R+8YpdPp64aHh/VBZqRPrQFACPEWAL3Le5qIlgNYzcydADqNjGtWlM7XiegJIroeQLeh9DHXdfdGqtyvvNYAzriuG2wxz7Hftu1rAGwDYBHRshJxOpOb/Y2Zj3d0dLR2dXXpc8XIn5oCYOaK5wJaTV9fX1uxWHwDwB3l1DHzkFJqIHLlUXhAGAC6XZ3sTExMvGkGvUCwEGJtLpf7+oIGEIiTUu4DsMUQW+js7Fwal/vrdmMfAmbPOo6zYmpqSp8RBAuTk67rBhuksThBXQFohdu3b797ZmZm9ni9paVlazabrWmuX41i3QFUMzDq/2sBIPHH48m+IJH4KzKJvyTlz6X6gmQyr8kZSU1yL0oaEJJ7VTaAkOjL0lEnLfWsv+pl6XoaF0fbTQBxUG7kNpoe0Mi9E4dtTQ+Ig3Ijt5F4D/gXIgz8bhW28fEAAAAASUVORK5CYII=);
  background-size: cover;
  cursor: pointer;
}
 .chat .send-box .video-file {
  margin-left: 16px;
  width: 34px;
  height: 34px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABABJREFUeF7tmlFoFEcYx79vkysxNey+VESh5KF99aU+NFCoBatvIqInrdD6qFDJTjaYliodTEgkye1sVOiLUNpSSytUS/HBh1K1FFqolL62WEofAtYKd0SlBHf/ZcotDMddcns5Ze525/EyM/n+v/nm229mPqacN865fioAFB6QcwLFFsi5AxRBsNgC7W4BKeVwrVbbD2AvET1PRCPtjn1K/VaI6C9mvu667lUp5aN2/m9bHiCEKANQRLStnUkt6LPMzEIp9eV6tqwLQAhxCsD0ehPZ+HdmPq2UmlnLtjUB1Ff+i8YJmDkmon8tEz0EYKCJrYfX8oSWAPSer1arv5tuD+Ce4ziHlFI3LRP/vzlCiFeTJLnMzM8Z9i17nvdiq5jQEoAQ4k0An6UTafFLS0tbbBTeaNP4+PjfJgRmPqKUutTM9pYAfN//mIjeSgcx8y5bV75RmPYEADeM3z+JoujtrAC+I6JdepDe80qpwV5Y/dRGIcRjIybciKLotawAfiail+oAHiqlNvcYgAcAnq3bfDuKop0FgCYE1ooBhQcUW6CIAd0LgjqxWllZGR0ZGflDSvnEs0ghhD1BUAghiOgsgGeY+R8iOqmU+uhJflWsARAEwStxHH/fJEe/VCqVjs3Pz+tjbNebNQB839ensfdbKLwzMDBwuFKp3O42AWsACCHOA3innlB9DUCfJ8aMFHuViN4NwzBiZnQLhK0ALriuK6rV6hktWmfZBohrjuMcrVQqOkZsuFkLQCl1QqvzfX83M38KYKuhdnlwcPDI4uKieZDpCIb1ALSqycnJLXEcawh7DE9IiGhmbGzsTLlc1hcvHbWeAKCVAeAgCE4CmAFgnjhvDQ8Pl2dnZ+92QqBnAKTiJiYmXk6S5HMiGjW84VfXdXdKKR9nhdBzALTAqakpd3V19SKAg6lgx3F2h2H4bS4A1GPCBwCOp18IZt6nlPqmrwEIITbpO039aQRgPrjc9zxvVEr5oC8BSCmdWq2m7+qmAWxvEPmn4zgHwjD8Jat43d/6GCCE2ANggYh2NAisEtGc53nnNnJqtBYAM19MkkQLf90Uzsw6Jf5waGhoem5u7n4nq26OsQlACEDvb93u6vt6AE6DwMulUum9hYWFOxsVno63BkAQBG/Ecdz8UYL5B2aeDMPwx24Jtw5A/YntVnq/qA1k5t90xFdKXem2cOsA1CPyJmY+miTJC8z8k+u6X3WS3WWBZc0WyGJ0N/sWAGy6FO3myrY7V+EBhQds/F0g98/j+S6QyH2JTO6LpOoZnC6QzGeZnJFT57dQ0oCQ31LZFEKui6XbTT97sd+6xdK9KCqLzQWALLT6sW/hAf24qlk0FR6QhVY/9s29B/wHelx6bjkAPe8AAAAASUVORK5CYII=);
  background-size: cover;
  cursor: pointer;
}
.chat .send-box .other-file {
  margin-left: 16px;
  width: 34px;
  height: 34px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABINJREFUaEPtmdtrXFUUxr91Lo2ZVh0opUYQ7YOgFSteQBIKVulDH6r4khcrChWCMBlzZhhEodJBqw9mnDnDTC4N9A+QVJHagGj1qVqp1kIVixcQIbVWRMMkTaZnzjmfbHqUZDLJ3NMEZ72etdd8v732XnvvNYINbrLB9aMDcKMz2MnAhslANBrt6u7u3uQ4jr6S6EKh4M3Ozs5PTk56awVWdQlFIpE7TdPcT/JhAD0i0r2COAK4CuCiiLybyWS+XguI1QDEsqx9JN8UkXsArCS8XKdP8kdd119Ip9NftBtiRYB4PP6g7/tTatZJUkSKAGYBlCqJuu4imwHcDEAj+ZGIHLRt+3I7ISoCDA0Nbdc07TOSO5V4TdPOkBwnedY0zb8rCSqVSgrgfgA2gPsAeCJydHp6+qV27omKALFY7BDJNwKh37iu+2Q+n/+tlpmMRqMPaJr2lYiYAK6RfDWbzWZqGduIzzIAVW0MwzhN8hEA8yR7s9nshXqCW5Z1AMAxAF0kC7quRxzH+ZykXy2O8gmFQtcKhcLcxMTEfDX/ZQBB1fkEwN0Aznme93Qul5uuFmjx91gspjZ8juTzAAwAqkJVFR/EUHtNZfs8gA8MwziRSqVUdatoywAsy7qX5JSI7CD5qWmaz6RSqT/qAVC+0Wh0m2EYx0juBxq+c80AOOo4zpHR0dG5ShoqLaGdmqadVAAAThWLxQPj4+N1A/z7Y4lE4gnXdV8EsFXt8moTQVJVstsB3BZkz9M0LZFOp1VxWGZtB6gmuNL3eDx+h+/7zwE4DEAVg6ue5+3N5XJflvuvSwAlsr+/X+/p6TkkIoeDzB23bbt/wwAooZZlqavLOZLqMJ12HGfX2NjYknNo3WYgAAgD+BDAbgBXRGR3JpP5eXEW1jVANBq9Rdf19wDsBaAKyR7bti82DTA4OLhD1/WXg0rVyD4tH3PJdd0j+Xz+l8UfygE8z3s8l8t93zSAZVkJAG8FFaJpAJLq3vSKbduptQLoVSctAHVWtMLUyTtg2/aZNQFoheJaYrRtCdXy463w6QC04i7UTCY6GehkoJn1c/1NseQkbtlB1qSumof/PwEWPynVHjAM40AjT8qap3kVx4GBgVtDodDxui5zrXjUt0K8ihGJRLaapvkxgIcAXC6VSr0jIyO/rnqZSyaTN83MzJwGoHqhc67r9uXz+W9bJaqeOMFkfgdgC4CfwuHwrmQyqboW/1nFR3Y8Hn/d9/3XlJeInC0Wi/vKX0L1CGnE17KssIhMkexT40m+k81m1S14idXVWtR1XXXc/mpEUK1jfN8P+77/KICDJB8L3sM/mKa5Z3h4+PeaAJRTPB7v833/fQDbg+buHMk/VbuwVjGN+InIJgDbSG4JxF8B8Kxt26cqxVu1vR6LxZ4i+TaAuwCowGtpDslLmqbFMpnMiaC7t+z3qzaa6viDoyVwJBdUxRGR867rnix/Zta8hModE4nEZpLdCwsLqtfZNtN13evq6ppPpVKqsat6qqta1QxUC3Cjv3cAOhlocgY6S6jJCWx6+D8qfM1Pw52PSwAAAABJRU5ErkJggg==);
  background-size: cover;
  cursor: pointer;
}
.chat .send-box .image-file:hover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABYBJREFUeF7tmm2IVFUYx///c6+tb0EkZkpZEpJFEG0zYxnkBlGRBfZBRc0kKBIq0aCc2V1zatedAaGghKJMKNBMQ4KQ6kttoJA7U2aGEX4RQzdd+xDq5qxzzhN3dmb37svs3G3nzkzeuZ/25dzzPP/fec5zn/NCBPxhwPWjDqAeAQEnUJ8CAQ+AehKsTwGvU+DJuEw926eXGsNHAZkL4Fqv71ao3QWAp5SSb2ZdY33xZZy9Xux6ioBwc3a5GL4NyBwvnVa/Dc9QycZUh723lC8lAYRjulVE2kp1VIv/J7k5lbDax/JtTAD9I4/PRnZADeByjYmeDIg13CcqrBgrEooCcOZ892VzYljY91Bby1Lb+H2Nic+5E35VFoul9wGYOegfz8yerOYXywlFAUSas6uMwS6X0J500r6hFoUP9ykUzZ5zQ1AKq7s67N2j+V4UQCiqPwbkmcJL1FZTrY78cGH5SOh0RcEn6aS1dpwAst8BaOp/iTqdtOz/w+gXfAxFddaVEzrTSfuh8QJIA7g3D+BSOmlNLwYgslnuNlnzHETu6ufFX5WtdnS18Wi1oIWi+iIg0/L2f0wn7VDZATTFxb6UMZsBNIvIkAghmQXQMa1BtXXGcz9X9KkIgHBMvyEir4+ljOSbqYS1paLqAfgOwAl7yZr0kJEnu3NCRWYPJE8yS1uFKj0dfAcQiul3IfJSQagCW7uS1lbn90hUtxjIYAVGbk8nrJcrGQW+AwjHsp0iWJxPet3phDVknRCK6TOuSCiahf2C4juAUNT1mSRHAAhHdbdAbswLvAoBBH0KFEuCFNA18nA+h1dlEnRCu5KfwXhclGMzHqfxkjd8zwGOE34UQve/JVOy55zkasKghCC8TYBZAGYAQjAHwFmKnyLkJIS/K6qDpgEHU3H+6SqF/a8EC8YmWgqLCCOteAJarxHwcVcJ62WwB9uQvyjB7kkN6tNMxhz3vRQen3cjWzthfSCj1wr4GkQWTLQ/FwmBGAOysEHiz1pgIg7f1yyNWdHvQRAp2g+djU05RuC0gD0A+ihoADEdkHn900O87FHUFoBQTG8gsG34Aqq/qMJhBe4XWx1YYuG3UknvgS0yt++KfpDCRwzwFERGW7XWBgAnafZmzE4jsmbEqBOHbMtq/aGdro2M8cWYk0D1Ob1UiFdE4F7+Vh/Asr1inTxidonICrcskj9DVCyV5Nfjkzt26/Am/Y9QJudbVR9AKKbfh8gLQ9wmPp8523r6q/XMlFO801fZ64DrZ6hZf/+FBbAwiYI+TfSktvIPL45HotmVBhiyKUnynSUNamOpOe6l/9HalBkAnE+Ks87PVWOFh+RZQA5TsGfGHGv/aCO5MC43mcvmuEAGj9LIlnTC6viv4ry8V24AHmzyPIDtM+eopBtEOKZ3isizLmh7UglrpYcOJ9SkCgD6/SV4grZa19XObxfG5E4Nc2wgcsjuhuvU7Yc28cKE1Hl4uawARCCK/IjAUaPkvBJMM8L5pCyCcJEMP5IijRK8KMQdIrK+4K9SeL6rw97hwf8JNykrAAK9qaRd2GIe4ly4RW6mMesMsAEiU4dmefYW/kby9K33qFv2Lc+dK/r+lBUAwDHPBRw1kVaZJ1n9gQAPj6ZOkR1dCavFd+V5AxUH4NjNFzsfupPegOBJVmO6jUeuagAFceGYdiq+Va4P5pV5jWpKpcLfsVuVCCgIborL9IsZ0z2wMCHOphN2YYO0IkFQVQCOwsZWeczSJne8ri21+qf28tb6pShWHUApB/3+fzkABP14POAXJAJ/RSbwl6ScJBXoa3Kuoia4FyUHIAT5qmwBQqAvS/tdtFSz/5KXpavpXCVs1wFUgnIt26hHQC2PTiV8q0dAJSjXso3AR8C/nxGkbo/M8SUAAAAASUVORK5CYII=);
}
.chat .send-box .video-file:hover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABCZJREFUeF7tmktoXFUYx///c24yQSNZiPWx6EJ0ISL4mEmpgtYXxYLgplXqoztxIYjFykzS2BvzutCCj64KbqyP+tgIdaHQYlzUtJ1JLXRZoVCkQSNaH9W2ued8cpNMezOZyWOcZM54713O3HvO9/+d7/vOd+79iIRfTLh+pABSD0g4gTQEEu4AaRJMQ2CpIfCkL9f8dNk8ZS03ArIWwHVLfXaV7vsT4Fml5Osb2/UXB33+vZR5l+QBuZ5wi1i+BcgtSxm0+ffwHJW8Whz2PlvMlkUB5Apmp4gMLDaQi/+T7CuO6MGFbFsQwMzK49P5A9AAuOiY6A5AdKVNVHh6IU+oCSCK+YmL9nSF20/S6M3F3fzWMfHT5uR2yEOizecAbrhqH8/d3KFur5UTagLo7gm3WouPYkInS4G3xkXhlTZl8+HPcQhK4dnjw97H1WyvCSCbN+8D8kL5IRq9wdWVrxQ26wmjMS/YXwr0tmUCCL8BsGHmIZpSoL1WWP2yjdm8CWM5YbQUeA8vF0AJwH2zAC6UAt3ZYgD+AuTaWZvHS4GXTQFUIbBADghTD0hDIM0BjUmCIsLuHjxImNusp0+UBvj9SifUbN64kQSfeFcykxPmIASPX6kpyE+6utRLh/L8faVAOAOgO296LWTegYTkGU+pZ8aGeHwlIDgDIJcPDwvwSHWRnIJCb3FI7SEpjQThDIBswYxD5N7pepL8VQQakK64WBJftWX0tu98RjV8Qy53AOTj9QTGlac3W2MOQLBujlJyglTPF4d5uBEEnAUQlaQv7pO2k2fskAVeA+RqMUZaECOd7cof9Rn+FxBOAygL6+6RjWLtfoHMPWYTRzLteuuRfp6tF0JLAIjE5Xy5CZfMhyJ4dE5eAH8TqC2lgIfqgdAyACJxvi/qy0s2T6BfRGLHbl5og7p7LOAPy4XQUgDK4nK9cr8Ye2D2tfv0zyR3FUf0m60LILYNAqh5Lo8ErivIJiN2DyB3xKrGoDiiC60LoGIbrPZiItsn9zA0uyvzQCRaa73+2BCP/i8BPLBL1k5dtoNW8Nyc7XDG9y2J7cVh/c5yxUf3O50DHguk6/x5WyDxioh0VAqMKkPP06+PDfBUPeIdBsBTJN4D8IaIXD9fOE+KqB31bn3x8dzxgEJ4dF7ZW6Gc4I+k7NyU0R/4Pm29q+4oALMXIi9XE0XyDwgCb416e2w7/2mE8PIYznhArk/uxJQdE0jsczqnQOzrzKj+UZ+/NFK4cwAig9b3yV1haPMQuVXIotZq77FBnl4J4U4CWEmhtcZ2JgSaId6pbTAF0CQCaQg04LtA0j+PJ7xBIvEtMolvkoqSd6Lb5Mq7V6IbJa9ASHKrbBlCopulm1TMrcq0izZLr4oVTZwkBdBE+E5MnXqAE8vQRCNSD2gifCemTrwH/AuE7BJu5eJtyAAAAABJRU5ErkJggg==);
}
.chat .send-box .other-file:hover {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABIBJREFUaEPtme2L1FUUx7/fe2dmd1qrBREzCJMKympzH1xZEbLwhUFFb+xFRoFBBLGVtbi7qbiUtg9tJAiRgX9AZBGmEGXRC83cR1hDsQIJfEiRElt35+neb8yMwa47uzM7D6sL83v7O/fc7+eeM+d3zxlinj+c5/pRBrjZESxHYN5E4P5mVdgwQuEYbGbRVzAeqnanz2AMX9DNFVjWFKrdqqU24Z8GVA9iCYDwNOIE4BqlUwwEPu/bxYG5gJgBQGxodetB7QL44AzCJ+kU4An+RplX+rv5c6khpgVoaFMt4A4BWCJBJCIS/gUZzyhKIokqAbcTMAC+VSS6aXB31YVSQmQEeORNLa4I+x8JLQcoSMdg8Cmc7Yvdhn8yCfIxsNLjUcDvBvQwBEdib3+dfQPPl+43kRGgvtVtI/V+UqjIIe/MM8M9PJ/LSTZu12M+5vpBBCVESbYPdNmPc1mbj80UgKeaVXF5gTsioQHEmI+7pqHeipHZOK9r00bC7yNUAeAqhdejzh61gs/mJ6BxHzXhaPAqRgc/41g2+ykAyapjnP+e0AMABq23zx3v4dlsjia+b9qscDzk94B6GUAglYbILj7tQxFJ5wEOk/g6lrAHR