#messenger ::placeholder { color: #3b4c64ad; opacity: 1; } /* Chrome, Firefox, Opera, Safari 10.1+ */
#messenger :-ms-input-placeholder { color: #3b4c64ad; } /* Internet Explorer 10-11 */
#messenger ::-ms-input-placeholder { color: #3b4c64ad; } /* Microsoft Edge */

#messenger p { margin: 0; }

/* Messagerie */
#messenger{ display: none; position: fixed; height: 400px; width: 300px; bottom:10px; right:70px; z-index: 100000; background-color: #fafafa; overflow: hidden; border-radius: 5px; }
#messenger *{ box-sizing: border-box; }

#messenger .bar{ display: none; font-weight: bold; position: relative; z-index: 1; margin: 0; padding: 10px; background-color: rgb(30, 150, 210); color: white; cursor: all-scroll; font-size: 16px; }
#messenger .messenger{ display: flex; position: absolute; height: 100%; top: 0; width: 100%; /*padding-top: 43px;*/ }

/* bar messagerie */
#messenger .bar a{ float: right; width: 25px; text-align: center; }
#messenger .bar a:hover { background-color: rgba(0,0,0,0.1); }
#messenger .bar a i{ color: white; }

/* Liste des contacts */
#messenger .contact{   position: absolute; display: none; z-index: 1; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; }
#messenger .contact .top { display: flex; align-items: center; justify-content: space-between; text-align: center; padding: 0 15px; position: absolute; width: 100%; z-index: 1; background-color: #ffffff; box-shadow: 0px 0px 40px 0px #434d5a70, 0px 0px 10px 0px #434d5a33; height: 50px; }
#messenger .contact .top button{ background-color: transparent; border: none; }
#messenger .contact .mid>div { margin-bottom: 4px; }
#messenger .contact .mid{ overflow-y: scroll; padding-top: 65px; padding-bottom: 15px; height: 100%; padding-top: 50px; }
#messenger .contact .mid .limit, 
#messenger .contact .mid .limit *{ color: gray; letter-spacing: 0; font-size: 11px; text-transform: none; text-align: center; padding: 5px;}
#messenger .contact .mid .limit a{ color: #165cc1; font-weight: bold; font-size: 12px;}
#messenger .contact .mid ul{ padding: 0; margin: 0; list-style-type: none; }
#messenger .contact .mid li{ cursor: pointer; position: relative; display: flex; align-items: center; padding: 10px 0px; margin: 0 20px; font-size: 13px; font-weight: bold; color: rgb(28, 38, 54); border-top: 1px solid #e8e8e8; }
#messenger .contact .mid img{ height: 40px; display: flex; margin-right: 10px; }
#messenger .contact .mid h3{ margin: 0; display: block; padding: 5px 5px 0; line-height: 30px; font-weight: 100; text-align: center; color: rgb(150, 150, 150); background-color: rgb(240, 240, 240); margin-bottom: 4px;}
#messenger .contact .mid h3 span{ float: right; }
#messenger .contact .mid .user span{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#messenger .contact .mid .notif[data-notif="0"]{ display: none; }
#messenger .contact .mid .notif { background-color: rgb(250, 80, 80); color: rgb(255, 255, 255); height: 7px; width: 7px; border-radius: 10px; text-align: center; margin: 0 3px 0 0px; display: inline-block; }
#messenger .contact .mid .info { display: flex; flex-direction: column; margin-right: auto; min-width: 0; flex-basis: 100%; }
#messenger .contact .mid .info .user { display: flex; }
#messenger .contact .mid .info .name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#messenger .contact .mid .info .time { margin-left: auto; }
#messenger .contact .mid .info .message { color: #adadad; text-transform: none; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#messenger .contact .mid .context{ display: none; } 
#messenger .contact .mid .online{ margin: 3px 0; background-color: rgb(131, 197, 65); border-radius: 100%; width: 8px; height: 8px; }
#messenger .contact .mid .offline{ margin: 3px 0; background-color: rgba(200, 200, 200, 1); border-radius: 100%; width: 8px; height: 8px; }
#messenger .contact .mid .offline::after{ display: none; content: attr(data-time); position: absolute; right: 15px; top: -12px; white-space: nowrap; font-size: 11px; text-align: right; color: rgba(150, 150, 150, 1); }

/* Contenu de conversation */
#messenger .discussion{ z-index: 1; box-shadow: 0 0 15px 0px #00000033; position: absolute; float: left; height: 100%; width: 100%; box-sizing: border-box; }
#messenger .container{ position: relative; height: 100%; }
#messenger .discussion .top{ display: flex; align-items: center; justify-content: space-between; text-align: center; padding: 0 15px; position: absolute; width: 100%; z-index: 1; background-color: #ffffff; box-shadow: 0px 0px 40px 0px #434d5a70, 0px 0px 10px 0px #434d5a33; height: 50px; }
#messenger .discussion .top button{ background-color: transparent; border: none; }
#messenger .discussion .top .back{  }
#messenger .discussion .top .user{ color: #233753; font-weight: bold; }
#messenger .discussion .top .user .age{ font-size: 11px; color: #7488a2; }
#messenger .discussion .top .button{  }
#messenger .discussion .mid{ position: relative; height: 100%; padding-top: 60px; }
#messenger .discussion .mid .limit, 
#messenger .discussion .mid .limit *{ color: gray; letter-spacing: 0; font-size: 11px; text-transform: none; text-align: center; padding: 5px;}
#messenger .discussion .mid .limit a{ color: #165cc1; font-weight: bold; font-size: 12px;}
#messenger .discussion .bot{ position: absolute; bottom: 0; width: 100%; font-size: 11px; color: #7488a2; }     
#messenger .discussion .bot textarea{ overflow: hidden; width: 100%; max-height: 160px; resize: none; margin: 0; padding: 14px 14px; float: left; height: 50px; border: 0; box-shadow: 0px 0px 40px 0px #434d5a70, 0px 0px 10px 0px #434d5a33; background-color: rgb(250, 250, 250); line-height: 25px; font-size: 13px; font-weight: bold; color: rgb(87, 114, 158); text-transform: initial; }    


/* Bulle de conversation */
#messenger .converse .mid{ overflow-x: hidden; overflow-y: scroll; height: 100%; top: 0; width: 100%; position: absolute; background-color: #f8fafb; }
#messenger .converse .mid .text{ position: relative; word-wrap: break-word; text-transform: initial; }  
#messenger .converse .mid .text a{ position: relative; word-wrap: break-word; text-transform: initial; text-decoration: underline; }  
#messenger .converse .mid .date{ text-align: center; color: rgba(52, 70, 95, 0.74); line-height: 35px; float: left; width: 100%; font-size: 11px; font-weight: bold; text-transform: capitalize; }
#messenger .converse .mid .message{ position: relative; clear: both; line-height: 1; max-width: 75%; padding: 12px; border-radius: 2px; margin: 4px 15px; color: rgba(50, 50, 50, 1); box-shadow: 0px 0px 40px 0px #434d5a70, 0px 0px 10px 0px #434d5a33; font-size: 11px; }
#messenger .converse .mid .message.you{ background-color: rgba(255, 255, 255, 1); float: left; color: rgb(80,80,80); }
#messenger .converse .mid .message.me{ background-color: #425269; float: right; color: rgb(255,255,255); background-image: linear-gradient(to right, #425269, #203552); }
#messenger .converse .mid .message .time{ display: none; color: rgba(52, 70, 95, 0.74); position: absolute; top: 0px; padding: 2px 4px; font-size: 10px; font-weight: bold; letter-spacing: 0px; }
#messenger .converse .mid .message.you .time{ right: -45px; }
#messenger .converse .mid .message.me .time{ left: -45px; }  
#messenger .converse .mid .message:hover .time{ display: block; }  
#messenger .converse .mid ._st{ display: none; height: 75px; float: left; width: 100%; }
#messenger .converse .mid ._en{ height: 60px; float: left; width: 100%; }

/* shifumi dans converse */
/*
#messenger .converse .mid .shifumi{ float: left; width: 90%; padding: 10px; color: rgb(148, 160, 175); font-weight: bold; background-color: rgba(0, 0, 0, 0.05); margin: 10px 5%; border-radius: 10px; }
#messenger .converse .mid .shifumi div:nth-child(1){ text-align: center; }
#messenger .converse .mid .shifumi div:nth-child(2){ clear: both; line-height: 30px; min-height: 30px; position: relative; }
#messenger .converse .mid .shifumi div:nth-child(2) .left__{ float: left; text-align: -webkit-right; width: 50%; padding-right: 25px; }
#messenger .converse .mid .shifumi div:nth-child(2) .middle__{ font-size: 24px; position: absolute; left: 50%; -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -o-transform: translate(-50%,0); -ms-transform: translate(-50%,0); transform: translate(-50%,0); }
#messenger .converse .mid .shifumi div:nth-child(2) .right__{ float: right; text-align: -webkit-left; width: 50%; padding-left: 25px; }
#messenger .converse .mid .shifumi div:nth-child(3){ clear: both; position: relative; }
#messenger .converse .mid .shifumi div:nth-child(3) .left__{ float: left; text-align: -webkit-right; width: 50%; padding-right: 40px; }
#messenger .converse .mid .shifumi div:nth-child(3) .middle__{ font-size: 16px; position: absolute; left: 50%; -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -o-transform: translate(-50%,0); -ms-transform: translate(-50%,0); transform: translate(-50%,0); }
#messenger .converse .mid .shifumi div:nth-child(3) .right__{ float: right; text-align: -webkit-left; width: 50%; padding-left: 40px; }
*/

/* Minim bar messenger */
#min_messenger{ z-index: 10000; position: fixed; bottom: 165px; right: 65px; background-color: cornflowerblue; box-shadow: 0 0 10px 2px rgba(25, 50, 75, 0.1); padding: 10px 10px; font-weight: bold; color: white; box-sizing: border-box; height: 40px; width: 40px; border-radius: 100%; }    
#min_messenger span{ position: absolute; top: -5px; background-color: #fa5a5a; color: white; height: 20px; min-width: 10px; padding: 0px 5px; line-height: 20px; text-align: center; right: -5px; border-radius: 20px; font-weight: bold; font-size: 11px; box-sizing: initial; }    
#min_messenger span[data-notif="0"]{ display: none; }
#min_messenger.new_message{ animation: message 2.0s infinite; -webkit-animation: message 2.0s infinite; }       


#bubble_messenger{ z-index: 10000; position: fixed; bottom: 0; right: 200px; }
#bubble_messenger .user{ display: inline-block; position: relative; margin: 0 5px; margin-bottom: -13px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
#bubble_messenger .user:hover { margin-bottom: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
#bubble_messenger img{ width: 40px; height: 40px; display: block; border-radius: 100%; }
#bubble_messenger span{ position: absolute; top: -7px; background-color: rgb(250, 90, 90); color: white; height: 20px; min-width: 12px; padding: 0 4px; line-height: 20px; text-align: center; right: -7px; border-radius: 20px; font-weight: bold; }


/* Minim bar messenger */
@keyframes message{
    0%{ background-color: var(--background-site); color: rgb(255, 255, 255); }
    49%{ background-color: var(--background-site); color: rgb(255, 255, 255); }
    50%{ background-color: rgb(255, 255, 255); color: var(--color-site); }
    99%{ background-color: rgb(255, 255, 255); color: var(--color-site); }
}
@-webkit-keyframes message{
    0%{ background-color: var(--background-site); color: rgb(255, 255, 255); }
    49%{ background-color: var(--background-site); color: rgb(255, 255, 255); }
    50%{ background-color: rgb(255, 255, 255); color: var(--color-site); }
    99%{ background-color: rgb(255, 255, 255); color: var(--color-site); }
}