.chat-box { position: relative; z-index: 1; height: 587px; margin: 40px; overflow: hidden; background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box;
}
.chat-box * { box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; }

.chat-header { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; border-bottom: 1px solid #f2f2f2; }

.chat-image { display: block; height: 40px; width: 40px; border-radius: 50%; overflow: hidden; text-align: center; }
.chat-image.extra-small { width: 25px; height: 25px; }
.chat-image.small { width: 31px; height: 31px; }
.chat-image.medium { width: 44px; height: 44px; }
.chat-image.large { width: 64px; height: 64px; }
.chat-image img { width: 100%; background-color: white; }

.my-chats { display: inline-block; vertical-align: top; position: relative; height: 100%; width: 29%; border-right: 1px solid #f2f2f2; border-left: 1px solid #cccccc; }
.my-chats > header { font-size: 19px; color: #282828; }
.my-chats > header .chat-add { position: absolute; top: 0; right: 0; margin-top: 15px; width: 120px; text-align: center; line-height: 38px; cursor: pointer; outline: 0; border: 0; background-color: white; color: #228dcf; font-size: 12px;  }
.my-chats > header .chat-add:after { display: inline-block; content: "+"; font-size: 22px; color: #228dcf;
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    -o-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
}
.my-chats > header .chat-add span { line-height: 38px; vertical-align: top; }

.my-chats > header .user-wrap                                   { padding: 15px; height: 68px; }
.my-chats > header .user-wrap .user-profile                     { cursor: pointer; font-size: 12px; min-height: 36px; }
.my-chats > header .user-wrap .user-profile > .open-dropdown    { float: right; height: 36px; line-height: 36px; width: 18px; text-align: center; font-size: 18px; color: #228dcf; margin-left: 10px; }
.my-chats > header .user-wrap .user-profile > .user-photo       { float: left; width: 36px; height: 36px; overflow: hidden; border-radius: 18px; margin-right: 10px; }
.my-chats > header .user-wrap .user-profile > .user-photo img   { width: 100%; }
.my-chats > header .user-wrap .user-profile > .user-name        { color: #282828; height: 18px; line-height: 18px; font-weight: bold; }
.my-chats > header .user-wrap .user-profile > .user-status      { color: #282828; height: 18px; line-height: 18px; }
.my-chats > header .user-wrap .user-profile > .user-status i    { color: #3cb879; }

.my-chats > header .search-wrap { padding: 5px 10px; height: 40px; border-top: 1px solid #f2f2f2; }
.my-chats > header .search-wrap .icon-wrap { position: relative; }
.my-chats > header .search-wrap .icon-wrap i { position: absolute; left: 8px; top: 8px; font-size: 13px; color: #cccccc; }
.my-chats > header .search-wrap .icon-wrap i:before { transition: all 150ms ease-out; }
.my-chats > header .search-wrap .search-for-chat { transition: all 150ms ease-out; border: none; border-radius: 4px; display: block;  height: 30px; width: 100%; padding: 0 10px 0 30px; }
.my-chats > header .search-wrap .search-for-chat::-webkit-input-placeholder { font-style: italic; }
.my-chats > header .search-wrap .search-for-chat:-moz-placeholder { font-style: italic; }
.my-chats > header .search-wrap .search-for-chat::-moz-placeholder { font-style: italic; }
.my-chats > header .search-wrap .search-for-chat:-ms-input-placeholder { font-style: italic; }
.my-chats > header .search-wrap .search-for-chat::-webkit-input-placeholder { color: #999999; }
.my-chats > header .search-wrap .search-for-chat:-moz-placeholder { color: #999999; }
.my-chats > header .search-wrap .search-for-chat::-moz-placeholder { color: #999999; }
.my-chats > header .search-wrap .search-for-chat:-ms-input-placeholder { color: #999999; }
.my-chats > header .search-wrap .search-for-chat:focus { border-color: #228dcf; }
.my-chats > header .search-wrap .search-for-chat:focus::-webkit-input-placeholder { color: #228dcf; }
.my-chats > header .search-wrap .search-for-chat:focus:-moz-placeholder { color: #228dcf; }
.my-chats > header .search-wrap .search-for-chat:focus::-moz-placeholder { color: #228dcf; }
.my-chats > header .search-wrap .search-for-chat:focus:-ms-input-placeholder { color: #228dcf; }
.my-chats > header .search-wrap .search-for-chat:focus + i { color: #228dcf; }

.my-chats .chats-wrap { position: absolute; width: 100%; bottom: 0; left: 0; top: 108px; overflow: hidden; }
.my-chats .chats-container { overflow: auto; height: 100%; }
.my-chats .chat { display: block; height: 68px; position: relative; padding: 15px 15px 15px 80px; border-bottom: 1px solid #f2f2f2;  cursor: pointer; text-decoration: none; }
.my-chats .chat .chat-image { position: absolute; left: 15px; }
.my-chats .chat .chat-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; color: #228dcf; font-size: 13px; font-weight: 600; margin-bottom: -1px; }
.my-chats .chat .chat-description { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; color: #999999; font-size: 13px; }
.my-chats .chat.selected { background: #1f3c77; }
.my-chats .chat.selected .chat-description,
.my-chats .chat.selected .chat-name { color: #fff; }

.my-chats .chats-search { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; background: white; }


.chats-messages { display: inline-block; vertical-align: top; width: 71%; }
.chats-messages > header { position: relative; padding: 15px; line-height: 68px; text-align: right; height: 68px; }
.chats-messages > header .user-wrap                 { display: inline-block; width: 80%; height: 100%; }
.chats-messages > header .user-wrap .user-photo     { float: left; width: 36px; height: 36px; overflow: hidden; border-radius: 18px; margin-right: 10px; }
.chats-messages > header .user-wrap .user-photo img { width: 100%; }
.chats-messages > header .user-wrap .user-name      { float: left; color: #228dcf; height: 18px; line-height: 35px; font-size: 12px; font-weight: bold; }
.chats-messages > header .attachments               { display: inline-block; width: 20%; height: 100%; color: #529fd6; padding: 0 32px 0 0; font-size: 12px; cursor: pointer; line-height: 35px; vertical-align: top; }

.chats-messages .messages-container { height: 425px; margin-bottom: 20px; padding-top: 50px; overflow: auto; }
.chats-messages .message { position: relative; padding: 0 47px 17px 101px; }
.chats-messages .message:after { display: block; content: ""; clear: both; }
.chats-messages .message .chat-image { position: absolute; left: 48px; top: 50px; }
.chats-messages .message .name { display: block; color: #228dcf; font-weight: 600; font-size: 12px; margin-bottom: -1px; }
.chats-messages .message .time { display: block; margin-bottom: 15px; color: #999999; font-size: 12px; }
.chats-messages .message .message-data { background: #1f3c77; text-align: left; min-height: 51px; padding: 8px 12px 5px 12px; width: 60%; position: relative; font-size: 13px; color: #fff; border-radius: 8px; display: inline-block; vertical-align: top; }
.chats-messages .message .message-data:before { width: 10px; height: 10px; background: inherit; position: absolute; left: 17px; top: -4px; content: "";  -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.chats-messages .message .message-data .attachment { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; display: block; position: relative; padding: 0 0 0 48px; margin: 8px 0 4px 0; font-size: inherit; color: inherit; font-style: italic; }

.chats-messages .message .message-data .attachment.file { min-height: 34px; line-height: 34px; background: url("../img/chat/file_pdf.png") no-repeat 1px -2px; }
.chats-messages .message.mine .content { width: 100%; float: right; text-align: right; }
.chats-messages .message.mine .message-data { background: #228dcf; }
.chats-messages .message.mine .message-data:before { left: auto; right: 18px; }
.chats-messages .message.mine .chat-image { position: absolute; display: none; left: 48px; top: 50px; }
.chats-messages .chat-new-message { position: relative; margin: 0 60px 0 29px; }
.chats-messages .chat-new-message .chat-attachment { position: absolute; top: 6px; left: 10px; z-index: 1; cursor: pointer; }
.chats-messages .chat-new-message .chat-attachment:before { font-family: 'icomoon', sans-serif; content: "\e903"; color: #999999; font-size: 18px; }
.chats-messages .chat-new-message .message { resize: none; width: calc(100% - 140px); height: 32px; border: none; border-bottom: 1px solid #cccccc; padding: 5px 100px 0 38px;  border-radius: 4px; margin: 0; font-size: 13px; color: #282828; }
.chats-messages .chat-new-message .send-message { cursor: pointer; border-radius: 4px; position: absolute; top: 0; right: 0; min-width: 95px; line-height: 32px; height: 32px; border: 0; outline: 0; background: #228dcf; color: #fff; font-size: 12px; }

.search-opened .my-chats { font-size: 0; }
.search-opened .my-chats header .chat-add::after { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.search-opened .my-chats .chats-search { vertical-align: top; left: 0; overflow-y: scroll; }