/***********************************
   MISE EN PAGE
******************************/

#chat-full{
	padding:0px;
	margin:0px;
	
	width:100%;
	height:900px;
	
	background-color:rgba(234, 232, 225, 0.05);
	
	border-width: 2px;
	border-style:solid;
	border-color:rgba(234, 232, 225, 0.4);
	border-radius:4px;
}

/* Mini Chat */
#chat-full2{
	padding:0px;
	margin:0px;
	
	width:100%;
	height:450px;
	
	background-color: white;
}

@media screen and (min-width: 1200px){
	#chat-left{
		margin:0px;
		padding:0px;
		float:left;

		width:30%;
		height:900px;
	}

	.chat-mid{
		margin:0px;
		padding:0px;
		float:left;

		width: 45%;
		height:896px;
	
		border-width: 0px 5px 0px 5px;
		border-style:double;
		border-color:rgba(255, 137, 133, 0.75);
	
		background-color:white;
	}

	#chat-right {	
		padding:0px;
		margin:0px;
		float:left;
	
		width:25%;
		height:900px;
	}
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
	#chat-left{
		margin:0px;
		padding:0px;
		float:left;

		width:50%;
		height:900px;
	}

	.chat-mid{
		margin:0px;
		padding:0px;
		float:left;

		width: 50%;
		height:896px;
	
		border-width: 0px 5px 0px 5px;
		border-style:double;
		border-color:rgba(255, 137, 133, 0.75);
	
		background-color:white;
	}
	#chat-right {	
		display:none;
	}
}

.top-banner{
	margin:0px;
	padding:0px;

	width:100%;
	height:100px;
	
	border-bottom: 2px solid rgba(255, 137, 133, 0.5);
	
	overflow:hidden;
  	text-overflow: ellipsis; 
}

.chat-mid .core{
	margin:0px;
	padding:0px;
	
	width:100%;
	height:685px;
	
	overflow:auto;
}

.box-customer-title{
	background-color:rgba(204, 51, 102, 1);
	padding:3%;
}
/* Mini Chat */
.box-customer-title2{
	background-color:rgba(204, 51, 102, 1);
	padding:1%;
}
.box-customer-titleActive {
	/*background-color: rgba(204, 51, 102, 0.6);*/
	padding:0.5%;
	border-bottom: 3px dashed #ccc;
}
.chat-customer-background {
	background-color: rgba(204, 51, 102, 0.05);
}
.box-customer-footer{
	/*background-color:rgba(204, 51, 102, 0.6);*/
}

/**************
*** TeXTAREA WITH COLOR
**************/
.md-textarea{
	border:none;
	border-bottom: 1px solid #CC3366;
    box-shadow: 0 1px 0 0 #CC3366;
}
.md-textarea:focus{
	border-bottom: 1px solid #0AC1AB;
	 box-shadow: 0 1px 0 0 #0AC1AB;
}


/***********************************
  	COLONNE DE GAUCHE
******************************/

.chat-left-box{
	height: 899px;
	/*background-color: rgba(102, 102, 102, 0.1);*/
}
/* Mini Chat */
.chat-left-box2{
	height: 450px;
	/*background-color: rgba(102, 102, 102, 0.1);*/
}

#chat-left .core .conv {
	width:100%;
	height:90px;
	
	padding:5px;
	margin:4px 0px 4px 0px;

	color:#ce9e7e;
	background-color:rgb(255, 238, 198);
}

#chat-left .core .conv:hover {
	background-color:#885533;
	color:#bbb498;
}

#chat-left .core .conv:hover .contact .name{
	color:white;
}

#chat-left .core .conv:hover strong{
	color:#bbb498;
}

#chat-left .core .conv .photo {
	display:inline;
	float:left;

	width:25%;
	min-width:80px;
	height:100%;
}

#chat-left .core .conv .contact {
	display:inline;
	float:left;
	margin:0px;
	padding:0px;	
	
	width:65%;
	height:100%;
}

#chat-left .core .conv .contact .name{
	width:100%;
	height:30%;
	
	color:#100e0e;
	
	overflow:hidden;
  	text-overflow: ellipsis; 
	white-space: nowrap;
	margin-left:5px;
}

#chat-left .core .conv .contact .message{
	width:100%;
	height:40%;
	
	overflow:hidden;
  	text-overflow: ellipsis; 
	white-space: nowrap;
	margin-left:5px;
}

#chat-left .core .conv .contact .date{
	float:right;
	margin-right:10px;
	
	font-size: small;
	color:#bbb498;
}

/***********************************
  	COLONNE DU MILIEU
******************************/

.chat-center-box{
	border-left-style: solid;
	border-left-width: 2px;
	border-left-color: rgba(234, 232, 225, 0.4);
	
	border-right-style: solid;
	border-right-width: 2px;
	border-right-color: rgba(234, 232, 225, 0.4);
	
	height: 899px;
}
/* Mini Chat */
chat-center-box2{
	border-left-style: solid;
	border-left-width: 2px;
	border-left-color: rgba(234, 232, 225, 0.4);
	
	border-right-style: solid;
	border-right-width: 2px;
	border-right-color: rgba(234, 232, 225, 0.4);
	
	height: 450px;
}

.chat-center-box-contain{
	height: 737px;
	width: 100%;
}
/* Mini Chat */
.chat-center-box-contain2{
	height: 328px;
	width: 100%;
}

.chat-center-box-footer{
	bottom: 0px;
	border-top: 1px solid #666666;
	padding-top: 1%;
}

.chat-mid .top-banner .name{
	margin:0px;
	padding:0px;
	float:left;
		
	width:90%;
}

.chat-mid .top-banner .close{
	display:inline-block
	margin:0px;
	padding:0px;
	float:right;
	
	padding-top:15px;
		
	width:10%;
}

/*.chat-mid .core*/.msg{
	display:block;
	margin:0px;
	/*padding:15px 0px 15px 0px;*/
	float:left;
	
	width:100%;
	height:auto;
}

/*.chat-mid .core*/ .msg .bubble-left {
	display:inline;
	float:left;
	position: relative;
	padding:10px;
	margin:10px;

	width:100%;
	max-width: 79%;
	height: auto;
	min-height:30px;
	
	background: #FFE6F2;

	border-width: 1px;
	border-radius: 0px 5px 5px 5px;
}

/*.chat-mid .core*/ .msg .bubble-left:before {
	content:"";
	position: absolute;
	right: 100%;
	top: 0px;
	width: 0;
	height: 0;
	border-top: 0px solid transparent;
	border-right: 26px solid #FFE6F2;
	border-bottom: 26px solid transparent;
}

/* Mini Bubble left  */
.msg .bubble-left2 {
	display:inline;
	float:left;
	position: relative;
	padding:10px;
	margin:10px;

	width:100%;
	max-width: 90%;
	height: auto;
	min-height:30px;
	
	background: #FFE6F2;

	border-width: 1px;
	border-radius: 0px 5px 5px 5px;
}
.msg .bubble-left2:before {
	content:"";
	position: absolute;
	right: 100%;
	top: 0px;
	width: 0;
	height: 0;
	border-top: 0px solid transparent;
	border-right: 26px solid #FFE6F2;
	border-bottom: 26px solid transparent;
}


/*.chat-mid .core*/ .msg .bubble-right {
	display:inline;
	float:right;
	padding:10px;
	margin:10px;
	position: relative;

	width:100%;
	max-width: 79%;
	min-height:30px;
	
	background: #D6F5F5;
	
	border-width: 1px;
	border-radius: 5px 0px 5px 5px;
}

/*.chat-mid .core*/ .msg .bubble-right:before {
	content:"";
	position: absolute;
	left: 100%;
	top: 0px;
	width: 0;
	height: 0;
	border-top: 0px solid transparent;
	border-left: 26px solid #D6F5F5;
	border-bottom: 26px solid transparent;
}

/* Mini Bubble right  */
.msg .bubble-right2 {
	display:inline;
	float:right;
	padding:10px;
	margin:10px;
	position: relative;

	width:100%;
	max-width: 90%;
	min-height:30px;
	
	background: #D6F5F5;
	
	border-width: 1px;
	border-radius: 5px 0px 5px 5px;
}
.msg .bubble-right2:before {
	content:"";
	position: absolute;
	left: 100%;
	top: 0px;
	width: 0;
	height: 0;
	border-top: 0px solid transparent;
	border-left: 26px solid #D6F5F5;
	border-bottom: 26px solid transparent;
}

/*.chat-mid .core*/ .msg .photo-left {
	margin:0px;
	padding:5px;
	display:inline;
	float:left;
	
	width:19%;
	min-width:80px;
	max-width:100px;
}

/*.chat-mid .core*/ .msg .photo-right {
	margin:0px;
	padding:5px;
	display:inline;
	float:right;
	
	width:19%;
	min-width:80px;
	max-width:100px;
}

/*.chat-mid*/ .txt-zone{
	margin:0px;
	padding:0px;	
	overflow:auto;
	
	width:100%;
	height:111px;

	border-top: 2px solid rgba(255, 137, 133, 0.5);
	
	background-color:rgba(255, 238, 198, 0.5);
	
	overflow-x:hidden;
}

/*.chat-mid*/.txt-zone .msg-input{
	border:none;
	width:700px;
}

/*.chat-mid*/ .txt-zone .upl-img:hover {
	cursor:pointer;
}

/***********************************
  	COLONNE DE DROITE
******************************/

.chat-right-box{
	height: 899px;
	/*background-color: rgba(193, 187, 174, 0.1);*/
	overflow-y: auto;
}
/* Mini Chat */
.chat-right-box2{
	height: 450px;
	background-color: white;
	overflow-y: auto;
}

.core .user{
	width:100%;
	height:50px;
	
	padding:5px;
	margin:4px 0px 4px 0px;
	
	background-color:#885533;
	color:#bbb498;
}

.core .user:hover{
	background-color:rgb(255, 238, 198);
}

.core .user:hover .name{
	color:#885533;
}

.core .user .pic-container{
	padding:0px;

	width:40px;
	height:40px;
	
	border-radius:50%;
	overflow:hidden;
}

.core .user .photo {
	display:inline;
	float:left;

	width:20%;
	min-width:42px;
	height:100%;
}

.core .user .name {
	display:inline;
	float:left;
	margin:0px;
	padding-left:15px;	
	
	width:75%;
	height:100%;
	
	overflow:hidden;
  	text-overflow: ellipsis; 
	
	color:white
}


.box-user {
	height: 250px;
	overflow-y: auto;
	border: 1px dashed gray;
}
/* Mini Chat */
.box-user2 {
	height: 90px;
	overflow-y: auto;
	border: 1px dashed gray;
}
.box-user3 {
	height: 40px;
	overflow-y: hidden;
	/*border: 1px dashed gray;*/
}

/***********************************
  	ELEMENTS RESPONSIFS
******************************/

@media screen and (min-width: 1200px){

	#right-admin {
		display:none;
	}
	
	#right-nutri {
		display:none;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	
	#right-admin {
		display:block;
	}
	
	#right-nutri {
		display:block;
	}

	#md-chat-left-admin{
		margin:0px;
		padding:0px;
		float:left;

		width:50%;
		height:900px;
	}

	#md-chat-left-nutri{
		margin:0px;
		padding:0px;
		float:left;

		width:50%;
		height:900px;
	}
}

@media screen and (max-width: 991){
}

/***********************************
  	OUTIL
******************************/

.pic-container{
	padding:0px;

	width:75px;
	height:75px;
	
	border-radius:50%;
	overflow:hidden;
}

.pic-container img{
	width: inherit;
	height: inherit;
	border-radius: inherit;
	
 	object-fit: cover;
  	object-position: right center;
}


/***********************************
  	MIN CHAT
******************************/
.mobileChat{
	position: fixed;
  	bottom: 0;
  	right: 0;
  	width: 350px;
  	background-color: red;
}

.backgroundNewMessage{
	background-color: gray;
}