/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 13-jun-2016, 13:30:52
    Author     : jawed
*/


/* Pages */
.chatapp-container{
  width: 90%;
  height: 500px;
  display: block;  
}

.consultant-container.chatapp-container{
  width: 100%;
  height: 500px;
  display: block;  
}

.chatapp-messages {
  height: 80%;
  width: 100%;
  padding-bottom: 20px;
  border: 1px solid red;
}

/* Messages */
ul.messages {
  font-size: 150%;
}

/* countdown */
.chatapp-timelimit {
    height: 30px;
    border: 1px solid #fa6607;
    background: #fa6607;
}

.chatapp-container.consultant-container .chatapp-timelimit #countdown {
    float: left;
    padding: 10px;
    color: #fff;
}

#countdown .tijd-loopt {
    color: #fff;
}

#countdown .tijd-is-op {
    color: red;
}

.chatapp-container.consultant-container .chatapp-timelimit #action .button.button-primary {
    border: 1px solid #fff;
    color: #fff;
    padding: 2px 5px;
    margin-left: 4px;
}

.chatapp-container.consultant-container .chatapp-timelimit #action {
    float: right;
    padding: 10px;
    color: #fff;
}

.chatapp-log {
  color: gray;
  font-size: 70%;
  margin: 5px;
  text-align: center;
}


.chatapp-list{
  height: 96%;
  margin: 35px 0 0 0;
  overflow-y: scroll;
  padding: 10px 20px 10px 20px;
  list-style: outside none none;
}

.chatapp-message.typing .messageBody {
  color: gray;
}

.chatapp-username {
  font-weight: 700;
  overflow: hidden;
  padding-right: 15px;
  text-align: right;
}

.user-customer {
    color: #686d6f;
}

.user-medium {
    color: #fa6607;
}

body.mediums-chat-page .col-md-12.col-sm-12.col-xs-12 p {
    color: #fff;
    padding-top: 6px;
}

#countdown {
    padding-left: 15px;
}

/* Input */
.chatapp-input { 
    height: 50px;
}
.chatapp-input .chatapp-inputMessage {
  font-size: 100%;
  border: 1px solid #a5a5a5;
  bottom: 0;
  height: 100%;
  left: 0;
  outline: none;
  padding-left: 10px;
  right: 0;
  width: 100%;
}