/*#region Contacts/Recent */
.chat-contacts {
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    margin-right:3px;
    padding:5px;
}
@media only screen and (max-width : 1080px) {
    .chat-contacts {
       display:none;
    }
    .non-responsive-chat-user-list{
        display:none;
    }
    .single-non-responsive{
        display:none;
    }
    .chat-room-header {
        flex: 0 0 55px !important;
    }
}

@media only screen and (min-width : 1080px) {
    .responsive-chat-user-list {
        display: none;
    }
    .single-responsive{
        display:none
    }
}

.chat-contacts-header {
    flex: 0 0 auto;
    /*background: linear-gradient(45deg, rgb(120, 211, 255) 0%, rgb(107, 245, 185) 100%);*/
    /*border-bottom:3px solid #eef1f5;*/
    text-align:center;
    margin-bottom:10px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.chat-contacts-menu { 
    margin-bottom:10px;
}
.chat-contacts-menu a {
    display:block;
    padding:15px;
    float:left;
    width:50%;
    color:#eef1f5;
    color:#c2c2c2;
    transition: all linear 100ms;
}
.chat-contacts-menu a.active {
    color:#59A182; 
    color:#5bc0de; 
    transform:scale(1.3);       
}
.chat-contacts-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x:hidden;
}
.chat-contact {
    display:block;
    padding:15px 10px;
    position:relative;
    border-bottom: 1px solid #fff;    
}
.chat-contact:hover, .chat-contact.active {
    background-color:#eef1f5;
}
.chat-contact-avatar {
    float:left;
    width:40px;
    height:40px;
    margin-right:10px;
}
.chat-contact-avatar img {
    width:45px;
}
.chat-contact-avatar .avatar {    
    /*padding-top:10px;*/
}
.chat-contact-primary {
    font-size:1.1em;
    color:#1e1e1e;
    max-width: 180px;
}
.chat-contact-secondary {
    color:#737373;
    font-weight:500;
}
.chat-contact-status {
    width:10px;
    height:10px;
    border-radius:50%;
    position:absolute;
    right:20px;
    top:30px;
}
.chat-contact-status[data-status='true'] {
    background-color:#70de72;
}
.chat-contact-status.wave{
    -moz-animation: wave ease 1.5s infinite;
    -o-animation: wave ease 1.5s infinite;
    -webkit-animation: wave ease 1.5s infinite;
    animation: wave ease 1.5s infinite;
}
@keyframes wave {
    from {
        box-shadow: #70de72 0 0 0 0;
    }
    to {
        box-shadow: transparent 0 0 0 10px;
    }
}
/*#endregion */

/*#region Room */
.chat-room {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.chat-room-header {
    flex:0 0 90px;
    background-color:#ffffff;
    color:#555;
    margin-bottom:2px;

    display:flex;
    flex-direction:row;
    align-items:center;
}
.chat-room-header-left {
    flex: 0 1 auto; 
    padding:10px; 
}
.chat-room-header-left .avatar {
    float:left;
    margin-right:15px;
}
.chat-room-header-left .avatar-text  {
    float:left;    
}
.chat-room-header-center {
    flex: 1 1 auto;    
}
.chat-room-header-center-conversationUsers {

}
.chat-room-header-center-conversationUsers li {
    float:left;
    margin:10px;
}
.chat-room-header-center-conversationUsers li:first-child {
    border-left: 1px solid #eef1f5;
    padding-left:20px;
    margin-left:20px;
}
.chat-room-header-right {
    flex: 0 0 auto;
    padding:20px;
}
.chat-room-header-label{
    font-size:1.5em;
    font-family:'Segoe UI', Helvetica;
    color:#777;
}
.chat-room-header-secondary {
    color:#3995c7;
    font-weight:bold;
}
.chat-room-board {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    cursor:default;

    overflow-y:scroll;
    width: 100%;
    /*max-width: 1000px;*/
    margin: auto;
    padding-right: 20px;

}
.chat-room-send {
    flex: 0 0 100px; 
    display:flex;
    flex-direction:row;     

    width:100%;
    padding:20px 10px;
    border-top:1px solid #dedede;
}
.chat-room-send-input {
	border-radius:5px;
    flex:1 1 auto;
    resize:none;
    padding:5px 8px;
    border:none;
	height: 100%;
	transition:ease-in-out;

}
.chat-room-send-btn {
	flex: 0 0 100px;
	text-align: center;
	background-color: transparent;
	transition: background-color linear 200ms;
}
.chat-room-send-btn.enabled{
    background-color:#59A182;
}
.chat-room-send-btn a {
    color:#b1b1b1;
    display:block;
    margin-top:10px;
}
.chat-room-send-btn.enabled a {
    color:#ffffff;
}

/*#region Message */
.chat-message {
    margin: 20px auto;
    width: 90%;
    max-width: 1000px;
    position: relative;
}
.chat-message-separator {
    width:90%;
    max-width:1000px;
    padding: 5px;
    margin: 60px auto;
    color:#777;
    font-size:1.2em;
    text-align:center;
    border-top:1px solid #dedede;
}
.chat-message-author {
    position: absolute;
}
.chat-message-author img { 
    width:65px;
}
.chat-message-author .avatar { 
    /*font-size:2em;
    padding-top:10px;*/
}
.chat-message-content {
    padding: 15px;
    box-sizing: content-box;
    min-width:200px;
    word-wrap: break-word;
    max-width:70%;
    border-radius:30px;
}
.chat-message-content:before {
    position: absolute;
    top: 5px;
    border-style: solid;
    content: '';
    display:none;
}
.chat-message-content a {    
    text-decoration:underline;
	max-width:200px;
	text-overflow: ellipsis;
}
.chat-message-time {
    margin-left: 20px;
    font-size: 0.9em;
    float:right;
}
.chat-message-text {
    float:left;
	max-width:100%
}
.chat-message-seen {
    position:absolute;
    bottom:13px;
    background-color:transparent;
    color:#ccc;
}

/*#region Other's Message */
.chat-message[data-author='false'] {
    padding-left: 80px;    
}
    .chat-message[data-author='false'] .chat-message-author {
        left: 0;
    }
    .chat-message[data-author='false'] .chat-message-time {
        color:rgba(255, 255, 255, 0.5);
    }
    .chat-message[data-author='false'] .chat-message-content {        
        float:left;
        color: #fff;
        /*border-top-left-radius:10px;
        border-bottom-left-radius:35px;
        border-top-right-radius:30px;
        border-bottom-right-radius:30px;*/
    }
    .chat-message[data-author='false'] .chat-message-content:before {
        left: 65px;
        border-width: 0 15px 10px 0;
        border-color: transparent #3995c7 transparent transparent;
    }
    .chat-message[data-author='false'] .chat-message-content a {    
        color:#fff;
    }
/*#endregion */

/*#region My Message */
.chat-message[data-author='true'] {
    padding-right: 80px;    
}
    .chat-message[data-author='true'] .chat-message-author {
        right: 0;
    }
    .chat-message[data-author='true'] .chat-message-time {
        color:#a9a9a9;
    }
    .chat-message[data-author='true'] .chat-message-content {
        float:right;
        background-color: #ffffff;
        color:#000;
        /*border-top-left-radius:30px;
        border-bottom-left-radius:30px;
        border-top-right-radius:10px;
        border-bottom-right-radius:35px;*/
    }
    .chat-message[data-author='true'] .chat-message-content:before {  
        right:65px;      
        border-width: 10px 15px 0 0;
        border-color: #ffffff transparent transparent transparent;
    }
    .chat-message[data-author='true'] .chat-message-content a {    
        color:#337ab7;
    }
/*#endregion */

/*#endregion */
/*#endregion */

/*#region Home */
.chat-home {
    flex-grow:1;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    min-height: 0;
}
.chat-home-latest {
    display:flex;
    flex-direction:column;
    align-items:center;
}
.chat-home-latest-label {
    font-family:'Segoe UI Light', Helvetica;    
    font-size:2.5em;
    color:#777;
    display:block;
}
.chat-home-latest-list {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
}  
.chat-home-latest-list li {
    margin-top:40px;
    padding:10px;
    text-align:center;
    transition:all ease-in 80ms;        
}
.chat-home-latest-list a {
    display: block;
    width: 125px;
    margin: auto;
    padding: 10px;
    transition: all linear 100ms;
    border-radius:5px;
}
.chat-home-latest-list a:hover {
    transform:scale(1.1);   
    background-color:#ffffff;
    box-shadow: 0 0 50px 10px #ccc;
}
.chat-home-latest-list li .avatar {   
    margin:0 auto 10px auto;
}
.chat-home-latest-name {
    color:#777;
    font-weight:bold;
}
/*#endregion */

/*#region Avatars */
.avatar {
    color: #ffffff;
    border-radius: 50%;
    overflow: hidden;
    cursor:pointer;
    background-color:#eef1f5;

    display:flex;
    align-items:center;
    justify-content:center;
}
.avatar:hover{
    /*color:#fff;*/
}
.avatar-xs {
    width:20px;
    height:20px;
    font-size:0.9em;
}
.avatar-sm {
    width:40px;
    height:40px;
}
.avatar-md {
    width:50px;
    height:50px;
    font-size:1.5em;
}
.avatar-lg {
    width:70px;
    height:70px;
    font-size:2.2em;
}
.avatar-xl{
    width:150px;
    height:150px;
    font-size:4em;
}

.avatar img {
    width:100%;
}
/*#endregion */