.messaging-modal {
	padding: 0px;
	background: #FFF;
}

.messaging-modal p.messaging-errors {
	font-size: 13px !important;
	line-height: 16px !important;
	color: red !important;
	margin: 15px 0 10px 70px !important;
	padding: 0 !important;
}

.messaging-modal-form h2 {
	color: #FFF !important;
	font-size: 20px !important;
	line-height: 28px !important;
	background: #FF7C33;
	margin: 0 !important;
	padding: 25px 0 25px 60px !important;
	text-transform: uppercase !important;
	font-weight: bold !important;
	position: relative !important;
}

.messaging-modal-form h2 .open-messaging-form {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
}

.messaging-modal-form h2 i {
	color: #FFF;
}

.messaging-modal-form p {
	color: #999 !important;
	font-size: 16px !important;
	line-height: 22px !important;
	margin: 5px 0 15px !important;
	padding: 0 !important;
	font-weight: normal !important;
	font-style: italic !important;
}

.conversation-tab .messaging-modal {
	margin-bottom: 30px;
}

.replyform-placeholder .messaging-modal {
	margin-bottom: 0px;
	padding-bottom: 0;
}

.messaging-modal .ejmessage {
	display:inline-block;
	width: calc(100% - 100px);
	min-height: 95px;
	border: 1px solid #EEE;
	padding: 10px 15px;
	color: #999;
	font-size: 12px;
	line-height: 17px;
	float: right;
	margin-right: 40px;
	resize: none;
}

#wp-ejmessage-editor-wrap {
	margin: 40px 40px 5px;
}

.messaging-editor-placeholder {
	width: 85%;
	float: right;
	border: 1px solid #CCC;
	margin-right: 40px;
	max-height: 400px;
	overflow-y: scroll;
	overflow-x: hidden;
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

.messaging-editor-placeholder::-webkit-scrollbar {
  display: none;
}

.messaging-editor-placeholder div.mce-toolbar-grp {
	background: #FFF !important;
	border: 0px !important;
}

.messaging-editor-placeholder .mce-statusbar > div {
	display: none !important;
}

.messaging-editor-placeholder .mce-top-part::before {
	display: none !important;
}

.direct-messages .mce-top-part {
	display: none !important;
}

.mce-first.mce-last .mce-btn-group .mce-btn.mce-primary button:before {
	content: "\f00c";
	font-family: "FontAwesome";
}
.mce-first.mce-last .mce-btn-group .mce-btn.mce-primary button i {
	display: none !important;
}
.mce-first.mce-last .mce-btn-group .mce-btn.mce-primary {
	background: #f8931f !important;
	border-color: transparent !important;
	box-shadow: none !important;
	margin-right: 5px !important;
	float: right;
}
.full-messaging-form #mceu_30,
.full-messaging-form div.mce-inline-toolbar-grp.mce-arrow-left:before,
.full-messaging-form div.mce-inline-toolbar-grp.mce-arrow-left:after {
	display: none !important;
}

.messaging-modal .ejmessage div {
	color: #999;
	font-size: 12px;
	line-height: 17px;	
}

.messaging-modal .ejmessage em {
	color: #999;
}

.messaging-modal.bordered {
	border: 1px solid #999;
}

.messaging-modal .button-and-chars {
	margin: 0px 40px 40px 85px;
}

.messaging-modal .charcounter {
	font-size: 11px;
	text-align: right;
	color: #666;
}

.messaging-modal .charcounter.overage,
.messaging-modal .charcounter.overage .number {
	color: red;
}

.messaging-modal .charactercount-errors {
	display: inline-block;
	clear: both;
	display: none;
	color: red;
	font-style: italic;
	font-size: 12px;
	line-height: 12px;
	margin:  5px 0 0;
}

.messaging-modal .charactercount-errors a {
	text-decoration: underline;
	color: red;
	font-size: 12px;
	line-height: 12px;
}

.messaging-actions {
	position: relative;
}

.messaging-actions .actionable {
	display: none;
	margin-top: 15px;
}

.modal-input-wrapper {
	margin: 10px 40px 10px 60px;
	padding: 10px 10px 5px;
	border-bottom: 1px solid #EEE;
}

.modal-input-wrapper span {
	color: #FF7C33;
	font-size: 16px;
	line-height: 20px;
	display: inline-block;
	width: 110px;
}

.modal-input-wrapper.msg-title span {
	width: 60px;
}

.modal-input-wrapper.msg-title input {
	width: calc(100% - 70px);
	float: right;
	padding: 0;
	margin: 0 !important;
	font-size: 14px;
	line-height: 20px;
	color: #999;
	border: 0px !important;
	-webkit-appearance: none;
}

.conversation-topics-wrapper {
	float: right;
	width: calc(100% - 120px);
	position: relative;
	font-size: 14px;
	line-height: 18px;
}

/* The container must be positioned relative: */
.custom-ej-select-msgs {
	position: relative;
}

.custom-ej-select-msgs select {
	display: none; /*hide original SELECT element: */
}

/* Style the arrow inside the select element: */
.select-selected:after {
	display: none; /* Hide the arrow for now */
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
	color: #CCC;
	padding: 2px 10px;
	cursor: pointer;
}
.select-items div,.select-selected.nodefault {
	color: #999;
}

.select-items div {
	padding: 5px 10px;
	font-size: 12px;
	line-height: 16px;
}

/* Style items (options): */
.select-items {
	position: absolute;
	background-color: #FFF;
	top: 28px;
	left: 0;
	right: 0;
	z-index: 99;
	padding: 5px;
	border: 1px solid #DDD;
	border-top: 0px;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

#conversation_topics {
	padding: 0;
	margin: 0 !important;
	font-size: 14px;
	line-height: 20px;
	color: #999;
	border: 0px !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
    height: 100%;
    cursor: pointer;
}


.modal-input-wrapper #firstname,
.modal-input-wrapper #lastname {
	width: calc(50% - 35px);
	float: left;
	padding: 0;
	margin: 0 !important;
	font-size: 14px;
	line-height: 20px;
	color: #999;
	border: 0px !important;
	-webkit-appearance: none;
}

.ejmessage-wrapper {
	margin-top: 30px;
}
 
.direct-messages-wrapper > .direct-messages .ejmessage-wrapper {
	margin-top: 0px;
	position: absolute;
	width: 100%;
	bottom: 0;
}

.direct-messages-wrapper > .direct-messages .modal-input-wrapper {
	position: absolute;
	width: 100%;
	bottom: 220px;
	margin: 0;
}

span.current-user-image {
	height: 30px; 
	width: 30px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	border-radius: 50%;
	margin-left: 20px;
}

.messaging-actions input[type="text"],
#msg_targets {
	padding: 5px;
	border: 1px solid #CCC;
	font-size: 14px;
	line-height: 14px;
	color: #999;
	width: 100%;
}

.user-search-wrapper {
	display: block;
	border-bottom: 1px solid #CCC;
	color: #f7931e;
	font-weight: bold;
	margin: 20px 20px 5px;
}

#msg_targets {
	border: 0px !important;
	width: 90%;
	font-family: "Open Sans";
	font-style: italic;
}

#msg_title {
	margin-bottom: 10px;
	border: 1px solid #CCC;
}

#msg_title::placeholder {
	color: #CCC;
}

.messaging-actions span.icon {
	width: 30px;
	height: 30px;
	display: inline-block;
	font-size: 24px;
	color: #999;
	cursor: pointer;
	margin-right: 10px;
	opacity: 0.7;
	transition: 200ms;
	position: relative;
}

.messaging-actions span.icon:before {
	position: absolute;
	top: 0;
	left: 2px;
	width: 100%;
	height: 100%;
	display: block;
}

.messaging-actions span:hover {
	opacity: 1;
	transition: 200ms;
}

.messaging-actions span.active {
	color: #ea973e;
}

.messaging-actions span.audience:before {
	font-family: "FontAwesome";
	content: "\f1fa";
}

.messaging-actions span.image:before {
	font-family: "FontAwesome";
	content: "\f03e";
}

.messaging-actions .sendit {
	display: inline-block;
	color: #ea973e;
	padding: 0px 0 5px 15px;
	font-size: 18px;
	line-height: 18px;
	cursor: pointer;
	text-transform: uppercase;
	font-weight: 700;
	border: 0px solid #ea973e;
	transition: 500ms;
	float: right;
	margin: 20px 0 0;
}

.messaging-actions .sendit i {
	color: #ea973e;
}

.messaging-actions .sendit:not(.disabled):hover i {
	color: green;
}

.messaging-actions .sendit:not(.disabled):hover {
	color: green;
	text-decoration: none;
	transition: 150ms;
}

.messaging-actions .sendit.disabled {
	opacity: 0.5;
}

.messaging-actions .sendit.disabled:hover {
	text-decoration: none;
}

.message-typeahead {
	opacity: 0.5;
	min-height: 50px;
	width: 200px;
	z-index: -1;
}

.message-typeahead span {
	color: #FFF !important;
}

.atted {
	color: blue;
	display: inline-block;
}

.atted:hover {
	background: red;
}

.message-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 99999999;
	background: rgba(255,255,255,0.75);
}

.messaging-modal.modal {
	width: 640px;
	position: absolute;
	left: calc(50% - 320px);
	top: 100px;
	background: #FFF;
	padding: 30px;
	border: 1px solid #999;
	border-radius: 3px;
	z-index: 100000000;
}

.ej-message-loading {
	position: absolute;
	padding-top: 20%;
	text-align: center;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(255,255,255,0.75);
}

.message-content {
	margin: 0 0 20px;
	border: 1px solid #999;
	padding: 15px;
}

.message-content .reply {
	display: inline-block;
	padding: 5px;
	float: right;
}

.message-content .reply i {
	color: #ea973e;
	font-size: 16px;
}

.audience-search {
	display: none;
	position: absolute;
	font-size: 13px;
	line-height: 15px;
	padding: 10px;
	border: 1px solid #999;
	border-radius: 3px;
	background: #FFF;
}

.audience-target {
	display: block;
	padding: 5px 10px;
	color: blue;
	cursor: pointer;
}

.conversations-header {
	margin: 0 0 30px;
}

.conversations-header h1 {
	font-size: 40px !important;
	line-height: 45px !important;
	font-weight: 700 !important;
	padding: 0 !important;
	text-transform: uppercase;
	font-family: "Open Sans" !important;
	margin: 0 0 10px !important;
}

.conversations-header p {
	font-size: 18px !important;
	line-height: 24px !important;
	color: #333 !important;
	font-style: italic !important;
	font-family: "Libre Baskerville" !important;
	margin: 0 !important;
	padding: 0 !important;
}

.conversation-tabs {
	width: 240px;
	float: left;
}

.conversation-tabs span,
.conversation-tabs span a {
	display: block;
	margin: 0 0 10px;
	cursor: pointer;
	font-size: 16px;
	line-height: 20px;
	font-style: italic;
	color: #333;
	font-family: "Libre Baskerville";
}

.conversation-tabs span {
	position: relative;
}

.conversation-tabs span .indicator {
	height: 20px;
	width: 20px;
	background: #f7931e;
	font-size: 11px;
	line-height: 20px;
	font-weight: bold;
	display: block;
	text-align: center;
	border-radius: 50%;
	position: absolute;
	left: 126px;
	top: 0px;
	color: #FFF;
	font-style: none;
	font-family: "Open Sans";
}

.conversation-tabs span.active {
	color: #F9872A;
}

.conversation-tab-groups {
	/*float: right;*/
	margin: 0 auto;
	width: calc(100% - 240px - 20px);
	padding-bottom: 60px;
}

.targets-wrapper {
	position: relative;
}

.targets-wrapper .dm-target-wrapper {
	margin: 0 20px;
}

.targets-wrapper .target-list {
	position: absolute;
	width: 100%;
	height: 200px;
	overflow: auto;
	background: #FFF;
/*	border: 1px solid #CCC;
	border-top: 0;
	border-radius: 0 0 3px 3px;
*/	border-bottom: 1px solid #DDD;
	top: 30px;
	left: 0;
	z-index: 99;
	padding: 5px 30px 0px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
	display: none;
}

.targets-wrapper .target-list::-webkit-scrollbar {
	display: none;
}

.targets-wrapper .target-list a {
	display: block;
	width: auto;
	padding: 0px 8px 3px 3px;
	background: #FFF3E9;
	color: #333;
	font-size: 12px;
	line-height: 16px;
	margin: 0 0 3px;
	float: left;
	clear: both;
}

.targets-wrapper .target-list a:hover {
	text-decoration: none;
	color: #000;
}

.targets-wrapper .target-list a span {
	display: inline-block;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	overflow: hidden;
	background-position: center;
	background-repeat: none;
	background-size: cover;
	position: relative;
	top: 4px;
	margin-right: 5px;
}

.ejmessage .a-target,
.dm-target {
	display: inline-block;
	background: #FFF3E9;
	cursor: pointer;
	padding: 3px 5px;
	font-size: 0.8em;
	position: relative;
}

.dm-target {
	margin: 0 5px 5px 0;
}

.dm-target .dm-target-img {
	display: inline-block;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	overflow: hidden;
	background-position: center;
	background-repeat: none;
	background-size: cover;
	position: relative;
	top: 4px;
	margin-right: 5px;
}

.ejmessage .a-target:hover:after,
.dm-target:hover:after {
	content: "x";
	position: absolute;
	font-size: 12px;
	line-height: 14px;
	display: block;
	height: 14px;
	width: 14px;
	position: absolute;
	font-weight: bold;
	color: #FFF;
	background: #f7931e;
	display: inline-block;
	border-radius: 50%;
	top: -4px;
	right: -4px;
	text-align: center;
}

.direct-messages-wrapper {
	border-top: 1px solid #AAA;
	position: relative;
}

.direct-messages-wrapper .message-users {
	width: 35%;
	float: left;
	overflow-y: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
	height: 580px;
}

.direct-messages-wrapper .message-user {
	cursor: pointer;
	transition: 250ms;
}

.direct-messages-wrapper .message-user:hover {
	transition: 250ms;
	background: rgba(255,255,255,0.5);
}

.direct-messages-wrapper .direct-messages {
	width: 65%;
	float: right;
	background: #FFF;
	height: 580px;
	overflow: hidden;
	position: relative;
}

.msg-scroll-wrapper {
	height: 390px;
	position: absolute;
	top: 0px;
	left: 0;
	overflow-y: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
	width: 100%;
}

.msg-scroll-wrapper.showing-group {
	height: 300px;
	top: 50px;
}

.direct-messages-wrapper .group-details {
	height: 50px;
	border-bottom: 1px solid #CCC;
	padding: 10px 10px 10px 30px;
}

.direct-messages-wrapper .group-details.has-extended {
	cursor: pointer;
}

.direct-messages-wrapper .group-details .user-images {
	display: inline-block;
	float: left;
}

.direct-messages-wrapper .group-details .names {
	display: inline-block;
	font-size: 12px;
	line-height: 30px;
	color: #F9872A;
	float: left;
	margin-left: 15px;
	max-width: 75%;
	white-space: nowrap;
}

.direct-messages-wrapper .group-details .user-images span {
	height: 30px; 
	width: 30px;
	margin-left: -10px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	border: 1px solid #F9872A;
	border-radius: 50%;
}

.direct-messages-wrapper .group-extended-details .grouped-user-detail {
	font-size: 12px;
	line-height: 30px;
	color: #F9872A;
	padding: 5px;
}

.direct-messages-wrapper .group-extended-details .grouped-user-detail .img {
	height: 30px; 
	width: 30px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-right: 10px;
	display: inline-block;
	border: 1px solid #F9872A;
	border-radius: 50%;
	float: left;
}

.group-extended-details {
	display: none;
	position: absolute;
	top: 50px;
	left: 0;
	width: 100%;
	background: #FFF;
	z-index: 99;
	border: 1px solid #CCC;
	border-top: 0px;
	padding: 10px;
}

.group-extended-details .grouped-user-detail {
	display: block;
}

.msg-modal-wrapper {
	position: absolute;
	height: 195px;
	bottom: 0;
	left: 0;
	width: 100%;
}

.msg-scroll-wrapper .direct-message {
	font-size: 40px;
	text-align: left;
	line-height: 64px;
	display: block;
	width: 100%;
	margin: 0px;
	padding: 10px 20px 20px;
	background: #FFF;
	transition: 500ms;
}

.msg-scroll-wrapper .direct-message.fancy {
	background: rgba(249,135,42,0.5);
}

.direct-messages-wrapper .message-users::-webkit-scrollbar,
.direct-messages-wrapper .direct-messages::-webkit-scrollbar,
.direct-messages-wrapper .msg-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.message-users .newmessage {
	padding: 20px;
	cursor: pointer;
}

.direct-messages-wrapper .message-users .message-user {
	padding: 20px;
	position: relative;
}

.direct-messages-wrapper .message-users .message-user .indicator {
	height: 16px;
	width: 16px;
	background: #f7931e;
	font-size: 11px;
	line-height: 16px;
	display: block;
	text-align: center;
	border-radius: 50%;
	position: absolute;
	left: 2px;
	top: 9px;
	color: #FFF;
	font-family: "Open Sans";
}

.direct-messages-wrapper .message-users .message-user span {
	color: #F9872A;
	font-size: 13px;
	line-height: 22px;
	margin: 0;
	padding: 0;
	display: block;
	position: relative;
}

.direct-messages-wrapper .message-users .message-user span i {
	display: inline-block;
	position: absolute;
	left: -17px;
	top: 5px;
	color: #F9872A;
	font-size: 12px;
	opacity: 0.6;
}

.direct-messages-wrapper .message-users .message-user span.datetime {
	color: #999;
	font-size: 11px;
	line-height: 16px;
	margin: 0;
	padding: 0;
	display: block;
}

.direct-messages-wrapper .message-users .message-user p {
	color: #666;
	font-size: 12px;
	line-height: 15px;
	margin: 0;
	padding: 0;
}

.direct-messages-wrapper .message-users > div.active {
	background: #FFF;
}

body.conversations-template {
	background: #F0F1F4 !important;
}

.direct-message .message-meta {
	line-height: 30px;
	position: relative;
}

.direct-message .message-meta .dm-user-image {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 10px;
}

.direct-message .message-meta .dm-user-name {
	color: #f7931e;
	font-size: 14px;
	line-height: 14px;
	margin-left: 40px;
}

.direct-message .message-meta .message-date {
	float: right;
	font-size: 11px;
	margin-top: 10px;
}

.direct-message p {
	font-size: 13px !important;
	line-height: 17px !important;
	color: #333 !important;
	padding: 0 !important;
	margin: 10px 0 0px 40px !important;
}

.conversation-content {
	margin: 0 0 20px;
	border: 1px solid #999;
	padding: 30px;
	background: #FFF;
}

.conversation-content .creator-meta .image {
	height: 40px; 
	width: 40px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-right: 10px;
	display: inline-block;
	border-radius: 50%;
	float: left;	
}

.conversation-content .creator-meta .name {
	font-family: "Libre Baskerville";
	font-size: 12px;
	line-height: 40px;
	color: #333;
	display: inline-block;
	margin-left: 10px;
	font-style: italic;
}

.conversation-content .conversation-message {
	margin-left: 60px;
}

.conversation-content .conversation-message h5 {
	font-size: 20px !important;
	line-height: 26px !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #f7931e !important;
	position: relative;
	top: -10px;
}

.conversation-content .conversation-message h5 a {
	color: #f7931e !important;
}

.conversation-content .conversation-message p {
	font-size: 16px !important;
	line-height: 22px !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	color: #333 !important;
}

.conversation-content .message-meta {
	font-size: 11px;
	line-height: 12px;
}

.conversation-content .message-meta .message-count {
	float: right;
}

.replybox,
.replyform-placeholder {
	padding-left: 80px;
	position: relative;
	margin: 20px 0 0;
}

.replybox a {
	display: inline-block;
	font-size: 18px;
	line-height: 18px;
	font-weight: bold;
	color: #f7931e;
}
.replybox a i {
	font-size: 13px;
	line-height: 12px;
	color: #f7931e;
}

.replybox:before,
.replyform-placeholder:before {
	content: "";
	display: block;
	position: absolute;
	left: 20px;
	top: 10px;
	width: 40px;
	height: 2px;
	background-color: #EEE;
}

.replybox:after,
.replyform-placeholder:after {
	content: "\f0da";
	display: block;
	position: absolute;
	font-family: "FontAwesome";
	left: 65px;
	top: 2px;
	font-size: 18px;
	line-height: 18px;
	width: 20px;
	height: 20px;
	color: #f7931e;
	opacity: 0.5;
}

.replyform-placeholder:before {
	top: 187px;
	width: 60px;
}
.replyform-placeholder:after {
	top: 180px;
	left: 80px;
}

.replyform-placeholder .button-and-chars {
	float: none;
}

.conversation-thread-inner .replyform-placeholder .button-and-chars,
.conversation-thread-inner .replyform-placeholder .sendit {
	float: right;
}

.replyform-placeholder .sendit {
	float: left;
	margin-top: 5px;
}

.conversation-content {
	position: relative;
}

.conversation-content:before {
	content: "";
	display: block;
	position: absolute;
	left: 50px;
	top: 90px;
	width: 2px;
	height: calc(100% - 130px);
	background-color: #EEE;
}

.conversation-content:after {
	content: "";
	display: block;
	position: absolute;
	left: 46px;
	top: 80px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #EEE;
}

.conversation-content.replying:before {
	height: calc(100% - 146px);
}

.conversation-content.visible-reply:before {
	height: calc(100% - 245px);
}

.conversation-content.replying .replyform-placeholder .sendit {
	float: right;
}

.conversation-content.replying .replyform-placeholder:before {
	width: calc(100% - 150px);
}
.conversation-content.replying .replyform-placeholder:after {
	left: calc(100% - 131px);
}

.conversation-content.no-reply:before,
.conversation-content.no-reply:after {
	display: none;
}

.replyform-placeholder {
	display: none;
}

.conversation-thread.first {
	background: #FEFEF1;
	border: 0px;
	border-top: 5px solid #FA872C;
}

.conversation-content.conversation-thread:before,
.conversation-content.conversation-thread:after,
.conversation-content.conversation-thread .replybox:before,
.conversation-content.conversation-thread .replybox:after,
.conversation-content.conversation-thread .replyform-placeholder:before,
.conversation-content.conversation-thread .replyform-placeholder:after {
	display: none;
}

.conversation-content.conversation-thread .replybox,
.conversation-content.conversation-thread .replyform-placeholder {
	padding-left: 0px;
}

.conversation-content.conversation-thread .replybox,
.conversation-content.conversation-thread .replybox span,
.conversation-content.conversation-thread .replybox a {
	font-size: 10px;
	line-height: 12px;
	color: #999 !important;
	font-weight: normal;
}

.conversation-content.conversation-thread .creator-meta .image {
	position: absolute;
	top: 30px;
	right: 20px;
}

.conversation-content.conversation-thread.first .creator-meta .image {
	top: -15px;
	left: 15px;
	height: 50px;
	width: 50px;
	border: 1px solid #FFF;
	background-color: #FFF;
}

.conversation-content.conversation-thread .creator-meta .name {
	margin-left: 0;
}

.conversation-content.conversation-thread {
	padding: 20px 40px 40px;
}

.conversation-content.conversation-thread .replyline {
	width: 1px;
	position: absolute;
	top: 0;
	left: 10px;
	background: #CCC;
}

.conversation-content.conversation-thread .replylineback {
	display: block;
	content: " ";
	position: absolute;
	top: 40px;
	left: -15px;
	height: 1px;
	width: 15px;
	background: #CCC;
}

.conversation-content.conversation-thread.depth-0 .replyline,
.conversation-content.conversation-thread.depth-0 .replyline:after,
.conversation-content.conversation-thread.depth-1 .replylineback {
	background: #f7931e;
}

.drill-to-message .replyline,
.drill-to-message .replylineback {
	display: none !important;
}

.conversation-content.conversation-thread.first .conversation-thread-inner {
	padding: 40px;
}

.conversation-content.conversation-thread .conversation-message {
	margin-left: 0;
}

.conversation-content.conversation-thread.first .messaging-modal {
	background: transparent;
	padding-top: 5px;
}

.conversation-content.conversation-thread.first .ejmessage {
	background: #FFF;
}

.conversation-content.conversation-thread.depth-1 { margin-left: 25px; }
.conversation-content.conversation-thread.depth-2 { margin-left: 50px; }
.conversation-content.conversation-thread.depth-3 { margin-left: 75px; }
.conversation-content.conversation-thread.depth-4 { margin-left: 100px; }
.conversation-content.conversation-thread.depth-5 { margin-left: 125px; }
.conversation-content.conversation-thread.depth-6 { margin-left: 150px; }
.conversation-content.conversation-thread.depth-7 { margin-left: 175px; }
.conversation-content.conversation-thread.depth-8 { margin-left: 200px; }
.conversation-content.conversation-thread.depth-9 { margin-left: 225px; }
.conversation-content.conversation-thread.depth-10 { margin-left: 250px; }

.drill-to-message {
	margin-bottom: 30px;
}

.drill-to-message .conversation-content.conversation-thread {
	margin-left: 0;
	border-top: 0px;
	border-bottom: 1px dotted #AAA;
	padding-bottom: 40px;
	background: transparent;
}

.drill-to-message .conversation-thread-inner {
	border-color: #f7931e !important;
	background: #FFF;
}

.conversation-content.conversation-thread.first:before,
.conversation-content.conversation-thread.first:after {
	display: none;
}

.conversation-content.conversation-thread {
	margin-bottom: 0;
	border: 0px;
	margin-top: 20px;
	padding: 0;
	position: relative;
	z-index: 9;
}

.conversation-thread-inner {
	border: 1px solid #999;
	padding: 20px 40px 40px;
}

.conversation-content .user-reply {
	margin: 30px 0 0 60px;
	padding: 10px;
	background: #F1F1F1;
	border-radius: 3px;
}

.conversation-content .user-reply .reply-image {
	height: 30px; 
	width: 30px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-right: 10px;
	display: inline-block;
	border: 1px solid #F9872A;
	border-radius: 50%;
	float: left;	
}

.conversation-content .user-reply .reply-name,
.conversation-content .user-reply .reply-date {
	font-size: 11px;
	line-height: 30px;
	color: #999;
}

.conversation-content .user-reply p {
	font-size: 12px !important;
	line-height: 14px; !important
	color: #999 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Mentions */
.generic-message {
	background: #FFF;
	margin: 0 0 30px;
	padding: 20px 30px 30px;
	border: 1px solid #999;
}

.generic-message .message-meta {
	line-height: 30px;
	position: relative;
}

.generic-message .message-meta .dm-user-image {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 10px;
}

.generic-message .message-meta .dm-user-name {
	color: #f7931e;
	font-size: 14px;
	line-height: 14px;
	margin-left: 40px;
}

.generic-message .message-meta .message-date {
	float: right;
	font-size: 11px;
	margin-top: 10px;
}

.generic-message p {
	font-size: 13px !important;
	line-height: 17px !important;
	color: #333 !important;
	padding: 0 !important;
	margin: 3px 0 0px 40px !important;
}

.generic-message .conversation-details {
	margin: 15px 0 0;
}

.generic-message .conversation-details p {
	font-size: 15px !important;
	line-height: 20px !important;
}

.conversations .react {
	position: relative;
	margin: 10px 0 0;
	display: none;
}

.reaction-box {
	display: none;
	padding: 10px 15px;
	border: 1px solid #999;
	border-radius: 3px;
	box-shadow: -2px 2px 5px rgba(0,0,0,0.3);
	position: absolute;
	top: -10px;
	left: 60px;
	background: #FFF;
	white-space: nowrap;
	overflow: hidden;
}

/*.reaction-box:before {
	content: " ";
	display: block;
	height: 12px;
	width: 12px;
	border-radius: 0px;
	border: 1px solid #999;
	transform: rotate(-45deg);
	position: absolute;
	top: 14px;
	left: -7px;
	background: #FFF;
	border-right: 0px;
	border-bottom: 0px;
	box-shadow: -2px 2px 5px rgba(0,0,0,0.3);
}*/

.reaction-box:after {
	content: " ";
	display: block;
	height: 30px;
	width: 10px;
	border-radius: 0px;
	position: absolute;
	top: 10px;
	left: 0px;
	background: #FFF;
}

.reaction-box a {
	display: inline-block;
	height: 25px;
	width: 25px;
	margin-right: 10px;
	transition: 200ms;
}

.reaction-box a:hover i {
	transition: 200ms;
}

.reaction-box a i {
	font-size: 25px;
	color: #AAA;
	transition: 200ms;
}

.reaction-box a.heart {
	height: 30px;
	width: 30px;
	transform: scale(0.8);
}

.reaction-box a.heart i {
	font-size: 30px;
}

.reaction-box a.sad, 
.reaction-box a.sad i {
	position: relative;
	z-index: 3;
}

.reaction-box a.sad .fullheart {
	position: absolute;
	top: 1px;
	left: 1px;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	z-index: 1;
	opacity: 0;
}

.reaction-box a.sad .cover {
	content: " ";
	display: block;
	position: absolute;
	top: 1px;
	left: 1px;
	width: calc(100% - 2px);
	height: 0;
	z-index: 2;
	background: #FFF;
}

.reaction-box a.sad .fullheart i {
	color: black;
	font-size: 23px;
}

.reaction-box a.heart:hover i,
.reaction-box a.heart.active i {
	color: #FC5B67;
}

.reaction-box a.angry:hover i,
.reaction-box a.angry.active i {
	color: red;
}

.reaction-box a.shrug:hover i,
.reaction-box a.shrug.active i {
	color: #A69BDC;
}

.reaction-box a.sad:hover i,
.reaction-box a.sad.active i {
	color: #000;
}

.reaction-box a.flag:hover i,
.reaction-box a.flag.active i {
	color: #fc5507;
}

.reaction-box a.lonely:hover i,
.reaction-box a.lonely.active i {
	color: #91A7C9;
}

@keyframes heartbeat {
	0% {
		transform: scale(0.8);
	}
	50% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.8);
	}
}
.reaction-box a.heart:hover {
	animation-name: heartbeat;
	animation-duration: 600ms;
	animation-iteration-count: infinite;
}

@keyframes headsway {
	0% {
		transform: rotate(0deg);
	}
	90% {
		transform: rotate(-18deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
.reaction-box a.shrug:hover {
	animation-name: headsway;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

@keyframes flame{
  0% {height:150px; width:150px;}
  50% {height:140px; width:140px;}
  100% {height:150px; width:150px;}
}

.reaction-box a.angry {
	position: relative;
}

.reaction-box a.angry i {
	position: relative;
	z-index: 3;
}

.smoke {
	position: absolute;
	z-index: 2;
	width: 2px;
	margin-left: -1px;	
	left: 50%; 
	bottom: 30px;
	opacity: 0;
	-webkit-transition: all 800ms linear;
	transition: all 800ms linear; 
}
.smoke span { 
	display: block;
	position: absolute;
	bottom: -35px; 
	left: 50%; 
	margin-left:-20px;
	height: 0px; width: 0px;
	border: 30px solid rgba(0, 0, 0, .6);
	border-radius: 22px;
	border-bottom-left-radius: 0;
	border-top-right-radius: 0;
	left: -9px; 
	opacity: 0;
	transform: scale(0.2, 0.2) rotate(-45deg);
}
@keyframes smokeLeft {
	0%   { transform: scale(0.2, 0.2) translate(0, 0) rotate(-45deg) }
	10%  { opacity: 1; transform: scale(0.2, 0.3) translate(0, -5px) rotate(-45deg) }
	60%  { opacity: 0.6; transform: scale(0.3, 0.5) translate(-10px, -80px) rotate(-45deg) }
	100% { opacity: 0; transform: scale(0.4, 0.8) translate(-20px, -120px) rotate(-45deg) }
}
@keyframes smokeRight {
	0%   { transform: scale(0.2, 0.2) translate(0, 0) rotate(-45deg) }
	10%  { opacity: 1; transform: scale(0.2, 0.3) translate(0, -5px) rotate(-45deg) }
	60%  { opacity: 0.6; transform: scale(0.3, 0.5) translate(10px, -80px) rotate(-45deg) }
	100% { opacity: 0; transform: scale(0.4, 0.8) translate(20px, -120px) rotate(-45deg) }
}
.smoke .s-0 { 
	animation: smokeLeft 7s 0s infinite 
}
.smoke .s-1 { 
	animation: smokeRight 7s 0.7s infinite 
}
.smoke .s-2 { 
	animation: smokeLeft 7s 1.4s infinite 
}
.smoke .s-3 { 
	animation: smokeRight 7s 2.1s infinite 
}
.smoke .s-4 { 
	animation: smokeLeft 7s 2.8s infinite 
}
.smoke .s-5 { 
	animation: smokeRight 7s 3.5s infinite 
}
.smoke .s-6 { 
	animation: smokeLeft 7s 4.2s infinite 
}
.smoke .s-7 { 
	animation: smokeRight 7s 4.9s infinite 
}
.smoke .s-8 { 
	animation: smokeLeft 7s 5.6s infinite 
}
.smoke .s-9 { 
	animation: smokeRight 7s 6.3s infinite 
}

.reaction-box a.angry:hover .smoke {
	opacity: 0.5;
}

.reaction-box a.sad:hover .fullheart {
	opacity: 1;
}

.reaction-box a.sad:hover .cover {
	height: 100%;
	transition: 3s;
}

.reaction-box a.heart.active {
	
}

/*.messaging-editor-placeholder.direct .mce-top-part {
	display: none;
}
*/
/*#topic_filter {
	-webkit-appearance: none;
}*/

div[aria-label="Insert link"] .mce-form > .mce-container-body .mce-formitem:nth-child(4),
div[aria-label="Insert link"] .mce-form > .mce-container-body .mce-formitem:nth-child(5) {
	display: none !important;
}

.message-back-mobile {
	display: none;
	font-size: 24px;
	position: absolute;
	top: -40px;
	left: 0px;
	color: #999;
	z-index:998;
}

.show-message-users .message-back-mobile {
	display: block;
}

#messaging-header-wrap {
	position: absolute; 
	left: -210px; 
	top: 0px;
}

#messaging-header-wrap a {
	display: inline-block;
	position: relative;
}

#messaging-header-wrap a.unread:before {
	content: " ";
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: red;
	position: absolute;
	top: -2px;
	left: -5px;
}

#messaging-header-wrap a i {
	color: #555;
	font-size: 24px;
}

@media screen and (max-width: 767px) {
	.conversation-tabs,
	.conversation-tab-groups {
		float: none;
		width: 100%;
	}
	.direct-messages.conversation-tab {
		margin-top: 40px !important;
	}
	.conversations-header h1 {
		font-size: 38px !important;
		line-height: 42px !important;
		margin-top: 10px !important;
		text-align: center !important;
	}
	.conversations-header p {
		display: none !important;
	}
	.conversation-tab-groups {
		padding-bottom: 0px !important;
	}
	.direct-messages-wrapper .direct-messages,
	.direct-messages-wrapper .message-users {
		height: 450px;
	}
	.msg-scroll-wrapper {
		height: 300px;
	}
	.msg-scroll-wrapper.showing-group {
		height: 190px;
	}
	
	.direct-messages-wrapper .message-users {
		width: 100%;
		position: absolute;
		left: 0%;
		float: none;
		padding: 0 20px;
		z-index: 999;
		background: #FFF;
		border-right: 1px solid #EEE;
		transition: 500ms;
	}
	.show-message-users .message-users {
		left: -100%;
	}
	
	.direct-messages-wrapper .direct-messages {
		float: none;
		width: 100%;
		position: relative;
	}
	
	.messaging-modal.modal {
		width: 98%;
		margin-left: 1%;
		margin-right: 1%;
		left:0;
		padding: 5px;
	}
	.messaging-modal .messaging-modal-form h2 {
		padding: 10px 20px !important;
	}
	.messaging-modal .messaging-editor-placeholder {
		float: none;
		width: 100%;
	}
	.messaging-modal span.current-user-image {
		margin-left: 0px !important;
	}
	.messaging-modal .button-and-chars {
		margin: 5px;
	}
	.messaging-modal .messaging-actions .sendit {
		margin-top: 0px;
	}
	#messaging-header-wrap {
		left: -80px; 
		top: 8px;
	}
}