.chat {
    width: 400px;
}
.bubble {
    color: white;
    background-color: #0084FF;
    border-radius: 5px;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
}
.bubble::before {
    background-color: #0084FF;
    content:"\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform: rotate(29deg) skew(-35deg);
    -moz-transform: rotate(29deg) skew(-35deg);
    -ms-transform: rotate(29deg) skew(-35deg);
    -o-transform: rotate(29deg) skew(-35deg);
    -webkit-transform: rotate(29deg) skew(-35deg);
    width: 20px;
}
.bubbles {
    background-color: #F1F0F0;
    border-radius: 5px;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
}
.bubbles::before {
    background-color: #F1F0F0;
    content:"\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform: rotate(29deg) skew(-35deg);
    -moz-transform: rotate(29deg) skew(-35deg);
    -ms-transform: rotate(29deg) skew(-35deg);
    -o-transform: rotate(29deg) skew(-35deg);
    -webkit-transform: rotate(29deg) skew(-35deg);
    width: 20px;
}
.me {
    float: left;
    clear: both;
    margin: 5px 10px 5px 2px;
}
.me::before {
    left: -9px;
}
.you {
    float: right;
    clear: both;
    margin: 5px 2px 5px 10px;
}
.you::before {
    right: -9px;
}
.vc {
  outline: none;
  width: 100%;
  max-width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.4634;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
}
-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background-color:#F5F5F5;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border:0 solid #000}::-webkit-scrollbar-thumb{background:#3B5998}::-webkit-scrollbar-thumb:hover{background:#476EBF}::-webkit-scrollbar-thumb:active{background:#888;-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,.3)}.table-wrapper{max-height:270px;overflow-y:scroll}