@charset "utf-8";


#wrapper {/*width:600px;*/ margin:0px auto;}

.chat ul {margin: 0px;padding: 0px;list-style: none;}

.message-left .message-time {display:block; font-size:12px; text-align:left; padding-left:30px; padding-top:4px; color:#ccc; font-family:Courier;}
.message-right .message-time {display:block; font-size:12px; text-align:right; padding-right:20px; padding-top:4px; color:#ccc; font-family:Courier;}

.message-left {text-align:left; margin-bottom:10px; margin-left:50px;}
.message-left .message-text {max-width:80%; display:inline-block; background:#2d2d39; padding:0 20px 0 22px; font-size:13px; color:#FFFFFF; border-radius:8px;
  font-weight:300; line-height:18px; -webkit-box-shadow:0px 0px 10px 3px rgba(0,0,0,0.1); box-shadow:0px 0px 10px 3px rgba(0,0,0,0.1);}

.message-right { text-align:right; margin-bottom:10px; margin-right:50px;}
.message-right .message-text {display:inline-block; background:#f5f9ff; padding:0 22px 0 20px; font-size:13px; color:#333;
border-radius:8px; line-height:18px; font-weight:300; text-align:left; -webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.1);
box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.1);}

.message-text p {line-height:15px; padding:10px 0 8px 0;}

.chat { border-radius:30px; padding:0 20px 20px 20px;}
.chat-container { height:534px; overflow-y: scroll; padding-right: 16px; overflow: hidden;}

.spinme-right {display:inline-block; padding:15px 20px; font-size:14px; border-radius:30px; line-height:1.25em; font-weight:100; opacity:0.5;}
.spinme-left {display:inline-block; padding:15px 20px; font-size:14px; color:#ccc; border-radius:30px; line-height:1.25em; font-weight:100; opacity:0.5;}
.spinner { margin: 0; width: 30px; text-align: center;}
.spinner > div { width:10px; height:10px; border-radius:100%; display:inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both; border: solid 1px #631fa7; background:rgba(255,255,255,1);}
 
.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s;}
.spinner .bounce2 {  -webkit-animation-delay: -0.16s; animation-delay: -0.16s;}


li.message-right .message-text:before{content:""; width:50px; height:35px; background:url("../images/chat/user.png") no-repeat 0 0; float:right;
margin:0 -70px 0 0; background-size: contain; position: relative; top:0;}
li.message-left .message-text:before{content:""; width:50px; height:35px; background:url("../images/chat/emmie.png") no-repeat 0 0; float:left;
margin:0 0 0 -70px; background-size: contain;position: relative; top:0;}


@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0)
  }
  40% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

@media only screen and (max-width: 1023px){
	
	.chat-container { height:564px;}
}