#wbk-chat { } 

/* users */

#wbk-chat.users { display: flex; width: 100%; flex-direction: column; gap: 20px; } 

#wbk-chat.users>ul { display: grid; width: 100%; grid-template-columns: repeat(4, 1fr); } 

#wbk-chat.users>ul li { width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 20px; } 

#wbk-chat.users>ul li>div { } 

#wbk-chat.users>ul li>div.avatar { } 

#wbk-chat.users>ul li>div.avatar img { border-radius: 3px; } 

#wbk-chat.users>ul li>div.user-name { font-size: 16px; font-weight: bold; } 

#wbk-chat.users>ul li>div.buttons { font-size: 13px; display: flex; justify-content: space-between; gap: 12px; } 

#wbk-chat.users>ul li>div.buttons a { } 

#wbk-chat.users>ul li>div.buttons a:hover { color: #e50914; } 

/* chat list */

#wbk-chat.list { } 

#wbk-chat.list>ul { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; box-sizing: border-box; } 

#wbk-chat.list>ul>li { display: flex; gap: 10px; padding: 10px; background: #eee; border-radius: 3px; align-items: center; font-size: 14px; position: relative; } 

#wbk-chat.list>ul>li>div { } 

#wbk-chat.list>ul>li>div.avatar { width: 50px; border-radius: 3px; overflow: hidden; } 

#wbk-chat.list>ul>li>div.user-name { font-weight: bolder; } 

#wbk-chat.list>ul>li>div.buttons { position: absolute; right: 20px; } 

#wbk-chat.list>ul>li>div.buttons>a { padding: 10px 20px; background: #e50914; color: #fff; border-radius: 3px; } 

/* chat */

#wbk-chat.chat { display: flex; flex-direction: column; width: 100%; gap: 20px; background: #eee; padding: 20px; border-radius: 3px; } 

#wbk-chat.chat .recipients { display: flex; align-items: center; gap: 20px; } 

#wbk-chat.chat .recipients .avatar { width: 50px; border-radius: 3px; overflow: hidden; } 

#wbk-chat.chat .recipients .name { } 

#wbk-chat.chat .more-list { display: flex; justify-content: center; } 

#wbk-chat.chat .more-list>a { display: flex; justify-content: center; background: #e50914; color: #fff; padding: 5px 20px; border-radius: 3px; font-size: 13px; } 

#wbk-chat.chat .chat-content { display: flex; flex-direction: column; gap: 8px; max-height: 600px; overflow-y: scroll; } 

#wbk-chat.chat .chat-content .wait { text-align: center; } 

#wbk-chat.chat .chat-content .message { border-radius: 3px; display: flex; flex-direction: column; } 

#wbk-chat.chat .chat-content .message.ing .content { width: auto; padding: 10px 20px !important; justify-content: center; } 

#wbk-chat.chat .chat-content .message .name { font-size: 14px; font-weight: bold; } 

#wbk-chat.chat .chat-content .message .content { display: flex; width: 100%; background: #fff; padding: 10px; border-radius: 3px; width: 70%; position: relative; padding-right: 140px; } 

#wbk-chat.chat .chat-content .message .content.linked { background: #ffd7d9; font-weight: bold; } 

#wbk-chat.chat .chat-content .message .date { font-size: 12px; position: absolute; right: 10px; top: 15px; } 

#wbk-chat.chat .chat-content .message.recipient { } 

#wbk-chat.chat .chat-content .message.recipient .content { } 

#wbk-chat.chat .chat-content .message.sender { align-items: end; } 

#wbk-chat.chat .chat-content .message.sender .content { align-items: end; justify-content: flex-end; padding-right: 10px; padding-left: 140px; } 

#wbk-chat.chat .chat-content .message.sender .date { right: unset; left: 10px; } 

#wbk-chat.chat .type { display: flex; align-items: flex-end; gap: 12px; width: 100%; background: #fff; border-radius: 3px; padding: 10px; } 

#wbk-chat.chat .type textarea { width: 100%; border-radius: 3px; min-height: 100px; border: 1px solid #ddd; padding: 5px; } 

#wbk-chat.chat .type>a { display: flex; width: 100px; justify-content: center; background: #e50914; color: #fff; padding: 10px 20px; border-radius: 3px; } 

/* pagenation */

#wbk-chat .pagenation { display: flex; justify-content: center; gap: 12px; padding: 20px 0 20px; width: 100%; } 

#wbk-chat .pagenation ul { display: flex; gap: 12px; flex-direction: row; } 

#wbk-chat .pagenation ul li { border: 1px solid #e50914; border-radius: 3px } 

#wbk-chat .pagenation ul li a { color: #e50914; padding: 0; font-size: 14px; display: flex; justify-content: center; align-items: center; min-width: 30px; min-height: 30px; line-height: 1; } 

#wbk-chat .pagenation ul li.active a { color: #fff; } 

#wbk-chat .pagenation ul li.active { border-color: #e50914; background: #e50914; } 

#wbk-chat .pagenation ul li:hover { border-color: #e50914; background: #e50914; } 

#wbk-chat .pagenation ul li:hover a { color: #fff; } 

#wbk-chat .pagenation .prev-page { display: none; } 

#wbk-chat .pagenation .prev-page.active { display: flex; align-items: center; color: #e50914; } 

#wbk-chat .pagenation .next-page { display: none; } 

#wbk-chat .pagenation .next-page.active { display: flex; align-items: center; color: #e50914; }