/**index.wxss**/
page{
  background: #ccc;
}
.ub
{
	display: -webkit-box !important;
	display: box !important;
	position:relative;
}
.ub-f1
{
	position:relative;
	-webkit-box-flex: 1;
	box-flex: 1;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #000;
}

.info_list{padding: 0.8em;padding-bottom: 4em;box-sizing: border-box;}
.demo-container{display:flex;flex-direction:column; margin:0;width:100%; padding:0.2em 0.8em; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }
    .demo-container .demo-container-box-to {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
.demo-container .demo-container-left-box {
    display: flex;
    width: 3em;
    height: 3em;
}
        .demo-container .demo-container-left-box image {
            margin: 0;
            width: 100%;
            height: 100%;
            border-radius: 0.3em;
            overflow: hidden;
        }

    .demo-container .demo-container-right-box {
        display: flex;
        flex-grow:1;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
.demo-container .demo-container-title{float:left;width:100%; margin-bottom:0.2em; padding-left:0em; text-align:left;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.demo-container .demo-container-title image{float:left;width:1.2em;height:1.2em;vertical-align: middle;}
.demo-container .demo-container-title div{float:left; margin-left:0.2em; width:auto;}
.demo-container .webui-popover{float:left;width:85%; margin-top:0em; position:relative; padding-left:0.8em;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.demo-container .webui-popover .webui-popover-content{float:left;z-index:0;margin:0; padding:0; min-height:2.5em; line-height:2.5em; width:auto; max-width:100%; border-radius:0.4em;  border:1px solid #f1f1f1;background-color:#fff;box-sizing:border-box;}
.demo-container .webui-popover .webui-popover-content image{float:left;max-width:6em;margin:0; padding:0;border-radius:0.3em; overflow:hidden;}
.demo-container .webui-popover .webui-popover-content image.emojicon{float:none;width:2em;height:2em;vertical-align: middle;}
.demo-container .webui-popover .webui-popover-content image.gift{float:none;width:45px;height:45px;vertical-align: middle;}
.demo-container .webui-popover .webui-popover-content .audio{float:left; max-width:100%;}
.demo-container .webui-popover .webui-popover-content .audio image{float:left;margin-top:0.7em; width:1em; height:1em;}
.demo-container .webui-popover .webui-popover-content .audio div{float:left;text-align:left;}
.demo-container .webui-popover .webui-popover-content .audio div div.secondsfont{width:1em; height:1em; color:#000;}
.demo-container .webui-popover .webui-popover-content .audio div.yuanquan{position:absolute; top:1em; right:-1em; width:0.5em; height:0.5em;border-radius:50%; background-color:#FF0000; overflow:hidden;}
.demo-container .webui-popover .webui-popover-content .audio[isplayed="true"] div div.secondsfont{color:#000;}
.demo-container .webui-popover .webui-popover-content .audio[isplayed='true'] div.yuanquan{display:none;}

.demo-container .webui-popover .webui-popover-content .content{float:left;padding:0.5em 0.5em;box-sizing:border-box;color:#000;line-height:1.5em;}
.demo-container .webui-popover .webui-popover-content .content image{margin-top:0.1em;margin-bottom:0.1em;}
.demo-container .webui-popover .webui-popover-ico{ position:absolute;left:-0.12em;top:0.7em;z-index:1; width:1em;height:1em; background:url("data:image/image/png;base64,[encoded data, 4180 characters]") no-repeat 0 0;background-size:100% 100%;}

.demo-container .webui-popover-robox{float:right;margin-top:-2em;width:2em;}
.demo-container-time-box {
    display: flex;
    width: 100%;
}
.demo-container-time-box view{width:100%; padding:0.8em; text-align:center; box-sizing: border-box; border-radius:0.3em; color:#666}

.demo-container-right {
    display: flex;
    flex-direction:column;
    margin: 0;
    width: 100%;
    padding: 0.8em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.demo-container .demo-container-box-to {
    display: flex;
    flex-direction: row;
    width: 100%;
}
    .demo-container-right .demo-container-left-box {
        display: flex;
        width: 3em;
        height: 3em;
    }
        .demo-container-right .demo-container-left-box image {
            margin: 0;
            width: 3em;
            height: 3em;
            border-radius: 0.3em;
            overflow: hidden;
        }

    .demo-container-right .demo-container-right-box {
        display: flex;
        flex-grow:1;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
.demo-container-right .demo-container-title{float:right;width:100%; padding-right:0.8em; text-align:right;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.demo-container-right .webui-popover{float:right;width:85%; margin-top:0em; position:relative; padding-right:0.8em;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.demo-container-right .webui-popover .webui-popover-content{float:right;z-index:0;margin:0; padding:0; min-height:2.5em; line-height:2.5em; width:auto; max-width:100%; border-radius:0.4em;  border:1px solid #89be4f; background-color:#a8e563;box-sizing:border-box;}
.demo-container-right .webui-popover .webui-popover-content image{float:left;max-width:6em;margin:0; padding:0;border-radius:0.3em; overflow:hidden;}
.demo-container-right .webui-popover .webui-popover-content .audio{float:left; max-width:100%; position:relative;}
.demo-container-right .webui-popover .webui-popover-content .audio image{float:right;margin-top:0.7em; width:1em; height:1em;}
.demo-container-right .webui-popover .webui-popover-content .audio div{float:left;text-align:left;}
.demo-container-right .webui-popover .webui-popover-content .audio div div.secondsfont{float:right; width:1em; height:1em;  color:#000;}
.demo-container-right .webui-popover .webui-popover-content .audio[isplayed="true"] div div.secondsfont{color:#000;}
.demo-container-right .webui-popover .webui-popover-content .audio[isplayed='true'] div.yuanquan{display:none;}
.demo-container-right .webui-popover .webui-popover-content .content{float:left;padding:0.5em;box-sizing:border-box;color:#000;line-height:1.5em;}
.demo-container-right .webui-popover .webui-popover-content .content image{margin-top:0.1em;margin-bottom:0.1em;}
.demo-container-right .webui-popover-robox{float:left;margin-top:-2em; width:2em;}
.demo-container-right .webui-popover .webui-popover-ico{ position:absolute;right:-0.12em;top:0.7em;z-index:1; width:1em;height:1em; background:url("data:image/image/png;base64,[encoded data, 4408 characters]") no-repeat 0 0;background-size:100% 100%;}


.Hidden_box{ position: fixed;display: flex;align-items: center; justify-content: center; top:0; left:0; width:100%;height:100vh; background:rgba(0, 0, 0, 0.5);}
.Hidden_box_to{position: relative; padding: 8px; width:90%;height:auto; background-color: #fff; box-sizing: border-box; border-radius:0.5em;}
.Hidden_box_to.showemojicons_box{ position: absolute; bottom:0; width:100%;border-radius:0.5em 0.5em 0 0;}
.Hidden_box_to .close{position: absolute; right:0.5em; top:0.5em; width:1.5em; height:1.5em; padding:0.15em; background-color:#fff;border:1px solid #f1f1f1;border-radius:50%;box-sizing:border-box;}
.Hidden_box_to .close image{width:100%;height:100%;}
.Hidden_box_to .select_box_title{width:100%;height:2.5em; line-height: 2.5em; border-bottom:1px solid #f1f1f1;}
.Hidden_box_to .select_box{line-height:1.5em;}
.Hidden_box_to .select_box .emojicons{float: left; margin-top:0.3em; width: 12.5%; height:2em; text-align: center;}
.Hidden_box_to .select_box .emojicons image{width: 2em; height:2em;}
.Hidden_box_to .select_box .swiper_box0 {
  width: 100%;
  padding: 0;
  height: 11em;
}
.Hidden_box_to .select_box .swiper_box0 .wx-swiper-dots{bottom: 0em;}
.footer{
  position: fixed;
  bottom:0;
  left:0;
  height:2.8em;
  width: 100%;
  background-color: #fff;
  color: white;
  text-align: center;
  border-top: 1px solid #e1e1e1;
  overflow: hidden;
}
.footer .addchatbox {
  float: left;
  width: 100%;
  padding: 0.2em;
  box-sizing: border-box;
  overflow: hidden;
}
  .footer.mykf .addchatbox {
      height: 6em;
  }
.footer .addchatbox .addbody {
  height: 2.4em;
  box-sizing: border-box;
  overflow: hidden;
}
.footer.mykf .addchatbox .addbody {
  height: 6em;
}
      .footer .addchatbox .addbody textarea {
          padding: 0 0.2em;
          width: 99%;
          height: 2.4em;
          padding-top: 0.5em;
          padding-bottom: 0.5em;
          line-height:normal;
          border: 1px solid #dfdfdf;
          background-color: #f1f1f1;
          border-radius: 0.5em;
          box-sizing: border-box;
          overflow: hidden;
          color: #000;
          text-align: left;
      }
     .body_placeholder{
  color: #666;
}
.mybtn {
  background: linear-gradient(to right,#00B050,#00B050);
  color: #fff;
}
  .footer .addchatbox .addabtn {
      float:left;
      position:relative;
      margin: 0;
      width: 2.4em;
      height: 2.4em;
      text-align: center;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 0.5em;
  }
      .footer .addchatbox .addabtn image {
          margin-top: 0.2em;
          width: 2em;
          height: 2em;
      }
      .footer .addchatbox .addabtn#addabtn1 {
        background-color: #00B050;
        border-radius: 0.5em;
    }
.footer .addchatbox .addabtn0 {
  margin: 0;
  width: 3.5em;
  height:2.4em;
  line-height:2.4em;
  border-radius: 0.5em;
  text-align: center;
  background-color: #00B050;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.footer.mykf .addchatbox .addabtn {
  margin-top: 2.5em;
}
.footer.mykf .addchatbox .addabtn0 {
  margin-top: 2.9em;
}  