@charset "utf-8";
*{ padding:0; margin:0;}
ul,li{ list-style-type:none;}
input::-webkit-input-placeholder {
  color: #ccc !important
}

input:-moz-placeholder {
  color: #ccc !important
}

input::-moz-placeholder {
  color: #ccc !important
}

input:-ms-input-placeholder {
  color: #ccc !important
}

textarea:-ms-input-placeholder {
  color: #ccc !important
}

.opacity-layer {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  display: none
}

.chat-layer {
  width: 760px;
  padding-bottom: 20px;
  border-radius: 5px;
  background: #fff;
  position: fixed;
  left: 30%;
  top: 100px;
  z-index: 100;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
  display: none
}

.top {
  width: 760px;
  height: 66px;
  border-bottom: solid 1px #ddd;
  position: relative;
  padding-top: 15px;
  text-align: center
}

.top span {
  width: 100%;
  height: 34px;
  display: block;
  line-height: 34px;
  font-size: 20px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif
}

.top span i {
  width: 12px;
  height: 12px;
  display: inline-block;
  background: #54d332;
  border: solid 1px #3cad1e;
  border-radius: 100px;
  margin-left: 8px
}

.top p {
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  color: #666
}

.top p em {
  margin-right: 40px
}

.top p em i {
  display: inline-block;
  margin-right: 6px
}

.top p em i.user {
  width: 12px;
  height: 13px;
  background: url(/media/sets/trade/user.png) left top no-repeat
}

.top p em i.address {
  width: 11px;
  height: 13px;
  background: url(/media/sets/trade/address.png) left top no-repeat
}

.top .close {
  width: 16px;
  height: 16px;
  display: block;
  background: url(/media/sets/trade/close.png) left top no-repeat;
  position: absolute;
  right: 23px;
  top: 26px
}

.top .close:hover {
  background: url(/media/sets/trade/close-cur.png) left top no-repeat
}

.msg-box {
  height: 386px;
  max-height: 386px;
  overflow-y: auto;
  background: #f9f9f9;
  border-bottom: solid 1px #ddd;
  position: relative
}

.send-box {
  padding-top: 20px
}

.send-box ul {
  margin-left: 20px
}

.send-box ul li {
  float: left;
  width: 321px;
  margin-right: 30px;
  height: 32px;
  line-height: 32px;
  position: relative
}

.send-box ul li span {
  color: #e60000;
  position: absolute;
  right: 10px;
  font-size: 14px;
  top: 0
}

.send-box ul li label {
  width: 15px;
  color: #e60000;
  display: block;
  float: left;
  margin-top: 4px
}

.send-box ul li .txt {
  width: 295px;
  border: solid 1px #ddd;
  height: 30px;
  line-height: 30px;
  padding-left: 9px;
  border-radius: 3px;
  outline: 0
}

.send-box ul li .txt.error {
  border: solid 1px #e60000
}

.checkBox {
  margin-left: 20px;
  height: 42px;
  line-height: 42px;
  font-size: 14px;
  color: #666
}

.checkBox span {
  margin-left: 14px
}

.checkBox span .check {
  vertical-align: -2px;
  margin-right: 6px
}

.send-area {
  margin-left: 20px;
  width: 718px;
  height: 58px;
  border: solid 1px #ddd;
  border-radius: 3px
}

.leftarea {
  width: 636px;
  height: 36px;
  margin: 11px 10px;
  float: left
}

.send-area .area {
  width: 636px;
  height: 36px;
  max-height: 36px;
  overflow-y: auto;
  resize: none;
  outline: 0;
  border: 0;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 18px;
  font-size: 14px;
  color: #333
}

.send-area .send-btn {
  width: 40px;
  height: 40px;
  display: block;
  background: url(/media/sets/trade/send-btn.png) left top no-repeat;
  float: left;
  margin: 9px 0 0 10px
}

.send-area .send-btn:hover {
  background: url(/media/sets/trade/send-btn.png) left top no-repeat;
  cursor: pointer
}

.send-area .send-btn.default,
.send-area .send-btn.default:hover {
  background: url(/media/sets/trade/send-default.png) left top no-repeat;
  cursor: default
}

.mCSB_scrollTools {
  display: block !important
}

.online-msg {
  padding: 22px 20px;
  position: relative
}

.online-msg li {
  position: relative;
  margin-bottom: 20px;
  width: 470px
}

.online-msg li .portrait {
  width: 62px;
  height: 62px;
  border-radius: 100px;
  border: solid 1px #d8dad7;
  position: absolute
}

.online-msg li span {
  width: 470px;
  height: 28px;
  display: block;
  line-height: 28px;
  font-size: 14px;
  color: #999
}

.online-msg li span em {
  font-size: 14px;
  color: #666
}

.online-msg li span .startTime {
  font-style: normal
}

.online-msg li .txt-box {
  padding: 9px 10px;
  max-width: 450px;
  line-height: 20px;
  position: relative;
  float: left;
  font-size: 14px;
  color: #666;
  border: solid 1px #d8dad7;
  border-radius: 5px;
  background: #fff
}

.online-msg li .txt-box:after {
  width: 8px;
  height: 13px;
  content: "";
  display: block;
  position: absolute;
  top: 14px
}

.online-msg li.left-msg {
  float: left;
  padding-left: 81px
}

.online-msg li.right-msg {
  float: right;
  padding-right: 81px
}

.online-msg li.left-msg .portrait {
  left: 0;
  top: 0
}

.online-msg li.right-msg .portrait {
  right: 0;
  top: 0
}

.online-msg li.left-msg span {
  margin: 1px 0 0 7px;
  text-align: left
}

.online-msg li.left-msg span em {
  margin-right: 22px
}

.online-msg li.right-msg span {
  margin: 1px 7px 0 0;
  text-align: right
}

.online-msg li.right-msg span em {
  margin-left: 22px
}

.online-msg li.right-msg .txt-box {
  background: #3ab643;
  border: solid 1px #2ba034;
  color: #fff;
  float: right;
  word-break: break-all;
  word-wrap: break-word
}

.online-msg li.left-msg .txt-box:after {
  background: url(/media/sets/trade/left-icon.png) left top no-repeat;
  left: -8px
}

.online-msg li.right-msg .txt-box:after {
  background: url(/media/sets/trade/right-icon.png) left top no-repeat;
  right: -8px
}
.sendInfo{ overflow:hidden; padding-bottom:4px;}
.chat-btn{ background:none !important; color:#6C7C93 !important;}
@media screen and (max-height:666px) {
  .msg-box {
    height: 306px;
    max-height: 306px
  }
}