.messenger_holder
{
	max-width:900px;
	width:80vw;
	height:80vh;
	margin:10vh 0 10vh 0;
	box-shadow:0 20px 80px #c8c8c8;
	padding:80px 80px 80px 80px;
	background:#fff;
	overflow:hidden;
}



@media screen and (max-width: 800px) 
{
	.messenger_holder
	{
		width:100vw;
		max-width:none;
		min-height:100vh;
		height:auto;
		margin:0;
		padding:80px 20px 0 20px;
		background:#fff;
		overflow:hidden;
	}
}









.messenger_option
{
	width:100%;
	height:auto;
}

@media screen and (max-width: 800px) 
{

	.messenger_option
	{
		max-width:none;
		padding:80px 0 80px 0;
	}

}



















.messenger_chat
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

.messenger_chat .chat_menu
{
	position:absolute;
	right:20px;
	top:20px;
	width:auto;
	height:40px;
	z-index:999;
	background:#f4f4f4;
	border-radius:10px;
	overflow:hidden;
}

.messenger_chat .chat_menu .item
{
	float:left;
	width:40px;
	height:40px;
	background:#f4f4f4;
	border-right:1px solid #fff;
}

.messenger_chat .chat_menu .item:hover
{
	background:#f4f4f4;
}

.messenger_chat .chat_menu .item:last-child
{
	border:none;
}

.messenger_chat .chat_actions
{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:140px;
	border-top:1px solid #f4f4f4;
	background:#fff;
}

.messenger_chat .chat_actions .chat_text
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:90px;
	line-height:25px;
	font-size:16px;
	font-weight:400;
	color:#282828;
	padding:20px 140px 20px 20px;
	border-bottom:1px solid rgba(52,52,52,0.05);
}

.messenger_chat .chat_actions .chat_send
{
	position:absolute;
	right:75px;
	top:25px;
	width:40px;
	height:40px;
	border:1px solid #f4f4f4;
	border-radius:10px;
	color:#282828;
    letter-spacing:1px;
    font-weight: 600;
    text-align: center;
    line-height: 30px;
    text-transform: uppercase;
    font-size: 10px;   
	background-size: 12px 12px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-image:url('../img/send_icon.png');
    cursor:pointer;
}

.messenger_chat .chat_actions .chat_send:hover
{
	background-color:#f4f4f4;
}

.messenger_chat .chat_actions .chat_attachment
{
	position:absolute;
	right:25px;
	top:25px;
	width:40px;
	height:40px;
	border:1px solid #f4f4f4;
	border-radius:10px;
	color:#282828;
    letter-spacing:1px;
    font-weight: 600;
    text-align: center;
    line-height: 30px;
    text-transform: uppercase;
    font-size: 10px;   
	background-size: 12px 12px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-image:url('../img/attachment_icon.png');
    cursor:pointer;
}

.messenger_chat .chat_actions .chat_attachment:hover
{
	background-color:#f4f4f4;
}

.messenger_chat .chat_actions .chat_attachment_selector
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	color:rgba(255,255,255,0);
	background:rgba(255,255,255,0);
	opacity:0;
	cursor:pointer;
}

.messenger_chat .chat_actions .button_holder
{
	position:absolute;
	left:10px;
	top:100px;
	width:auto;
	height:30px;
}

.messenger_chat .chat_actions .button_holder .action_button
{
	width:auto;
	height:30px;
    line-height:30px;
    color:#fff;
    font-weight:800;
    margin:0 10px 0 0;
    font-size:12px;
    padding:0 15px 0 15px;
    text-align: center;
    cursor: pointer;
	float:left !important; 
    display:table-cell !important;
    white-space: nowrap !important;
    background:#cfc8b8;
    border-radius:20px;
}

.messenger_chat .chat_actions .chat_delete
{
	position:absolute;
	right:8px;
	top:92px;
	width:84px;
	height:34px;
	border:1px solid #f4f4f4;
	border-radius:10px;
	color:#282828;
    letter-spacing:1px;
    font-weight: 600;
    text-align: center;
    line-height: 34px;
    text-transform: uppercase;
    font-size: 10px;    
	background-size: 12px 12px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-image:url('../img/delete_icon_dark.png');
    cursor:pointer;
}

.messenger_chat .chat_actions .chat_delete:hover
{
	background-color:#f4f4f4;
}

.messenger_chat .chat_history
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:calc(100% - 140px);
	padding:20px !important;
	overflow:scroll;
	background:rgba(57,57,57,0.05);
}

.messenger_chat .post
{
	width:auto;
	width:100%;
	margin:20px 0 20px 0;
	padding:20px 0 0 0;
}

.messenger_chat .post .timestamp
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	line-height:10px;
	font-size:12px;
	font-weight:500;
	color:#393939 !important;
	opacity:0.4;
}

.messenger_chat .post .text
{
	width:auto;
	max-width:80%;
	padding:10px 20px 10px 20px;
	line-height:25px;
	font-size:14px;
	font-weight:500;
	color:#393939 !important;
	border-radius:10px;
	background:#fff !important;
	box-shadow:0 10px 50px -15px rgba(57,57,57,0.1);
}

.messenger_chat .post_operator
{
	display:block;
}

.messenger_chat .post_operator .text
{
	left:0;
	margin-left:none;
}

.messenger_chat .post_operator .timestamp
{
	text-align:left;
}

.messenger_chat .post_visitor
{	
	display:inline-flex;
}

.messenger_chat .post_visitor .text
{
	right:0;
	margin-left:auto;
}

.messenger_chat .post_visitor .timestamp
{
	text-align:right;
}



.messenger_backend .messenger_chat .post_operator
{	
	display:inline-flex;
}

.messenger_backend .messenger_chat .post_operator .text
{
	right:0;
	margin-left:auto;
}

.messenger_backend .messenger_chat .post_operator .timestamp
{
	text-align:right;
}

.messenger_backend .messenger_chat .post_visitor
{
	display:block;
}

.messenger_backend .messenger_chat .post_visitor .text
{
	left:0;
	margin-left:none;
}

.messenger_backend .messenger_chat .post_visitor .timestamp
{
	text-align:left;
}

















.messenger_backend
{
	position:fixed;
	width:calc(100vw - 0px);
	height:calc(100vh - 100px);
	background:#fff;
	margin-top:50px;
}

.messenger_backend .chats_holder
{
	width:400px;
	height:100%;
	border-right:1px solid #f4f4f4;
}

.messenger_backend .chats_holder .scroll
{
	width:100%;
	height:100%;
	padding-top:0 !important;
	overflow:auto;
}

.messenger_backend .chats_holder .chat
{
	height:auto;
	background:#fff;
	margin:0;
	padding:20px;
	cursor:pointer;
	border-right:4px solid #c75146;
	border-bottom:1px solid #f4f4f4;
}

.messenger_backend .chats_holder .chat .site
{
	width:auto;
	height:20px;
	font-size:8px;
	line-height:20px;
	font-weight:600;
	text-transform:uppercase;
	text-align:right;
	padding:0 8px 0 8px;
	background:#f4f4f4;
	margin:0 0 5px 0;
	border-radius:5px;
	color:#282828;
	letter-spacing:1px;
}

.messenger_backend .chats_holder .chat .timestamp
{
	height:10px;
	font-size:10px;
	line-height:10px;
	font-weight:400;
	text-transform:uppercase;
	color:#c8c8c8;
	text-align:right;
}

.messenger_backend .chats_holder .chat .interlocutor_name
{
	height:20px;
	font-size:12px;
	line-height:20px;
	font-weight:400;
	letter-spacing:1px;
	text-transform:uppercase;
  	text-overflow:ellipsis;
  	overflow:hidden; 
  	white-space:nowrap;
}

.messenger_backend .chats_holder .chat .last_message
{
	height:20px;
	font-size:12px;
	line-height:20px;
	font-weight:400;
  	text-overflow:ellipsis;
  	overflow:hidden; 
  	white-space:nowrap;
	color:#c8c8c8;
}

.messenger_backend.chats_holder .chat_open
{

}

.messenger_backend .chats_holder .chat_closed
{
	opacity:0.6;
}

.messenger_backend .chats_holder .chat_seen_true
{
	border-right:none;
}


.chat_holder
{

}

.messenger_backend .messenger_container
{
	width:calc(100% - 400px);
	height:100%;
	padding-bottom:50px;
}