html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
* {
  box-sizing: border-box;
}



.bar {
  width: 100%;
  height: 32px;
  background-color: #f2f3f7;
  padding: 0 15%;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999999;
  justify-content: space-between;
}
.bar .left {
  display: flex;
}
.bar .left .relative {
  position: relative;
}
.bar .left .loginOut {
  margin-left: 5px;
  margin-right: 20px;
}
.bar .left .selectDisplay {
  cursor: pointer;
  color: #666666;
}
.bar .left .mr10 {
  margin-right: 10px;
}
.bar .left .mr20 {
  margin-right: 20px;
}
.bar .left .ml20 {
  margin-left: 20px;
}
.bar .left .light:hover {
  color: #ee7800;
}
.bar .left .selectAction {
  cursor: pointer;
  color: #ee7800;
}
.bar .left .address {
  margin-left: 20px;
  margin-right: 5px;
  width: 170px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bar .right {
  display: flex;
}
.bar .right .cartCount {
  color: #ff2200;
}
.bar .right .vertical {
  color: #e1e1e1;
  margin: 0 10px;
}
.bar .right .cartIcon {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAEEfUpiAAAAAXNSR0IArs4c6QAAAn9JREFUWAnNVr1rFEEU/83eRUIg0Q0RIYW1iIidhaWgnWUC9oE0Wt9dtVVy8Q9IYyVoodimEgJiZyMWaQKaNojcGT/ikXA3vrdmhje7szt7lzvPhWV+8z5+7828+QIyn+J+pwFt5JEBps0JjMK2LofCU9dFY80R1ICHqa8Ma8nOQMrJuMjIocx6c98aKIWDeg13FttQ/Ju+z8mVdRs4KYrPlu7AXV9wKJtDRme7YzKIlzFrOYtAdiSmn45Cb2H+1xHm9AXo+QRfikiCcsMaNBQGttgsG5ag0jyLYF4YrIPXSwhdAoVjoRsd6qS8rlLvZkAxvzWw3u3hNxnVfSmE9D6fsOxnC1f4D1vmLaJuEw9OBjjkf9h14NB1Wrg5CkFuoqqS8CrkDHJVcNIq6XSaeHkuAgp/7VwEJrmRh/AfEsS3sGfSqtRqvGc7OwdqBX26MJ5Vclb4Hrex5rXV+u8C8SpJGNKn52LZamSd1OeWMg1jQIHeFmUQ0hf5TUyebig+Euh18poeKDMyEil3abLvStm4cZoAk5rbkfEpcF0PsMvY7HrGk/hsApKczzaq5EeWUc3eSN0omGaWX3+faH3uLG5gR3IEE5DG48JRhNVLG3jFfHYjjou8Cg/txaaxm0oCcuDTSsBMwHRKYKPLqZDCf4m9Jahr9CachOX3JrCwiX3as08mkQTt+1N6Na4bbu85YJTc/mjhRl/jNsFYyofBWtFBpPC5NoN3Cwm+St/cbSaVjPsDLNMx1iYYE8l2vInHWZuyPr2G71H4F+xPXNvUOv7eEkhCyv45JbBEf40OkEdHLdyX+hAO+QdLwAE6Ca5GPVy+OIsPKknv+1BcR1/m/wd6erptYCTKFQAAAABJRU5ErkJggg==) no-repeat;
  background-size: 16px 16px;
  padding-left: 20px;
}
.addressTable {
  width: 219px;
  padding: 8px 7px 0 10px;
  background-color: #fff;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 26px;
  right: -7px;
  z-index: 99;
}
.addressTable .item {
  cursor: pointer;
  font-size: 12px;
  color: #333;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAEEfUpiAAAAAXNSR0IArs4c6QAABGZJREFUWAmtl01oXFUUx2deMjOLQEgoBdMmi7qpuAhEGkgW0hYslSxEUUPRRQghCbqr3QT8KLYKIrRd1ZCEELJQSlSUokExaIKLBosGFKRd1C4yJoJKQjSQyeTD3/95z+udyUz7JtMLl3vP1/+ce+49976XSLg2MjLyj80Lx/ISX290dPQq/XTIGxsb6zAh5rs2vzei+ptRkQZmrb6pFCJFOTCLUmMA83opwR5e5M9JjE6a5tTUVHp1dfUX6KWBgYGTxg9H0/aZxLYY0kz+9QX+fGJi4hEF+b7P9Oebm5vLQU1NzRWfWTwPtra25oqZPl0L8YXPsPnk5OSBnp6e/1dJoDfGx8ePmhD6YwUoOsqDiOnp6Uw2m/17d3e3LplMnod1raGhYWllZaWd+SV6G/3i4ODgW4xhCwFkuLi4uAEnjTDvZGUHIphFmCHhnUntAB5yGBZEU9baCbQkEvRDoO0j3Gh9DzI0eV9f323m9dqoJdZ82ASVjoE7ON9WaqidwGY4WjcMHa47AJ64H5j2d2Nj4690Ot3U29v7RwRgRtpfzli4PuN54zDJftWjC8+BCYhGNT5Ebo6R4CXmM5yHs93d3ZumY2NBBNTNBQRv0hfo5xobG2+yS4eYnwHsbcDWm5ubD3R1deXghS0CcDnIk4NHTVg86ubY2dm5Ab+Vpah6E9pGXSFiKoFljaXX398/z5Cm/6zTK16gpBFex4OyL2U1HfUgCDpVM6IDZby2tvYxEXGbIsFpncpAS6h3xzKufahHQs+T4CthDiqyvKd8jelT+wbgLlsGoGnfAJTyMQB+3DcAxrqh3hPAMOdAlVVpa2Prvw5UHGzJC6qyuAg41CN3UfrhElSaKtE4IBjPYpfCcXixRrXgyniZ/f2E0F4Uut/cHXgL+TzyTpNFAMagIj9g/orR3rhGpEd1iXi80veBr+AiU7gv0+t92X3ma8g+xOGFYofFNntWIAU5zefzn6lIRSstHLw34paM0rW9vf2ONtfZz6dSqedKBVMQgHN8E8NmnM5lMpnneV/DqhfQfpoORi6X+xTM42BmCaTdDyQKwG5TlO7iuL1ax8XBukC0uCPIouc9DMAOjlJd6gQWg1VDq2jd1oQPVBLGaRhfAbpAbTxRDXhcWxb8E7ptLPhpFfKQMzwXF+Ah6JmvoYDV61ZM6AV9CMCxIMyXfAekQe9+wj3fsQCqVTJf8q0tmHGAZ6oFrsDefM3Y9+mfGNfrcY972VTgrEDV7nSYa2zFwUCfW7qjScc6r+St4t+mAusqCWHLh3zJp3xHF5H7P5jlYHSgMMd4St9AVfoMzSm7FJjfgKnbcJ7PwxP2eRgFYI6IshXFL+m6ju/SX3JfdKYSe9SKwfmIfgScLGMXiwo/KQ1kTwAmcD8+r2P4GoZ1jr8A/Tn094y/6w9KfJ1qeIfhPcn4LCz9TekRW4e+3NLS8q6tWHy/lQ3AV9Lc/c6eZPoM/XG6nOrLW44UiPqv9OsE9l2pT3lke9p/9bwYayQt4JgAAAAASUVORK5CYII=) no-repeat 0 2px;
  background-size: 14px 14px;
  padding-left: 18px;
  margin-bottom: 10px;
  height: 18px;
}
.addressTable .current {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAEEfUpiAAAAAXNSR0IArs4c6QAABUhJREFUWAmlV11oHFUU/maSbGrSpJuU5k9FK0JFoVAxtHkQ26IoPoiiD6K+qRR9sLW+JGnV2B8TBJtEUKk/byqCilIQBGtt6UOCQfMgioI2inWbWs1uNm3MbrM7ft/dubOzk91NagZ25p6/75x777nnngX8Z6YPc3Zc+rUSb3iDVyoJU6l+vD7bj7sNb3YftlnhTC8KZrIPMJJ9OLNEY6Yfm8OmUggU5cBaWChvuO0ry3Md4JglAOeEGTdc9ViR54+CiCI0AQqPN4BYKoPvGXiiZQg7LN98o9ZikveHFV40gzKviwPocB0Hr0jmeZ5jZ2F1sws458bjGDaM0fa0FYS/biqJU2I4e/5qCguCcbIfBwIiNEj3YX1AMuKx9H5ssgwu80cKUHSwDiK811CfTOAfDhsZ/Is1wIdN9UiksuhGHq9yb7c4Lg62vIwXpK/HAPiGCy0bEXN24XJBVPnNCE56Hupbh9DjaAeSC8iQKI2Gy4bR9jHC3EI/e509598OQ2pKizl842r7ap3i/KTkjbSNY6Qtz8Xfyt9aePm3goT0UZoP4Wdue7Orvc85uDqMTo/vltKVKRO2ciU6hcomBYl2got6IZi3kosr/2vLILZXM9b+Lnr4O7YGnWsHMB0AWCPtbzZTmJ/lBV8Hb7YO4umA5mAJgIQ64/k8erkPt1EhwciOr4vhWWcA2bCxxiUASksvj+fJnISL5+IxTMxl0JUDHua+v0T9Sy1dWO88g4wFCgD8NbjMNbjBCqNfVY5cDmOow+bWgzy9fAyAcp1hZpZbQBl4R1GXnEKWkawxkWjRtI0SrvRRJLQxlcDVitfW4qaosTfS/iQzck5ZqWoQlq87jHHSjToGtUpHk5YhDVP4vPxOn7VVaU0QlhcniFSndTaLYTdkFxp61rjIKxysgNZR587cWQEg0AsPeCqLT1Mc5wjQeQUAzt6iOZCaNUn2bXmAhoausDJ3+0S0HqhCuS6GwEvsDZ2sUoPlqZKtF1FSRZexp8MzthqbKeho6oiuBMSvh3W2sBoAnWsLUmk6qoGK1C+m19ogSzJMTK0Jk+spqxB8HaRj9dgkZwGPgyUAYaHGfoHRPfCosjYqL0vTGfnv0+GBqMOoftkAjNMFfEpl03Mw7T+uqcH+6JGJgllay8WycYjL9ZDPG+cSP1AumJIAfMcTNLqGTk/xuDzYPGhuSot9xV8lBgviJwzmDhqfZSDd4UCCAIJq6mCKjrtX6zgaqR/IBAPZGL3eTeIowyplYBRsNbR8yJdJVgI5uoByeXzBpZhkc3ZrNXDv6HWdmP/3Pdb1neX12CayRXR2/X6uvLzATfbiO9bVLTUu7nF1+xk2L7FqRirwmJ9PVHYuawZGHaNbDcz3Jd+url7p6gatZkPwI9XlYWl1XetLvtVpc1aAru8wRJnxD2V4lVhVda0v+VYXfVwo6h0qoRn+7vM9uhaq6hghdYxuZU3rS74L/WkGF1TldLkvV2zMBT/a8QS35HG6sLckZ8yOcvf0O+F7u1wIpq9dxE+swemWemwwdcAvQL/QoJEVr8fvGsrZr4oXNFbs0FiQblRBMgEI1W/zT3K4TVUwfj3uWkm7L9vlHjVjqd/wpV8Nx9mUbbftYRCABdGfR173n5NWOZ7itf/I/10RzZhH7QNVP+KdZUt5r20prb8lAViBViQ1jX1sdtXMNIpP5Um+PuPvdI2HP/UPSnzTAOtfhofb+btfRUZ8PpdYdo/EO3DYzrjALr4rBlBUKYzURaaz2EHw+xjUzQyii2NzdAmSoOMEnf3I8bHmGL4u18pHMUX/B2lFKb1pIZ10AAAAAElFTkSuQmCC) no-repeat 0 2px;
  background-size: 14px 14px;
}
.addressTable:before {
  content: "";
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  top: -12px;
  right: 17px;
}

.head {
  width: 100%;
  height: 80px;
  background-color: #fff;
  padding: 0 15%;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #999;
  justify-content: space-between;
}
.head .left {
  display: flex;
  align-items: center;
}
.head .left .logo {
  width: 287px;
  height: 54px;
  display: block;
}
.head .left .send {
  margin-left: 40px;
  color: #ee7800;
  font: 14px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5B8B\4F53', sans-serif;
  box-sizing: border-box;
}
.head .left .loginOut {
  margin-left: 5px;
  margin-right: 20px;
}
.head .left .selectDisplay {
  cursor: pointer;
  color: #666666;
}
.head .left .mr10 {
  margin-right: 10px;
}
.head .left .selectAction {
  cursor: pointer;
  color: #ee7800;
}
.head .left .address {
  margin-left: 20px;
  margin-right: 5px;
  width: 170px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.head .right {
  display: flex;
}
.head .right .cartCount {
  color: #ff2200;
}
.head .right .vertical {
  color: #e1e1e1;
  margin: 0 10px;
}

.box {
  width: 100%;
  display: flex;
  height: 100vh;
}
.box .left {
  width: 200px;
  background-color: #999;
}
.box .right {
  flex: 1;
  background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
}
.box .right .topBar {
  display: flex;
  align-items: center;
  justify-content: left;
  height: 66px;
  border-bottom: 1px solid #e6e6e6;
}
.box .right .content {
  display: flex;
  height: 100%;
  overflow: hidden;
}
.box .right .content .chat {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.box .right .content .rightBlock {
  width: 148px;
  height: 100%;
  border-left: 1px solid #e6e6e6;
}
.box .right .content .rightBlock .infoIcon {
  width: 15px;
  height: 14px;
  margin-right: 4px;
}
.box .right .content .rightBlock .infoCustomer {
  padding: 12px;
  border-top: 1px solid #e6e6e6;
}
.box .right .content .rightBlock .infoIdentify {
  width: 124px;
  height: 64px;
}
.box .right .content .rightBlock .info {
  padding: 12px;
}
.box .right .content .rightBlock .title {
  font-size: 12px;
  color: #999999;
  margin-bottom: 10px;
}
.box .right .content .rightBlock .infoTitle {
  font-size: 14px;
  color: #333333;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}
.box .right .content .rightBlock .infoValue {
  font-size: 12px;
  color: #333;
  margin-bottom: 16px;
}
.box .mediate {
  display: flex;
  height: 100%;
  flex: 1;
  align-items: center;
  justify-content: center;
}
.box .mediate .sendButton {
  width: 152px;
  height: 46px;
  background-image: linear-gradient(90deg, #ffa215 0%, #ff771d 100%);
  border-radius: 23px;
  line-height: 46px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  margin-top: 48px;
}
.box .mediate .line {
  width: 260px;
  border-bottom: 1px solid #f2f2f2;
  margin-top: 16px;
  margin-bottom: 33px;
}
.box .mediate .info .title {
  margin-bottom: 18px;
  font-size: 16px;
  color: #333;
}
.box .mediate .info .row {
  display: flex;
}
.box .mediate .info .row .key {
  color: #999;
  font-size: 14px;
}
.box .mediate .info .row .value {
  color: #000;
  font-size: 14px;
}
/*滚动条样式*/
div {
  /* 三角箭头的颜色 */
  scrollbar-arrow-color: #c1c1c1;
  /* 立体滚动条的颜色 */
  scrollbar-face-color: #c1c1c1;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  border-radius: 12px;
  background: #c1c1c1;
}
::-webkit-scrollbar-track {
  border-radius: 12px;
  background: transparent;
}
::-moz-scrollbar {
  width: 8px;
  height: 8px;
}
::-moz-scrollbar-thumb {
  border-radius: 12px;
  background: #c1c1c1;
}
::-moz-scrollbar-track {
  border-radius: 12px;
  background: transparent;
}

.frame {
  display: flex;
  height: 100%;
}
.frame .action {
  background-color: #f3f3f3;
}
.frame .ctrNav {
  width: 64px;
  background-color: #fb8003;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.frame .ctrNav .avatar {
  width: 50px;
  height: 50px;
  margin-top: 20px;
  margin-bottom: 50px;
}
.frame .ctrNav .tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.frame .ctrNav .tabs .message {
  width: 30px;
  height: 29px;
}
.frame .ctrNav .tabs .text {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  margin-top: 8px;
  margin-bottom: 32px;
  color: #fff;
}
.frame .ctrNav .tabs .service {
  width: 30px;
  height: 30px;
}
.frame .ctrNav .disable {
  opacity: 0.6;
}
.frame .sessionNav {
  border-right: 1px solid #e1e1e1;
  width: 240px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.frame .sessionNav .search {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 66px;
  position: relative;
}
.frame .sessionNav .search .searchimg {
  position: absolute;
  width: 30px;
  left: 20px;
}
.frame .sessionNav .search input {
  display: block;
  width: 216px;
  height: 36px;
  background-color: #ffffff;
  border-radius: 20px;
  border: solid 1px #e6e6e6;
  outline: none;
  padding-left: 42px;
}
.frame .sessionNav .search .searchContent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.frame .sessionNav .search .searchList {
  top: 52px;
  position: absolute;
  width: 216px;
  background-color: #ffffff;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: solid 1px #e6e6e6;
}
.frame .sessionNav .search .searchList .item {
  margin: 12px;
  display: flex;
  align-items: center;
}
.frame .sessionNav .search .searchList .item .face {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-right: 12px;
}
.frame .sessionNav .search .searchList .item .name {
  font-size: 16px;
  color: #999999;
}
.frame .sessionNav .sessionList {
  height: 100%;
}
.frame .sessionNav .sessionList .sessionItem {
  width: 239px;
  height: 72px;
  border-top: 1px solid #f3f3f3;
  display: flex;
  justify-content: space-between;
  padding-left: 13px;
  padding-top: 14px;
}
.frame .sessionNav .sessionList .sessionItem .itemLeft {
  display: flex;
}
.frame .sessionNav .sessionList .sessionItem .itemLeft .avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
.frame .sessionNav .sessionList .sessionItem .itemLeft .info {
  margin-left: 12px;
}
.frame .sessionNav .sessionList .sessionItem .itemLeft .info .name {
  width: 124px;
  height: 22px;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #000000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.frame .sessionNav .sessionList .sessionItem .itemLeft .info .endText {
  margin-top: 4px;
  width: 124px;
  height: 17px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #999999;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.frame .sessionNav .sessionList .sessionItem .itemRight {
  padding-right: 6px;
}
.frame .sessionNav .sessionList .sessionItem .itemRight .endDate {
  height: 22px;
  line-height: 22px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #999999;
}
.frame .sessionNav .sessionList .sessionItem .itemRight .unread {
  margin-top: 6px;
  width: 20px;
  height: 14px;
  background-color: #ff4d3a;
  border-radius: 7px;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  margin-left: 3px;
}
.frame .sessionNav .messageList {
  height: 100%;
}
.frame .sessionNav .messageList .group .title {
  width: 213px;
  margin-left: 16px;
  height: 48px;
  line-height: 48px;
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #999999;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.frame .sessionNav .messageList .group .db .itemLeft {
  display: flex;
  border-bottom: 1px solid #f3f3f3;
  margin-left: 13px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.frame .sessionNav .messageList .group .db .itemLeft .avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
.frame .sessionNav .messageList .group .db .itemLeft .info {
  margin-left: 12px;
}
.frame .sessionNav .messageList .group .db .itemLeft .info .name {
  width: 124px;
  height: 22px;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #000000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.frame .sessionNav .messageList .group .db .itemLeft .info .endText {
  margin-top: 4px;
  width: 124px;
  height: 17px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #999999;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.frame .sessionNav .messageList .group .company .title {
  width: 224px;
  margin-left: 16px;
  height: 48px;
  line-height: 48px;
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #333333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px solid #f3f3f3;
}
.frame .sessionNav .messageList .group .company .itemLeft {
  display: flex;
  margin-left: 13px;
  border-bottom: 1px solid #f3f3f3;
  padding-top: 15px;
  padding-bottom: 15px;
  align-items: center;
}
.frame .sessionNav .messageList .group .company .itemLeft .tag {
  width: 11px;
  height: 11px;
  border-left: 2px solid #d8d8d8;
  border-bottom: 2px solid #d8d8d8;
  border-radius: 1px;
  margin-left: 9px;
  margin-right: 10px;
}
.frame .sessionNav .messageList .group .company .itemLeft .avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
.frame .sessionNav .messageList .group .company .itemLeft .info {
  margin-left: 12px;
}
.frame .sessionNav .messageList .group .company .itemLeft .info .name {
  width: 124px;
  height: 22px;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #000000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.frame .sessionNav .messageList .group .company .itemLeft .info .endText {
  margin-top: 4px;
  height: 17px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0;
  color: #999999;
  width: 130px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.frame .goLogin {
  display: block;
  width: 216px;
  height: 46px;
  background-image: linear-gradient(90deg, #ffa215 0%, #ff771d 100%);
  border-radius: 23px;
  color: #fff;
  font-size: 16px;
  line-height: 46px;
  text-align: center;
  margin: 44px 0 0 12px;
  cursor: pointer;
}

.user-header {
  flex: 1;
  display: flex;
  height: 44px;
  margin-left: 20px;
}
.user-header__user-info {
  font-size: 16px;
  margin-left: 12px;
}
.user-header__user-info--sign {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.user-header--avatar {
  width: 44px;
  height: 44px;
}
.user-header--avatar img {
  width: 44px;
  height: 44px;
}
.user-header--avatar.rectangle {
  border-radius: 10px;
}
.user-header--avatar.rectangle img {
  border-radius: 10px;
}
.user-header--avatar.circle {
  border-radius: 50%;
}
.user-header--avatar.circle img {
  border-radius: 10px;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.easeOut {
  transition: all 0.6s ease-out;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
.pointer {
  cursor: pointer;
}
.message-list {
  flex: 1;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
}
.message-list .message--info {
  color: #999;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  font-size: 14px;
}
.message-list .message--info.message--withdraw {
  padding: 12px 0;
}
.message-list-anchor {
  display: inline-block;
  position: absolute;
  right: -1px;
  z-index: 100;
  font-size: 12px;
  color: #ed7800;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 100px 0 0 100px;
  padding: 8px 11px;
  cursor: pointer;
}
.message-list-anchor.up {
  top: 16px;
}
.message-list-anchor.up::before {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAA0xJREFUSA3dVktIVFEY/s6dJlMSxvSOtKhNUWDQQhIrogjMClq4iAgi0rGHFUFJLYoIV9GuQAQTHHGRoasKeuCmhdQiowzElKjQRZEzvnrQw7n39B29M8yce8e5zbLLDPf853zf//2Pc84M8L8/wk+CUw2osCRuCoFtUuI9BG6Eu9Drh6tjDH1Ct2MRFFPsKUV2cK1HrTPKnngENTrWj51TkIBaOgrzfcrsQlMwhN2QkNJGvR8BHZNT0AZMRZLAiHqX3MIsxxNMc7Wy//XJKaiy8XBqczY314OYF4nZqSBM9neL7EPAw2/WqfwE6Y6Km9jHwdgjvIudwAbZguVZVdIW8hIUEtP00chj0sRsy+U8xuLj+D7ZgAElnubfNVzmmvEzYeBuOIqogsYasEsKrGHGQwzkCBJ4wblnnOsmpk93l1eGhsBoypHAa3MlangRnGPG11jrOV4OlbDRy7N6NoVzBp4ZygsojH9DtUzAYtQBfZvaAbxJc3RHtOK3skUAL9nXWnMtPrLEQxS+xOm2NCxcgixHZWwGjwkKKyDP4a90ghqbHficnDOj+JQcoxAjZiu+Kpv9HGSwh1NrzsCrpO3cCILRHmDpzrBM8zopm13qiDnrFv24/LsyZA82kvDc7MRDRZxuxIBl4YnjxPeL2dnOec3guCLg7urn5bxn+jg2K+SqTgwHDewUBfiSwfRhsIeWDnNlSOcX5y3sTyRwm4TtLKkMRfFBJ+ayGXiQ1XIJujIs6cS4MHCVDrdORXiw83xYpSCD5Z7LfFyCarlsH1oJfsUMr8+cRyiT4s8it4TfHzraU1AcgsUdepnnL5SYxRWd5NOuZNALP2npeE9BBSiNcvOIhfPYzL8Ye9NJucbxelQRE+ZO7dexWQUVcEUB6tn8GXa+W55EkU7OahuoU2vSwD0ds6RgcTsmDQPN3G3lUwkc1MnZbPaujtV5y1toTMcsKajAogj3Sba53ap1spc914j1FKxg/13ZKXxOQee6GhW2P8E/9mI5AwE88ArI1//SyQjaKHiaV1UHncwtOJLqxmWxnYe95gdBZneUm2WirAtVrExqPYlz3TTJhfR3oUTLT4F1pB+j04LUmuOOr0XX6qBLDBtB4jzEFO8v5NL409CtOjEAAAAASUVORK5CYII=);
}
.message-list-anchor.bottom {
  bottom: 16px;
}
.message-list-anchor.bottom::before {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAAzNJREFUSA3dVttLFFEc/s7srgVSqesaJVj0kkZQFOJLdHlIjCB7ClIi3SVbAqOH/gAhKEKynqK8S28SVBBU5kN0AYWwiHwoguxJ2vGypWi2zJy+2Rprz5l1x33swHDO7/r9bnNmgP99CT8JzjUjsgjcgcQBGqxRbSSQ9iMEbCnxPhBCQ7gL46qeQwe9mCpvUaBN2Kil207KvhH4b6ACcpkQaX+n7BQGCFzNABhL5vIFKCQO0mws0od4prlOmc2YJEr7zBnUUDqiahgqQ6WnW7GevEppYFSVedEFBu47fMvCMS95TkC5gHqWx6CiL8ANPfjEEo/zOb5qwLk4ymwbHezY13AQd70cePGEgQcMssqMYrsqXzHDH0voZ/+KA8Bp0YkF1TgbzR7ec2QcNC3LrIDTUdQyyiO06wj34Uk25178SC9ek5/g+Naqck9AOYiALXGFfUgGi3BZNfJJjzHgHaqu52sx9QjnqbzHEDhXfANJ1cgPzXdwlnqFqq6W4WwMWwh2iYoj4V7cUg380uxjig/bn7k0wJSFayzl2mAQZ92bIhnFtqk4yjNNV6Y4bClq5AYk2GFG9rSkG+8clzMx7EzZeC6XsHFlCF1KXxqg3kOBDzTda8ZwlGNdYdm4ygDW0XhVixPKEdCXVlKqxHnlSmnhISf1JvsZ0s28OX+uQVcYoB/bJdxdA+QFPRYpxlYRxCEq7eeddtFVdnezBZuWz1Fsds9y/vftIttQwOyqeUNNujJ31wAdgbiOxUg3npX14wXLabnK7m5Y2OWeuTfK1uVvZDVzGjIn8IWVqeLQtf+jlz7qPVQ1PGiWupLsx2mRxG5zHsOJZrwlSCOzcnr3ij0cKO3FoGqeFyCzOJlowndmECJIPZ0W8lxDkFG2IhbpwkcVyKXzAqTjEg5ED8Gc9VmEUFdajgnRhp+u42x7XoAEY0L8ZzHQVFqHN+KE3udsgJ5Dk01Z4ZvOV2E1YI59voAGh0N7x5SAPMmcgFQwHUuWMP2pmb2AIp4rWFbtHfNEUJg5e8g0hmiT4H6bf2T7UknUsIGCT7/iyxeZM0P2aS4geOtIvKTHBscrh7OB79iwLwRF6Rem/OcfJCVm9wAAAABJRU5ErkJggg==);
}
.message-list-anchor::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 13px;
  background-position: center;
  background-size: cover;
  vertical-align: -1px;
  margin-right: 5px;
}
.message-list-container {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.message-list-container.scroll {
  scroll-behavior: smooth;
  transition: all cubic-bezier(0.4, 0, 1, 1) 0.15s;
}
.message-list .highlight .message-item {
  animation: linear 3s fade;
}
.message-list .message-item {
  padding: 12px 20px;
  display: flex;
  align-items: flex-start;
}
.message-list .message-item--has-toolbar {
  margin-bottom: 35px;
  position: relative;
}
.message-list .message-item .next-avatar {
  margin-right: 12px;
}
.message-list .message-item .expired-resource {
  width: 210px;
  height: 160px;
  background-color: #ccc !important;
  color: #fff;
  text-align: center;
  padding-top: 48px;
}
.message-list .message-item .expired-resource img {
  width: 40px;
}
.message-list .message-item .expired-resource p {
  font-size: 16px;
  margin-top: 5px;
}
.message-list .message-item--self {
  flex-direction: row-reverse;
}
.message-list .message-item--content {
  flex: 1;
}
.message-list .message-item--content > div {
  display: flex;
  align-items: center;
}
.message-list .message-item--from {
  color: #999;
  margin-bottom: 4px;
  margin-top: 0;
  font-size: 14px;
}
.message-list .message-item--from span {
  font-style: normal;
  border-radius: 4px;
  margin-left: 4px;
  padding: 2px 6px;
  font-size: 10px;
  vertical-align: 1px;
  color: #fd7822;
  background-color: #ffebdf;
}
.message-list .message-item--from span.carzone {
  color: #fd7822;
  background-color: #ffebdf;
}
.message-list .message-item--from span.customer {
  color: #8ca5ce;
  background-color: #ebf3ff;
}
.message-list .message-item--status {
  vertical-align: middle;
  margin: 0 14px;
  cursor: pointer;
}
.message-list .message-item--status.iconchucuo {
  color: #ff4d3a;
}
.message-list .message-item--status.next-icon-loading {
  color: #ff6600;
}
.message-list video {
  display: block;
}
.message-list .bubble--toolbar {
  position: absolute;
  left: 72px;
  margin-top: 10px;
}
.message-list .bubble--toolbar .next-btn {
  border-radius: 50px;
  background-color: transparent;
  height: 24px;
  line-height: 22px;
  font-size: 12px;
  padding: 0 12px;
  margin-right: 8px;
}
.message-list .bubble--toolbar .next-btn:last-child {
  margin-right: 0;
}
.message-list .bubble--toolbar .next-btn.secondary {
  color: #5677fb;
  border-color: #5677fb;
}
.message-list .bubble-txt,
.message-list .bubble-voice,
.message-list .bubble-file {
  max-width: 50%;
}
.message-list .bubble-img,
.message-list .bubble-video {
  border-radius: 2px 10px 10px 10px;
}
.message-list .bubble-txt,
.message-list .bubble-voice,
.message-list .bubble-file,
.message-list .bubble-location,
.message-list .bubble-activity,
.message-list .bubble-vin,
.message-list .bubble-quotation,
.message-list .bubble-order,
.message-list .bubble-expired-resource {
  background: #fff;
  padding: 0 12px;
  border-radius: 2px 10px 10px 10px;
  box-shadow: 0 1px 3px 0 rgba(0, 21, 41, 0.03);
  overflow: hidden;
}
.message-list .bubble-file {
  width: 370px;
}
.message-list .bubble-file-info {
  border-bottom: 1px solid #e6e6e6;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  font-size: 16px;
  color: #333333;
}
.message-list .bubble-file-info img {
  margin: 12px 12px 12px 3px;
  vertical-align: middle;
}
.message-list .bubble-file-downloadBtn {
  text-align: center;
  color: #3c88f9;
  padding: 12px 0;
  font-size: 14px;
  cursor: pointer;
}
.message-list .bubble-txt {
  padding: 12px 12px;
  display: inline-block;
  line-height: 20px;
  word-break: break-all;
  font-size: 14px;
}
.message-list .bubble-img {
  display: inline-block;
  max-width: 280px;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  cursor: zoom-in;
}
.message-list .bubble-video {
  overflow: hidden;
  width: 200px;
}
.message-list .bubble-question {
  min-width: 270px;
  padding: 0;
}
.message-list .bubble-question .question-item {
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  cursor: pointer;
  position: relative;
  width: 270px;
  padding-right: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
.message-list .bubble-question .question-item + .question-item {
  border-top: 1px solid #ebebeb;
}
.message-list .bubble-question .question-item::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 10px;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iN3B4IiBoZWlnaHQ9IjEycHgiIHZpZXdCb3g9IjAgMCA3IDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPueUu+advzwvdGl0bGU+CiAgICA8ZyBpZD0i55S75p2/IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgICAgIDxnIGlkPSLnvJbnu4QiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMuNTAwMDAwLCA2LjAwMDAwMCkgcm90YXRlKDkwLjAwMDAwMCkgdHJhbnNsYXRlKC0zLjUwMDAwMCwgLTYuMDAwMDAwKSB0cmFuc2xhdGUoLTEuNTAwMDAwLCAzLjUwMDAwMCkiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLXdpZHRoPSIxLjUiPgogICAgICAgICAgICA8bGluZSB4MT0iNSIgeTE9IjAiIHgyPSIwIiB5Mj0iNSIgaWQ9IkxpbmUiPjwvbGluZT4KICAgICAgICAgICAgPGxpbmUgeDE9IjUiIHkxPSIwIiB4Mj0iMTAiIHkyPSI1IiBpZD0iTGluZSI+PC9saW5lPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat center / contain;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.message-list .bubble-quotation {
  cursor: pointer;
  padding-top: 12px;
  padding-bottom: 12px;
}
.message-list .bubble-quotation .quotation-descr {
  font-size: 16px;
  margin-bottom: 12px;
}
.message-list .bubble-quotation .quotation-cover {
  width: 326px;
  border-radius: 10px;
  overflow: hidden;
}
.message-list .bubble-quotation .quotation-cover img {
  width: 100%;
  display: block;
}
.message-list .bubble-order {
  width: 303px;
  font-size: 14px;
  padding: 12px 0 0 0;
}
.message-list .bubble-order .order-snapshoot {
  display: flex;
  margin: 0 9px;
  padding: 15px;
  width: 286px;
  height: 80px;
  background-color: #f8f8f8;
  border-radius: 8px;
}
.message-list .bubble-order .order-cover {
  width: 48px;
  height: 48px;
  overflow: hidden;
  margin-right: 8px;
}
.message-list .bubble-order .order-cover img {
  width: 100%;
}
.message-list .bubble-order .order-detail {
  justify-content: center;
}
.message-list .bubble-order .order-detail p {
  line-height: 20px;
  margin: 0;
  width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
.message-list .bubble-order .order-detail p:last-child {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}
.message-list .bubble-order .order-detail p:last-child span + span {
  margin-left: 16px;
}
.message-list .bubble-order .order-desr {
  padding: 12px 9px;
  color: #666;
  line-height: 20px;
}
.message-list .bubble-order .order-desr p {
  margin: 0;
}
.message-list .bubble-order .order-desr p + p {
  margin-top: 4px;
}
.message-list .bubble-order .order-action {
  border-top: solid 1px #ebebeb;
  line-height: 44px;
  height: 44px;
  color: #5677fb;
  text-align: center;
  cursor: pointer;
}
.message-list .bubble-activity {
  display: flex;
  padding: 16px 12px;
  cursor: pointer;
}
.message-list .bubble-activity p {
  font-size: 14px;
  margin: 0;
}
.message-list .bubble-activity .activity--banner {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 12px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.message-list .bubble-activity .activity--descr {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.message-list .bubble-activity .activity--title {
  font-size: 14px;
  width: 306px;
  transition: color linear 0.15s;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}
.message-list .bubble-activity .activity--title:hover {
  color: #ed7800;
}
.message-list .bubble-activity .activity--time {
  font-size: 14px;
  color: #999;
}
.message-list .bubble-vin {
  width: 360px;
}
.message-list .bubble-vin .vin--code {
  font-size: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #e6e6e6;
}
.message-list .bubble-vin .vin--list {
  margin-bottom: 16px;
  margin-top: 12px;
  max-height: 136px;
  overflow-y: auto;
}
.message-list .bubble-vin .vin--list p {
  font-size: 12px;
  color: #999;
  margin: 0 0 5px 0;
}
.message-list .bubble-vin .vin--list ul li {
  font-size: 14px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
.message-list .bubble-vin .vin--list ul li + li {
  margin-top: 8px;
}
.message-list .bubble-vin .vin--action {
  display: flex;
  padding-top: 9px;
  padding-bottom: 9px;
  border-top: 1px solid #e6e6e6;
}
.message-list .bubble-vin .vin--action .next-btn-text {
  flex: 1;
  color: #5677fb;
  font-size: 14px;
  line-height: 24px;
  height: 24px;
}
.message-list .bubble-vin .vin--action .next-btn-text + .next-btn-text {
  border-left: 1px solid #e6e6e6;
}
.message-list .bubble-location {
  padding: 12px;
  width: 350px;
  height: 240px;
  overflow: hidden;
}
.message-list .bubble-location p {
  margin: 0;
}
.message-list .bubble-location .address {
  font-size: 16px;
  color: #333;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
.message-list .bubble-location .address-descr {
  font-size: 12px;
  color: #999;
  margin-top: 3px;
  margin-bottom: 10px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
.message-list .bubble-location--container {
  width: 100%;
  height: 164px;
}
.message-list .bubble-voice {
  min-width: 72px;
  max-width: 50%;
  padding: 0;
}
.message-list .bubble-voice .audio-player {
  cursor: pointer;
  position: relative;
}
.message-list .bubble-voice .audio-duration {
  position: absolute;
  top: 0;
  line-height: 40px;
  left: 27px;
}
.message-list .bubble-voice .audio-translation {
  padding: 9px 12px;
  font-size: 14px;
  line-height: 20px;
  text-align: justify;
  border-top: 1px solid #e6e6e6;
}
.message-list .bubble-voice.unread {
  overflow: visible;
  position: relative;
}
.message-list .bubble-voice.unread::after {
  position: absolute;
  top: 20px;
  transform: translateY(-50%);
  right: -17px;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: #ff4d3a;
  border-radius: 50%;
}
.message-list .bubble-voice .icon-voice {
  position: relative;
  transform: translateX(16px) rotate(45deg);
  width: 40px;
  height: 40px;
}
.message-list .bubble-voice .icon-voice.icon-voice-play .voice-circle {
  opacity: 0;
  animation: vociean 1.2s infinite;
}
.message-list .bubble-voice .icon-voice.icon-voice-play .voice-circle.circle-two {
  animation-delay: 300ms;
}
.message-list .bubble-voice .icon-voice.icon-voice-play .voice-circle.circle-one {
  animation-delay: 600ms;
}
.message-list .bubble-voice .voice-circle {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-color: #000;
  border-style: solid;
  border-width: 2px 2px 0 0;
  border-radius: 0 100% 0 0;
  opacity: 1;
}
.message-list .bubble-voice .voice-circle.circle-one {
  width: 13px;
  height: 13px;
}
.message-list .bubble-voice .voice-circle.circle-two {
  width: 9px;
  height: 9px;
}
.message-list .bubble-voice .voice-circle.voice-point {
  width: 5px;
  height: 5px;
}
.message-list .message-item--self .bubble--toolbar {
  text-align: right;
  right: 72px;
}
.message-list .message-item--self .bubble-txt,
.message-list .message-item--self .bubble-img,
.message-list .message-item--self .bubble-file,
.message-list .message-item--self .bubble-video,
.message-list .message-item--self .bubble-voice,
.message-list .message-item--self .bubble-location,
.message-list .message-item--self .bubble-activity,
.message-list .message-item--self .bubble-vin,
.message-list .message-item--self .bubble-expired-resource {
  border-radius: 10px 2px 10px 10px;
}
.message-list .message-item--self .bubble-txt {
  background: #ffe3ca;
}
.message-list .message-item--self .bubble-img {
  text-align: right;
}
.message-list .message-item--self .message-item--content > div {
  flex-direction: row-reverse;
}
.message-list .message-item--self .next-avatar {
  margin-right: 0;
  margin-left: 12px;
}
.balloon-ellipsis.next-balloon {
  padding: 0;
  height: 20px;
  line-height: 18px;
  background: #fff;
  border: 1px solid #e6e6e6;
  color: #7f7e83;
  text-align: center;
  border-radius: 4px;
  box-shadow: none;
  cursor: pointer;
}
.balloon-ellipsis.next-balloon:hover {
  background-color: rgba(221, 221, 221, 0.4);
}
.balloon-ellipsis.next-balloon::after {
  content: none;
}
.balloon-ellipsis.next-balloon .next-icon-ellipsis {
  padding: 0 6px;
}
.balloon-menu.next-balloon {
  padding: 0;
  background: #fff;
  border: 1px solid #e6e6e6;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 21, 41, 0.08);
  cursor: pointer;
}
.balloon-menu.next-balloon::after {
  content: none;
}
.menu-list {
  width: max-content;
}
.menu-list .menu-item {
  line-height: 20px;
  padding: 10px 16px;
  min-width: 60px;
  width: 100%;
  text-align: center;
  border-top: 1px solid #e6e6e6;
}
.menu-list .menu-item:hover {
  color: #ed7800;
  transition: all 0.3s linear;
}
.img-view--dialog {
  border-radius: 4px;
}
.img-view--dialog .next-dialog-body {
  border-radius: 4px;
  overflow: hidden;
}
.img-view--dialog .next-dialog-close {
  top: 10px;
  right: 20px;
}
.img-view--dialog .next-dialog-close .next-dialog-close-icon.next-icon:before {
  font-size: 20px;
}
@keyframes vociean {
  0% {
    opacity: 1;
  }
  50% {
    opactiy: 0.1;
  }
  100% {
    opactiy: 1;
  }
}
@keyframes fade {
  0% {
    background-color: #f9f1e8;
  }
  100% {
    background-color: transparent;
  }
}

.text-field--wrapper {
  height: 30%;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 75px;
  border-top: 1px solid #e6e6e6;
  position: relative;
  box-sizing: border-box;
  font-size: 14px;
}
.text-field--input {
  height: calc(100% - 40px);
  overflow-y: auto;
  color: #333;
  padding: 12px 0;
  line-height: 20px;
  word-break: break-all;
}
.text-field--input:focus {
  outline: none;
}
.text-field--input:empty::before {
  content: "\8BF7\8F93\5165\6D88\606F";
  color: #999;
}
.text-field--enter-button {
  position: absolute;
  bottom: 28px;
  right: 28px;
}
.text-field--enter-button::before {
  content: "Enter\53D1\9001";
  color: #999;
  margin-right: 16px;
}
.text-field--enter-button .next-btn-primary {
  border-radius: 20px;
  padding: 0 25px;
  height: 36px;
  line-height: 34px;
}
.text-field--enter-button button {
  width: 64px;
  height: 32px;
  background-color: #ed7800;
  border: none;
  color: #fff;
  border-radius: 16px;
}
.text-field--enter-button button.disabled {
  background-color: #e6e7eb;
  color: #9c9c9d;
  cursor: not-allowed;
}
.text-field--enter-button button:focus {
  outline: 0;
}
.text-field--tool-bar {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
}
.text-field--tool-bar .carzone-icon {
  cursor: pointer;
  color: #666;
  width: 18px;
  height: 18px;
}
.text-field--tool-bar .carzone-icon:hover {
  color: #ed7800;
  transition: all 0.3s linear;
}
.text-field--tool-bar .carzone-icon:first-child {
  margin-left: 0;
}
.text-field--tool-bar label,
.text-field--tool-bar .carzone-icon {
  margin-left: 25px;
}
.text-field--tool-bar .tool-bar__feedback a {
  color: #5677fb;
  font-size: 12px;
}
.text-field--tool-bar .tool-bar__feedback a .next-icon {
  margin-right: 6px;
}
.emoji-content.next-balloon {
  background-color: #fff;
  padding: 10px 0 10px 10px;
}
.emoji-content.next-balloon::after {
  background-color: #fff;
}
.emoji-content.next-balloon .face {
  cursor: pointer;
  text-align: center;
  font-size: 20px;
  padding: 5px 6px 0 5px;
  display: inline-block;
}
.member-content.next-balloon {
  padding: 0;
  box-shadow: 0 1px 3px 0 rgba(0, 21, 41, 0.08);
  border-radius: 8px;
  overflow: hidden;
}
.member-content.next-balloon::after {
  content: none;
}
.member-content.next-balloon .next-avatar-image {
  font-size: 14px;
}
.member-content.next-balloon .group-member {
  padding: 10px 8px;
  cursor: pointer;
  @include flex-center();
}
.member-content.next-balloon .group-member:hover,
.member-content.next-balloon .group-member.current {
  color: #ed7800;
}
.member-content.next-balloon .group-member + .group-member {
  border-top: 1px solid #e6e6e6;
}
.member-content.next-balloon .group-member-list {
  max-height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 130px;
}
.member-content.next-balloon .group-member--name {
  flex-grow: 1;
  margin-left: 8px;
  display: inline-block;
  width: 60px;
  @include ellipsis();
  vertical-align: middle;
}