.messagesWrapScroll{
	border: 1px solid lightgrey;
	padding:10px;
	border-radius: 4px;
	height: 250px;
	overflow-y: scroll;
	margin-bottom: 10px;
}

.messagesWrap{
	padding-top: 35px;
}

.messagesWrap .chat-title{
	text-align: center;
	background-color: #337ab7;
	color: white;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 5px;
}

.messageWrap.incoming{
	text-align: left;
}

.messageWrap.outgoing{
	text-align: right;
}

.messageWrap .message{
	margin-bottom: 3px;
	padding: 5px 10px;
	border: 1px solid lightgrey;
	border-radius: 4px;
	display: inline-block;
	max-width: 90%;
	min-width: 55%;
	text-align: left;
}

.messageWrap .message{
	position: relative;
}

.messageWrap .message .details{
	display: none;
	position: absolute;
	top: -45px;
	right: 0;
	border: 1px solid lightgrey;
	border-radius: 4px;
	background-color: #F6E3CE;
	width: 150px;
	text-align: left;
	padding: 5px;
	height: 39px;
}

.messageWrap .message .details .arrow-down{
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #F6E3CE;
	
	position: absolute;
	top: 37px;
	left: 130px;
}

.messageWrap .message .details .arrow-down-shadow{
	width: 0; 
	height: 0; 
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 7px solid lightgrey;
	
	position: absolute;
	top: 37px;
	left: 129px;
}


.messageWrap.incoming .message .details{
	left: 0;
}

.messageWrap.incoming .message .details .arrow-down{
	left: 10px;
}

.messageWrap.incoming .message .details .arrow-down-shadow{
	left: 9px;
}

.messageWrap .message:hover .details{
	display: inline-block;
}

.messageWrap .message .owner,
.messageWrap .message .date{
	font-size: 8pt;
	font-weight: bold;
	font-style: italic;
	color: gray;
	white-space: nowrap;
}

.messageWrap.incoming .message{
	background-color: #D0F5A9;
	border: 1px solid #9AC969;
}

.messageWrap.outgoing .message{
	background-color: #CEE3F6;
	border: 1px solid #9DBBD7;
}

.chatResponseButton{
	margin-top: 2px;
}

.chatResponseButton .chatResponseDetails{
	position: relative;
}

.chatResponseButton .chatResponseDetails .message{
	position: absolute;
	top: -45px;
	left: 2px;
	border: 1px solid lightgrey;
	color: gray;
	border-radius: 4px;
	max-width: 300px;
	z-index: 200;
	background-color: #F5ECCE;
	padding: 5px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	
	display: none;
}

.chatResponseButton:hover .chatResponseDetails .message{
	display: inline-block;
}

.messageWrap .microDetail{
	font-size: 6pt;
	font-style: italic; 
	font-weight: bold;
}

.messageWrap.system {
	text-align: center;
}
.messageWrap.system .message {
	background-color: #D8D8D8;
	border: 1px solid #A4A4A4;
	font-size: 8pt;
	padding: 2px 8px;
}
.messageWrap.system .message .microDetail{
	margin: 0;
}

.button_font_size_selector .font_size_selector_wrap{
	position: relative;
}

.button_font_size_selector .font_size_selector{
	display: none;
	position: absolute;
	background-color: #FAFAFA;
	top: -130px;
	width: 45px;
	right: -13px;
	border: 1px solid gray;
	border-radius: 4px;
}

.button_font_size_selector:hover .font_size_selector{
	display: inline;
}

.button_font_size_selector .font_size_selector > div:hover{
	background-color: #BDBDBD;
}

#webChat.font_size_1 .message .text,
.font_size_selector .font_size_1{
	font-size: 8pt;
}
#webChat.font_size_2 .message .text,
.font_size_selector .font_size_2{
	font-size: 12pt;
}
#webChat.font_size_3 .message .text,
.font_size_selector .font_size_3{
	font-size: 16pt;
}
#webChat.font_size_4 .message .text,
.font_size_selector .font_size_4{
	font-size: 20pt;
}
#webChat.font_size_5 .message .text,
.font_size_selector .font_size_5{
	font-size: 24pt;
}