/* Set the space between it and chatmessagediv in chatmessagediv, 
	that way we don't need to worry about whether chatuserrecent is visible or not */
.chatuserrecent {
	padding-right: 0px;
}

/* If we hide chatuserrecent then let chatmessagediv be the full width */
.chatuserrecent.hidden + .chatmessagediv {
	width: 100%;
}

/* Width to 100% minus the left and right values, to prevent it to taking over the margin */
.chatmessagediv > div {
	right: 15px;
	left: 15px;
	width: auto !important;
}

.chatsendrow {
	left:0px; 
	right:0px; 
	bottom:0px; 
	height:91px;
	position: absolute;
}

.messagearea {
	resize: none; 
	width: calc(100% - 160px - 10px - 4px); 
	color: #000; 
	font-weight: normal;
}

.chatsend {
	width: 160px; 
	margin-left:10px;
	vertical-align:top;
}

.chatusermessages {
	height:calc(100% - 41px); /* 41px is height of panel-heading */
	overflow-x:auto;
}

.chatmessage {
	border-radius: 10px;
	width: 80%;
}

.chatmessage.mymessage{
	float: left;
	background: antiquewhite;
}

.chatmessage.othermessage{
	float: right;
	background: aliceblue;
}

.chatmessage .chattext {
	white-space: pre-line;
}

span.new {
	margin-left: 5px;
}