@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.botui-container{
  font-size:14px;
  background-color:#fff;
  font-family:"Open Sans",sans-serif
}
.botui-messages-container{
  padding:10px 20px
}
.botui-actions-container{
  padding:10px 20px
}
.botui-message{
  min-height:30px
}
.botui-message-content{
  padding:7px 13px;
  border-radius:15px;
  color:#595a5a;
  background-color:#ebebeb
}
.botui-message-content.human{
  color:#f7f8f8;
  background-color:#919292
}
.botui-message-content.text{
  line-height:1.3
}
.botui-message-content.loading{
  background-color:rgba(206,206,206,.5);
  line-height:1.3;
  text-align:center
}
.botui-message-content.embed{
  padding:5px;
  border-radius:5px
}
.botui-message-content-link{
  color:#919292
}
.botui-actions-text-input{
  border:0;
  outline:0;
  border-radius:0;
  padding:5px 7px;
  font-family:"Open Sans",sans-serif;
  background-color:transparent;
  color:#595a5a;
  border-bottom:1px solid #919292
}
.botui-actions-text-submit{
  color:#fff;
  width:30px;
  padding:5px;
  height:30px;
  line-height:1;
  border-radius:50%;
  border:1px solid #919292;
  background:#777979
}
.botui-actions-buttons-button{
  border:0;
  color:#fff;
  line-height:1;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  padding:7px 15px;
  border-radius:4px;
  font-family:"Open Sans",sans-serif;
  background:#777979;
  box-shadow:2px 3px 4px 0 rgba(0,0,0,.25)
}
.botui-actions-text-select{
  border:0;
  outline:0;
  border-radius:0;
  padding:5px 7px;
  font-family:"Open Sans",sans-serif;
  background-color:transparent;
  color:#595a5a;
  border-bottom:1px solid #919292
}
.botui-actions-text-searchselect{
  border:0;
  outline:0;
  border-radius:0;
  padding:5px 7px;
  font-family:"Open Sans",sans-serif;
  background-color:transparent;
  color:#595a5a;
  border-bottom:1px solid #919292
}
.botui-actions-text-searchselect .dropdown-toggle{
  border:none!important
}
.botui-actions-text-searchselect .selected-tag{
  background-color:transparent!important;
  border:0!important
}
.slide-fade-enter-active{
  transition:all .3s ease
}
.slide-fade-enter,.slide-fade-leave-to{
  opacity:0;
  transform:translateX(-10px)
}
.dot{
  width:.5rem;
  height:.5rem;
  border-radius:.5rem;
  display:inline-block;
  background-color:#919292
}
.dot:nth-last-child(1){
  margin-left:.3rem;
  animation:loading .6s .3s linear infinite
}
.dot:nth-last-child(2){
  margin-left:.3rem;
  animation:loading .6s .2s linear infinite
}
.dot:nth-last-child(3){
  animation:loading .6s .1s linear infinite
}
@keyframes loading{
  0%{transform:translate(0,0);
    background-color:#ababab
    }
  25%{transform:translate(0,-3px)
    }
  50%{transform:translate(0,0);
    background-color:#ababab
    }
  75%{transform:translate(0,3px)
    }
  100%{transform:translate(0,0)}
}

/*
 * botui 0.3.9
 * A JS library to build the UI for your bot
 * https://botui.org
 *
 * Copyright 2019, Moin Uddin
 * Released under the MIT license.
*/
a.botui-message-content-link:focus {
  outline: thin dotted
}

a.botui-message-content-link:focus:active, a.botui-message-content-link:focus:hover {
  outline: 0
}

form.botui-actions-text {
  margin: 0
}

button.botui-actions-buttons-button, input.botui-actions-text-input {
  margin: 0;
  font-size: 100%;
  line-height: normal;
  vertical-align: baseline
}

button.botui-actions-buttons-button::-moz-focus-inner, input.botui-actions-text-input::-moz-focus-inner {
  border: 0;
  padding: 0
}

button.botui-actions-buttons-button {
  cursor: pointer;
  -webkit-appearance: button
}

.botui-app-container {
  width: 100%;
  height: 100%;
  line-height: 1
}

.botui-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden
}

.botui-message {
  margin-top: 10px;
  margin-bottom:10px
  min-height: 20px
}

.botui-message:after {
  display: block;
  content: "";
  clear: both
}

.botui-message-content {
  width: auto;
  max-width: 85%;
  display: inline-block
}

.botui-message-content.human {
  float: right
}

.botui-message-content iframe {
  width: 100%
}

.botui-message-content-image {
  margin: 2px 0;
  display: block;
  max-width: 200px;
  max-height: 200px
}

.botui-message-content-link {
  text-decoration: underline
}

.profil {
  position: relative;
  border-radius: 50%
}

.profil.human {
  float: right;
  margin-left: 0
}

.profil.agent {
  float: left;
  margin-right: 0
}

.profil>img {
  width: 26px;
  height: 26px;
  border: 1px solid #e8e8e8
}

.profil>img.agent {
  content: url(http://decodemoji.com/img/logos/blue_moji_hat.svg);
  border-radius:50%
}
button.botui-actions-buttons-button{
  margin-top:10px;
  margin-bottom:10px
}
button.botui-actions-buttons-button:not(:last-child){
  margin-right:10px
}
@media (min-width:400px){
  .botui-actions-text-submit{
    display:none
  }
}

.botui.botui-container::-webkit-scrollbar {
  width: 0 !important;
}
/* 按钮动效 */
.facemain { font-size: 100%; 	padding: 0; margin: 0;}

/* Reset */
.facemain *,
.facemain *:after,
.facemain *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.facemain{
  height: 250px;
  width:300px;
  margin: 0 auto;
  border-radius: 10px;
  vertical-align:middle;
  display:table-cell;
	background: #95C7E0;
	color: #D5D6E2;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}
.facemain a{ color: rgba(76, 78, 163, 0.034);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}
.facemain a:hover,a:focus{color:#335f99;text-decoration: none;}

.facemain figure {
  width: 200px;
  height: 60px;
  margin: 50px auto;
  cursor: pointer;
  perspective: 500px;
  -webkit-perspective: 500px;
}

.facemain figure div {
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: 0.25s;
  -webkit-transition: 0.25s;
}

.facemain figure:hover div {
  transform: rotateX(-90deg);
}

.facemain span.face {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  border: 5px solid #fff;
  font-family: 'Source Sans Pro',sans-serif;
  line-height: 50px;
  font-size: 17pt;
  text-align: center;
  text-transform: uppercase;
}

.facemain span.face:nth-child(1) {
  color: #fff;
  transform: translate3d(0, 0, 30px);
  -webkit-transform: translate3d(0, 0, 30px);
}

.facemain span.face:nth-child(2) {
  color: #094b2c;
  background: #fff;
  transform: rotateX(90deg) translate3d(0, 0, 30px);
  -webkit-transform: rotateX(90deg) translate3d(0, 0, 30px);
}