.chat-sidebar { background-color: #f5f5f5; border-left: 1px solid #e7e7e7; position: fixed; right: -240px; bottom: 0; top: 55px; width: 240px; z-index: 2; -webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .chat-sidebar .user-name { font-family: "Quicksand", sans-serif; } .chat-sidebar .content { font-family: "Quicksand", sans-serif; } .chat-sidebar .textarea { font-family: "Quicksand", sans-serif; } .chat-sidebar .seen { font-family: "Quicksand", sans-serif; } .chat-sidebar.is-active { right: 0; } .chat-user-search .input-group-addon { background: #fff; border-radius: 0px; border: 0px; } .chat-user-search .form-control { border: 0px; } .hidden { display: none; } /* Home Chat Widget ---------------------------------*/ .chat-widget .chat_window { position: relative; width: 100%; height: 500px; border-radius: 10px; background-color: #ffffff; background-color: #f8f8f8; overflow: hidden; } .chat-widget .messages { position: relative; list-style: none; padding: 20px 10px 0 10px; margin: 0; min-height: 350px; overflow: scroll; } .chat-widget .messages .message { clear: both; overflow: hidden; margin-bottom: 20px; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; opacity: 0; } .chat-widget .messages .message .avatar { width: 60px; height: 60px; border-radius: 50%; display: inline-block; } .chat-widget .messages .message .text_wrapper { display: inline-block; padding: 20px; border-radius: 6px; width: calc(100% - 100px); min-width: 100px; position: relative; } .chat-widget .messages .message .text_wrapper .text { font-size: 18px; font-weight: 300; } .chat-widget .messages .message .text_wrapper::after { top: 18px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 13px; margin-top: 0px; } .chat-widget .messages .message .text_wrapper:before { top: 18px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .chat-widget .messages .message .text_wrapper::before { border-width: 15px; margin-top: -2px; } .chat-widget .messages .message.left .text_wrapper::after, .chat-widget .messages .message.left .text_wrapper::before { right: 100%; border-right-color: #ffe6cb; } .chat-widget .messages .message.left .avatar { background-color: #f5886e; float: left; } .chat-widget .messages .message.left .text_wrapper { background-color: #ffe6cb; margin-left: 20px; } .chat-widget .messages .message.left .text { color: #c48843; } .chat-widget .messages .message.right .text_wrapper::after, .chat-widget .messages .message.right .text_wrapper::before { left: 100%; border-left-color: #c7eafc; } .chat-widget .messages .message.right .avatar { background-color: #fdbf68; float: right; } .chat-widget .messages .message.right .text_wrapper { background-color: #c7eafc; margin-right: 20px; float: right; } .chat-widget .messages .message.right .text { color: #45829b; } .chat-widget .messages .message.appeared { opacity: 1; } .chat-widget .bottom_wrapper { position: relative; position: absolute; width: 100%; background-color: #ffffff; padding: 20px 20px; bottom: 0; } .chat-widget .bottom_wrapper .message_input_wrapper { display: inline-block; height: 50px; border-radius: 25px; border: 1px solid #bcbdc0; width: calc(100% - 160px); position: relative; padding: 0 20px; } .chat-widget .bottom_wrapper .message_input_wrapper .message_input { border: none; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; width: calc(100% - 45px); position: absolute; outline-width: 0; color: gray; } .chat-widget .bottom_wrapper .send_message { width: 140px; height: 50px; display: inline-block; border-radius: 50px; background-color: #a3d063; border: 2px solid #a3d063; color: #ffffff; cursor: pointer; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; text-align: center; float: right; } .chat-widget .bottom_wrapper .send_message .text { font-size: 18px; font-weight: 300; display: inline-block; line-height: 48px; } .chat-widget .bottom_wrapper .send_message:hover { color: #a3d063; background-color: #ffffff; } .chat-widget .message_template { display: none; } /*# sourceMappingURL=chat.css.map */