File: public/css/messenger-tool.css

#id_melismessenger_tool #id_melismessenger_tool_content #chat-form{
    margin-right: 8px;
}

#id_melismessenger_tool #id_melismessenger_tool_content .widget-chat{
	padding-bottom: 0px !important;
}

#id_melismessenger_tool #id_melismessenger_tool_content .widget{
	margin-bottom: 0px !important;
}

#id_melismessenger_tool_content #sendMsgForm #btn-send-message{
	height: 166px;
	width: 100%;
    padding: 1px !important;
}

#convo-content #chat-container{
    height: 455px;
    overflow-y: auto;
}

#convo-content #chat-container .my-msg{
	background: #e61c23;
    border-radius: 17px;
    color: #fff;
    padding: 10px;
}

#convo-content #chat-container .my-msg a{
	color: #ffffff;
}

#convo-content .chat-contact-msg{
	margin-top: 30px;
	padding: 10px;
}

#convo-content .chat-contact-msg img{
	max-width: 100%;
	height: auto;
}

#convo-content .chat-contact-name{
	position: absolute;
    left: 75px;
    top: 35px;
    color: #932e2a;
}

.widget-chat .media small.author{
	width:auto !important;
}

#convo-content #convo-msg{
	text-align:center;
	padding:20px;
}

#convo-content #convo-header #convo-header-content{
	padding:20px;
	text-align:center;
	width:100%;
	border-bottom:1px solid #ebebeb;
}

#convo-content #load-more-msg{
	width:100%;
	text-align:center;
}

#compose-convo{
	width:100%;
	margin:auto;
}

#contacts-container{
	overflow: hidden !important;
}

#contacts-container #contact-header{
	width:100%;
	background:#424242;
	padding:10px;
	color:#fff;
}

#contacts-container #contact-list{
	max-height: 645px;
	overflow: auto;
}

#contacts-container #contact-list .selectContact{
	cursor: pointer;
	display: none;
}

#contacts-container #contact-list .thumb.pull-left{
	margin-top:-6px;
	padding: 3px;
	margin-right: 10px;
}

#contacts-container .select-contacts {
	margin-top: 10px;
}

#melis-messenger-messages{
	width: 270px;
	max-height: 250px;
	overflow: auto;
	position: absolute;
}

#melis-messenger-messages .user-name{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#melis-messenger-messages li{
	border: 0;
	padding: 10px;
	width: 100%;
}

#melis-messenger-messages img{
	margin-top: 18px;
	margin-right: 15px;
}

#messenger-msg-cont{
	max-height: 25px;
    overflow: hidden;
}

#messenger-msg-cont #messenger-msg{
	display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
	margin-top: -15px;
}

#contact-list #show-empty-contact{
	text-align: center;
}

#contact-list #messenger-msg-cont #messenger-msg{
	margin-top: 0px !important;
}

#contact-list #messenger-msg-cont #messenger-msg blockquote,
#contact-list #messenger-msg-cont #messenger-msg pre{
	margin-top: -9px !important;
}

#messenger-msg-cont span#messenger-msg img{
	width: 20px !important;
	height: 20px !important;
	border-radius: 100%;
}

.glyphicons.comments.cs-fa i:before {
    font-family: "Fontawesome";
	content: "\f075";
}

.msg-chat-no-padding{
	margin-left: 0 !important;
}

.msg-chat-no-padding [class*="col-"],  /* Elements whose class attribute begins with "col-" */
.msg-chat-no-padding [class^="col-"] { /* Elements whose class attribute contains the substring "col-" */
	padding-left: 0;
	padding-right: 0;
}

.tokenize-dropdown.dropdown .dropdown-menu {
	padding: 0;
}

.tokenize-dropdown.dropdown .dropdown-menu .dropdown-item.active, 
.tokenize-dropdown.dropdown .dropdown-menu .dropdown-item:active,
.list-group-item.active {
	background-color: #e61c23;
	border-color: #e61c23;
}

.tokenize-dropdown.dropdown .dropdown-menu > li {
	height: 40px !important;
}

/* changes by: Junry prior to bootstrap 4 jquery 3 */
#chat-container .media {
	display: block;
}
#id_melismessenger_tool_contact .thumb {
	margin-right: 1rem;
}
.widget-chat .media small.date {
	text-align: left;
}
#id_meliscore_user_profile_tabs .nav-tabs li.active a,
#id_meliscore_user_profile_tabs .nav-tabs li.active a.active {
	border: none;
}
#id_melismessenger_tool_content #sendMsgForm #btn-send-message {
	height: 198px;
	width: 52px;
}

.user-msg-block .date {
	text-align: right !important;
}

.contact-msg-block .date {
	text-align: left;
}

.selectContact .media-msgrBody .text-danger {
	color: #72af46 !important;
}

@media only screen and (min-width: 992px) and (max-width: 1122px) {
	#sendMsgForm #btn-send-message{
		height: 209px !important;
	}
}
@media only screen and (max-width: 767px) {
	#sendMsgForm #btn-send-message{
		height: 50px !important;
	}
	#melis-messenger-messages img {
		margin-top: 0;
		margin-right: 1rem;
	}
	#messenger-msg-cont {
		margin-top: 1rem;
	}
}
@media only screen and (min-width: 992px) and (max-width: 1375px) {
	#compose-convo{
		font-size: 0px;
	}

	#compose-convo i {
		font-size: 15px;
	}
}