/* DO NOT EDIT THIS FILE AND ITS COMPILED FILE OF CHAT.CSS */ @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800"); @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap"); @import url("../chat/animated.css"); .switch { font-size: 1rem; position: relative; } .switch input { position: absolute; height: 1px; width: 1px; background: none; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; padding: 0; } .switch input + label { position: relative; min-width: calc(calc(2.375rem * .8) * 2); border-radius: calc(2.375rem * .8); height: calc(2.375rem * .8); line-height: calc(2.375rem * .8); display: inline-block; cursor: pointer; outline: none; user-select: none; vertical-align: middle; text-indent: calc(calc(calc(2.375rem * .8) * 2) + .5rem); } .switch input + label::before, .switch input + label::after { content: ''; position: absolute; top: 0; left: 0; width: calc(calc(2.375rem * .8) * 2); bottom: 0; display: block; } .switch input + label::before { right: 0; background-color: #dee2e6; border-radius: calc(2.375rem * .8); transition: 0.2s all; } .switch input + label::after { top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background-color: white; transition: 0.2s all; } .switch input:checked + label::before { background-color: #ff0000; } .switch input:checked + label::after { margin-left: calc(2.375rem * .8); } .switch input:focus + label::before { outline: none; box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25); } .switch input:disabled + label { color: #868e96; cursor: not-allowed; } .switch input:disabled + label::before { background-color: #e9ecef; } .switch.switch-sm { font-size: 0.875rem; } .switch.switch-sm input + label { min-width: 50px; height: 25px; line-height: 24.8px; text-indent: 57.6px; } .switch.switch-sm input + label::before { width: calc(calc(1.9375rem * .8) * 2); } .switch.switch-sm input + label::after { width: calc(calc(1.9375rem * .8) - calc(2px * 2)); height: calc(calc(1.9375rem * .8) - calc(2px * 2)); } .switch.switch-sm input:checked + label::after { margin-left: calc(1.9375rem * .8); } .switch.switch-lg { font-size: 1.25rem; } .switch.switch-lg input + label { min-width: calc(calc(3rem * .8) * 2); height: calc(3rem * .8); line-height: calc(3rem * .8); text-indent: calc(calc(calc(3rem * .8) * 2) + .5rem); } .switch.switch-lg input + label::before { width: calc(calc(3rem * .8) * 2); } .switch.switch-lg input + label::after { width: calc(calc(3rem * .8) - calc(2px * 2)); height: calc(calc(3rem * .8) - calc(2px * 2)); } .switch.switch-lg input:checked + label::after { margin-left: calc(3rem * .8); } .switch + .switch { margin-left: 1rem; } /* Media Query Break Point START */ /* Media Query Break Point END */ :root { --chat-primary-color: #0e324c; --ce21-chat-primary-color: #0e324c; --ce21-chat-primary-font-color: #FFF; --chat-primary-color-opacity01: rgba(14, 50, 76, 0.1); --chat-primary-color-opacity02: rgba(14, 50, 76, 0.2); --chat-primary-color-opacity08: rgba(14, 50, 76, 0.8); --chat-primary-color-opacity09: rgba(14, 50, 76, 0.9); --chat-lighten-20: #1e6ba2; } .window-chat-section { scrollbar-width: thin; scrollbar-color: #0e324c #e6eaed; height: 0; position: fixed; z-index: 10001; bottom: 0; right: 0; overflow: visible; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin: 0 20px; /*Chat main CSS START*/ /*Chat main CSS END*/ } .window-chat-section ::-webkit-scrollbar { width: 8px; } .window-chat-section ::-webkit-scrollbar-thumb { background: var(--ce21-chat-primary-color, #0e324c); border-radius: 10px; } .window-chat-section ::-webkit-scrollbar-track { border-radius: 0; background: var(--chat-primary-color-opacity01, #e6eaed); } .window-chat-section img { max-width: 100%; } .window-chat-section a:hover { text-decoration: none; } .window-chat-section .ml-3 { margin-left: 2rem; } .window-chat-section .chat-msg-box:not(:first-child) { min-height: 400px; max-height: none; } .window-chat-section .chat-msg-box, .window-chat-section .userContact-chat-msg-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 400px; max-height: calc(100vh - 100px); width: 336px; /*max-width: 336px; min-width: 240px;*/ background: #fff; border-radius: 2px 2px 0 0; -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.2); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.2); -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1); transition-timing-function: cubic-bezier(0, 0, 0.2, 1); -webkit-transition-duration: 167ms; transition-duration: 167ms; border-radius: 5px 5px 0 0; overflow: hidden; } .window-chat-section .chat-msg-box .chat-header, .window-chat-section .chat-msg-box .userContact-chat-header, .window-chat-section .userContact-chat-msg-box .chat-header, .window-chat-section .userContact-chat-msg-box .userContact-chat-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 8px 8px; border-bottom: 1px solid #eee; cursor: pointer; position: relative; } .window-chat-section .chat-msg-box .chat-header .user-details-section, .window-chat-section .chat-msg-box .chat-header .userContact-details-section, .window-chat-section .chat-msg-box .userContact-chat-header .user-details-section, .window-chat-section .chat-msg-box .userContact-chat-header .userContact-details-section, .window-chat-section .userContact-chat-msg-box .chat-header .user-details-section, .window-chat-section .userContact-chat-msg-box .chat-header .userContact-details-section, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-details-section, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .window-chat-section .chat-msg-box .chat-header .user-details-section .user-img, .window-chat-section .chat-msg-box .chat-header .userContact-details-section .user-img, .window-chat-section .chat-msg-box .userContact-chat-header .user-details-section .user-img, .window-chat-section .chat-msg-box .userContact-chat-header .userContact-details-section .user-img, .window-chat-section .userContact-chat-msg-box .chat-header .user-details-section .user-img, .window-chat-section .userContact-chat-msg-box .chat-header .userContact-details-section .user-img, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-details-section .user-img, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section .user-img { height: 40px; width: 40px; margin-right: 10px; position: relative; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #ddd; } .window-chat-section .chat-msg-box .chat-header .user-details-section .user-img:before, .window-chat-section .chat-msg-box .chat-header .userContact-details-section .user-img:before, .window-chat-section .chat-msg-box .userContact-chat-header .user-details-section .user-img:before, .window-chat-section .chat-msg-box .userContact-chat-header .userContact-details-section .user-img:before, .window-chat-section .userContact-chat-msg-box .chat-header .user-details-section .user-img:before, .window-chat-section .userContact-chat-msg-box .chat-header .userContact-details-section .user-img:before, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-details-section .user-img:before, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section .user-img:before { content: ""; height: 10px; width: 10px; position: absolute; bottom: 0; right: 3px; /*background-color: transparent;*/ border-radius: 50%; border: 2px solid #fff; } .window-chat-section .chat-msg-box .chat-header .user-details-section .user-img .username-initial, .window-chat-section .chat-msg-box .chat-header .userContact-details-section .user-img .username-initial, .window-chat-section .chat-msg-box .userContact-chat-header .user-details-section .user-img .username-initial, .window-chat-section .chat-msg-box .userContact-chat-header .userContact-details-section .user-img .username-initial, .window-chat-section .userContact-chat-msg-box .chat-header .user-details-section .user-img .username-initial, .window-chat-section .userContact-chat-msg-box .chat-header .userContact-details-section .user-img .username-initial, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-details-section .user-img .username-initial, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section .user-img .username-initial { /*font-weight: 800;*/ font-size: 18px; color: #FFF; text-transform: uppercase; } .window-chat-section .chat-msg-box .chat-header .user-details-section .user-img img, .window-chat-section .chat-msg-box .chat-header .userContact-details-section .user-img img, .window-chat-section .chat-msg-box .userContact-chat-header .user-details-section .user-img img, .window-chat-section .chat-msg-box .userContact-chat-header .userContact-details-section .user-img img, .window-chat-section .userContact-chat-msg-box .chat-header .user-details-section .user-img img, .window-chat-section .userContact-chat-msg-box .chat-header .userContact-details-section .user-img img, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-details-section .user-img img, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section .user-img img { object-fit: cover; max-width: 100%; border-radius: 50%; width: 100%; height: 100%; } .window-chat-section .chat-msg-box .chat-header .user-details-section .user-details, .window-chat-section .chat-msg-box .chat-header .userContact-details-section .user-details, .window-chat-section .chat-msg-box .userContact-chat-header .user-details-section .user-details, .window-chat-section .chat-msg-box .userContact-chat-header .userContact-details-section .user-details, .window-chat-section .userContact-chat-msg-box .chat-header .user-details-section .user-details, .window-chat-section .userContact-chat-msg-box .chat-header .userContact-details-section .user-details, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-details-section .user-details, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section .user-details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 4px; width: 160px; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } @media only screen and (max-width: 1366px) { .window-chat-section .chat-msg-box .chat-header .user-details-section .user-details, .window-chat-section .chat-msg-box .chat-header .userContact-details-section .user-details, .window-chat-section .chat-msg-box .userContact-chat-header .user-details-section .user-details, .window-chat-section .chat-msg-box .userContact-chat-header .userContact-details-section .user-details, .window-chat-section .userContact-chat-msg-box .chat-header .user-details-section .user-details, .window-chat-section .userContact-chat-msg-box .chat-header .userContact-details-section .user-details, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-details-section .user-details, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section .user-details { /*width: 115px;*/ width: 80px; } } .window-chat-section .chat-msg-box .chat-header .user-details-section .user-details .user-name, .window-chat-section .chat-msg-box .chat-header .userContact-details-section .user-details .user-name, .window-chat-section .chat-msg-box .userContact-chat-header .user-details-section .user-details .user-name, .window-chat-section .chat-msg-box .userContact-chat-header .userContact-details-section .user-details .user-name, .window-chat-section .userContact-chat-msg-box .chat-header .user-details-section .user-details .user-name, .window-chat-section .userContact-chat-msg-box .chat-header .userContact-details-section .user-details .user-name, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-details-section .user-details .user-name, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section .user-details .user-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .window-chat-section .chat-msg-box .chat-header .user-details-section .user-details .user-name a, .window-chat-section .chat-msg-box .chat-header .userContact-details-section .user-details .user-name a, .window-chat-section .chat-msg-box .userContact-chat-header .user-details-section .user-details .user-name a, .window-chat-section .chat-msg-box .userContact-chat-header .userContact-details-section .user-details .user-name a, .window-chat-section .userContact-chat-msg-box .chat-header .user-details-section .user-details .user-name a, .window-chat-section .userContact-chat-msg-box .chat-header .userContact-details-section .user-details .user-name a, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-details-section .user-details .user-name a, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section .user-details .user-name a { font-size: 14px; color: #303130; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .window-chat-section .chat-msg-box .chat-header .user-details-section .user-details .user-name a:hover, .window-chat-section .chat-msg-box .chat-header .userContact-details-section .user-details .user-name a:hover, .window-chat-section .chat-msg-box .userContact-chat-header .user-details-section .user-details .user-name a:hover, .window-chat-section .chat-msg-box .userContact-chat-header .userContact-details-section .user-details .user-name a:hover, .window-chat-section .userContact-chat-msg-box .chat-header .user-details-section .user-details .user-name a:hover, .window-chat-section .userContact-chat-msg-box .chat-header .userContact-details-section .user-details .user-name a:hover, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-details-section .user-details .user-name a:hover, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section .user-details .user-name a:hover { /* color: #0083aa;*/ } .window-chat-section .chat-msg-box .chat-header .user-details-section .user-details .last-seen, .window-chat-section .chat-msg-box .chat-header .userContact-details-section .user-details .last-seen, .window-chat-section .chat-msg-box .userContact-chat-header .user-details-section .user-details .last-seen, .window-chat-section .chat-msg-box .userContact-chat-header .userContact-details-section .user-details .last-seen, .window-chat-section .userContact-chat-msg-box .chat-header .user-details-section .user-details .last-seen, .window-chat-section .userContact-chat-msg-box .chat-header .userContact-details-section .user-details .last-seen, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-details-section .user-details .last-seen, .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section .user-details .last-seen { font-size: 12px; } .window-chat-section .chat-msg-box .user-btn-section, .window-chat-section .userContact-chat-msg-box .user-btn-section { display: -webkit-box; display: -ms-flexbox; display: flex; } .window-chat-section .chat-msg-box .user-btn-section > a, .window-chat-section .userContact-chat-msg-box .user-btn-section > a { height: 30px; width: 30px; border-radius: 50%; overflow: hidden; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .window-chat-section .chat-msg-box .user-btn-section > a:hover, .window-chat-section .userContact-chat-msg-box .user-btn-section > a:hover { background-color: #eee; } .window-chat-section .chat-msg-box .user-btn-section > a:hover img, .window-chat-section .userContact-chat-msg-box .user-btn-section > a:hover img { opacity: 1; } .window-chat-section .chat-msg-box .user-btn-section > a img, .window-chat-section .userContact-chat-msg-box .user-btn-section > a img { opacity: 0.6; } .window-chat-section .chat-msg-box .user-btn-section > a.minimize-icon:hover i, .window-chat-section .userContact-chat-msg-box .user-btn-section > a.minimize-icon:hover i { opacity: 1; } .window-chat-section .chat-msg-box .user-btn-section > a.minimize-icon:focus, .window-chat-section .userContact-chat-msg-box .user-btn-section > a.minimize-icon:focus { text-decoration: none; outline: none; } .window-chat-section .chat-msg-box .user-btn-section > a.minimize-icon i, .window-chat-section .userContact-chat-msg-box .user-btn-section > a.minimize-icon i { color: #000; opacity: 0.6; } .window-chat-section .chat-msg-box .user-btn-section > a.minimize-icon i.fa-window-maximize, .window-chat-section .userContact-chat-msg-box .user-btn-section > a.minimize-icon i.fa-window-maximize { display: none; } .window-chat-section .chat-msg-box .user-btn-section > a.min-max-icon img, .window-chat-section .userContact-chat-msg-box .user-btn-section > a.min-max-icon img { width: 14px; } .window-chat-section .chat-msg-box .user-btn-section > a.min-max-icon img.compress-icon, .window-chat-section .userContact-chat-msg-box .user-btn-section > a.min-max-icon img.compress-icon { display: none; } .window-chat-section .chat-msg-box .user-btn-section > a.close-btn img, .window-chat-section .userContact-chat-msg-box .user-btn-section > a.close-btn img { width: 18px; } .window-chat-section .chat-msg-box .user-btn-section .more-option-btn > a, .window-chat-section .userContact-chat-msg-box .user-btn-section .more-option-btn > a { height: 30px; width: 30px; border-radius: 50%; overflow: hidden; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; margin: 0 2px; } .window-chat-section .chat-msg-box .user-btn-section .more-option-btn > a:hover, .window-chat-section .userContact-chat-msg-box .user-btn-section .more-option-btn > a:hover { background-color: #eee; } .window-chat-section .chat-msg-box .user-btn-section .more-option-btn > a:hover img, .window-chat-section .userContact-chat-msg-box .user-btn-section .more-option-btn > a:hover img { opacity: 1; } .window-chat-section .chat-msg-box .user-btn-section .more-option-btn > a img, .window-chat-section .userContact-chat-msg-box .user-btn-section .more-option-btn > a img { width: 18px; opacity: 0.6; } .window-chat-section .chat-msg-box .user-btn-section .more-option-btn.open > a, .window-chat-section .userContact-chat-msg-box .user-btn-section .more-option-btn.open > a { background-color: #eee; } .window-chat-section .chat-msg-box .user-btn-section .more-option-btn.open > a img, .window-chat-section .userContact-chat-msg-box .user-btn-section .more-option-btn.open > a img { opacity: 1; } .window-chat-section .chat-msg-box .user-btn-section .more-option-btn .dropdown-menu, .window-chat-section .userContact-chat-msg-box .user-btn-section .more-option-btn .dropdown-menu { left: auto; right: 0; } .window-chat-section .chat-msg-box .user-btn-section .more-option-btn .dropdown-menu > li > a, .window-chat-section .userContact-chat-msg-box .user-btn-section .more-option-btn .dropdown-menu > li > a { padding: 3px 10px; } .window-chat-section .chat-msg-box .chat-content-box, .window-chat-section .userContact-chat-msg-box .chat-content-box { position: relative; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .window-chat-section .chat-msg-box .chat-content-box .chatbox-editor, .window-chat-section .userContact-chat-msg-box .chat-content-box .chatbox-editor { position: fixed; bottom: 0; left: 0; width: 100%; padding: 15px 10px 5px; border-top: 1px solid #eee; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .window-chat-section .chat-msg-box .chat-content-box .chatbox-editor .chat-editor textarea, .window-chat-section .userContact-chat-msg-box .chat-content-box .chatbox-editor .chat-editor textarea { resize: none; border-color: #eee; box-shadow: none; } .window-chat-section .chat-msg-box .chat-content-box .chatbox-editor .chat-editor textarea:focus, .window-chat-section .userContact-chat-msg-box .chat-content-box .chatbox-editor .chat-editor textarea:focus { outline: none; box-shadow: none; border-color: #989898; } .window-chat-section .chat-msg-box .chat-content-box .chatbox-editor .chat-btns, .window-chat-section .userContact-chat-msg-box .chat-content-box .chatbox-editor .chat-btns { display: flex; justify-content: space-between; margin-top: 5px; } .window-chat-section .chat-msg-box .chat-content-box .chatbox-editor .chat-btns .chat-btn, .window-chat-section .userContact-chat-msg-box .chat-content-box .chatbox-editor .chat-btns .chat-btn { display: flex; align-items: center; } .window-chat-section .chat-msg-box .chat-content-box .chatbox-editor .chat-btns .chat-btn a, .window-chat-section .userContact-chat-msg-box .chat-content-box .chatbox-editor .chat-btns .chat-btn a { height: 30px; width: 30px; border-radius: 50%; overflow: hidden; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .window-chat-section .chat-msg-box .chat-content-box .chatbox-editor .chat-btns .chat-btn a:hover, .window-chat-section .userContact-chat-msg-box .chat-content-box .chatbox-editor .chat-btns .chat-btn a:hover { background-color: #eee; } .window-chat-section .chat-msg-box .chat-content-box .chatbox-editor .chat-btns .chat-btn a:hover img, .window-chat-section .userContact-chat-msg-box .chat-content-box .chatbox-editor .chat-btns .chat-btn a:hover img { opacity: 1; } .window-chat-section .chat-msg-box .chat-content-box .chatbox-editor .chat-btns .chat-btn a img, .window-chat-section .userContact-chat-msg-box .chat-content-box .chatbox-editor .chat-btns .chat-btn a img { width: 18px; opacity: 0.6; } .window-chat-section .chat-msg-box .chat-content-box .chatbox-editor .chat-btns .msg-send-btn a, .window-chat-section .userContact-chat-msg-box .chat-content-box .chatbox-editor .chat-btns .msg-send-btn a { background-color: #eee; padding: 5px 10px; font-weight: 600; font-size: 14px; height: 30px; border-radius: 50rem; overflow: hidden; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; color: #989898; } .window-chat-section .chat-msg-box .chat-content-box .chatbox-editor .chat-btns .msg-send-btn a:hover, .window-chat-section .userContact-chat-msg-box .chat-content-box .chatbox-editor .chat-btns .msg-send-btn a:hover { color: #000; } .window-chat-section .chat-msg-box .chat-content-box .chatbox-editor .chat-btns .msg-send-btn a:hover img, .window-chat-section .userContact-chat-msg-box .chat-content-box .chatbox-editor .chat-btns .msg-send-btn a:hover img { opacity: 1; } .window-chat-section .chat-msg-box .chat-content-box .chatbox-editor .chat-btns .msg-send-btn a img, .window-chat-section .userContact-chat-msg-box .chat-content-box .chatbox-editor .chat-btns .msg-send-btn a img { width: 16px; opacity: 0.6; margin-right: 3px; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .window-chat-section .chat-msg-box .user-desc-section, .window-chat-section .userContact-chat-msg-box .user-desc-section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 15px 10px; border-bottom: 1px solid #eee; } .window-chat-section .chat-msg-box .user-desc-section .user-img, .window-chat-section .userContact-chat-msg-box .user-desc-section .user-img { height: 60px; max-width: 60px; min-width: 60px; margin-right: 10px; position: relative; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #ddd; } .window-chat-section .chat-msg-box .user-desc-section .user-img:before, .window-chat-section .userContact-chat-msg-box .user-desc-section .user-img:before { content: ""; height: 15px; width: 15px; position: absolute; bottom: 0; right: 5px; /*background-color: transparent;*/ /*#989898*/ border-radius: 50%; border: 2px solid #fff; } .window-chat-section .chat-msg-box .user-desc-section .user-img .username-initial, .window-chat-section .userContact-chat-msg-box .user-desc-section .user-img .username-initial { /*font-weight: 800;*/ font-size: 30px; color: #FFF; } .window-chat-section .chat-msg-box .user-desc-section .user-img img, .window-chat-section .userContact-chat-msg-box .user-desc-section .user-img img { object-fit: cover; max-width: 100%; border-radius: 50%; width: 100%; height: 100%; } .window-chat-section .chat-msg-box .user-desc-section .user-details, .window-chat-section .userContact-chat-msg-box .user-desc-section .user-details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .window-chat-section .chat-msg-box .user-desc-section .user-details .user-name a, .window-chat-section .userContact-chat-msg-box .user-desc-section .user-details .user-name a { font-size: 16px; color: #303130; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .window-chat-section .chat-msg-box .user-desc-section .user-details .user-name a:hover, .window-chat-section .userContact-chat-msg-box .user-desc-section .user-details .user-name a:hover { /* color: #0083aa;*/ } .window-chat-section .chat-msg-box .user-desc-section .user-details .user-info, .window-chat-section .userContact-chat-msg-box .user-desc-section .user-details .user-info { font-size: 12px; } .window-chat-section .chat-msg-box .unread-msg-count, .window-chat-section .chat-msg-box .unread-user-count, .window-chat-section .userContact-chat-msg-box .unread-msg-count, .window-chat-section .userContact-chat-msg-box .unread-user-count { display: none; } .window-chat-section .chat-msg-box .message-counter, .window-chat-section .userContact-chat-msg-box .message-counter { display: none; } .window-chat-section .chat-msg-box.unread_msg .message-counter, .window-chat-section .userContact-chat-msg-box.unread_msg .message-counter { display: block; } .window-chat-section .chat-msg-box.chat-responsive-box .chat-content-box ::-webkit-scrollbar-thumb, .window-chat-section .userContact-chat-msg-box.chat-responsive-box .chat-content-box ::-webkit-scrollbar-thumb { background: var(--ce21-chat-primary-color, #0e324c); border-radius: 10px; } @media only screen and (max-width: 767px) { .window-chat-section .chat-msg-box.chat-responsive-box.minimized, .window-chat-section .userContact-chat-msg-box.chat-responsive-box.minimized { position: relative; transform: inherit !important; min-height: 45px !important; height: 45px; margin-bottom: 10px; width: 45px !important; min-width: 45px !important; border-radius: 50px 50px 0px 50px; display: flex; justify-content: center; align-items: center; border: none !important; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .window-chat-section .chat-msg-box.chat-responsive-box.minimized.unread_msg .chat-header .unread-msg-count, .window-chat-section .userContact-chat-msg-box.chat-responsive-box.minimized.unread_msg .chat-header .unread-msg-count { right: auto; top: -5px; left: -5px; z-index: 1; } .window-chat-section .chat-msg-box.chat-responsive-box.minimized .chat-content-box, .window-chat-section .userContact-chat-msg-box.chat-responsive-box.minimized .chat-content-box { display: none; } .window-chat-section .chat-msg-box.chat-responsive-box.minimized .chat-header, .window-chat-section .userContact-chat-msg-box.chat-responsive-box.minimized .chat-header { border: none !important; padding: 0 !important; margin-right: 0 !important; height: 100%; } .window-chat-section .chat-msg-box.chat-responsive-box.minimized .chat-header .user-details-section .user-details, .window-chat-section .userContact-chat-msg-box.chat-responsive-box.minimized .chat-header .user-details-section .user-details { display: none; } .window-chat-section .chat-msg-box.chat-responsive-box.minimized .chat-header .user-details-section .user-img, .window-chat-section .userContact-chat-msg-box.chat-responsive-box.minimized .chat-header .user-details-section .user-img { margin-right: 0; } .window-chat-section .chat-msg-box.chat-responsive-box.minimized .chat-header .user-btn-section, .window-chat-section .userContact-chat-msg-box.chat-responsive-box.minimized .chat-header .user-btn-section { position: absolute; top: -5px; right: -5px; } .window-chat-section .chat-msg-box.chat-responsive-box.minimized .chat-header .user-btn-section a:hover, .window-chat-section .userContact-chat-msg-box.chat-responsive-box.minimized .chat-header .user-btn-section a:hover { background-color: transparent; } .window-chat-section .chat-msg-box.chat-responsive-box.minimized .chat-header .user-btn-section a.close-btn, .window-chat-section .userContact-chat-msg-box.chat-responsive-box.minimized .chat-header .user-btn-section a.close-btn { background-color: #fff; height: 20px; width: 20px; padding: 3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .window-chat-section .chat-msg-box.chat-responsive-box.minimized .chat-header .user-btn-section a.close-btn:hover, .window-chat-section .userContact-chat-msg-box.chat-responsive-box.minimized .chat-header .user-btn-section a.close-btn:hover { background-color: #ff0000; } .window-chat-section .chat-msg-box.chat-responsive-box .chat-header .user-btn-section .min-max-icon, .window-chat-section .userContact-chat-msg-box.chat-responsive-box .chat-header .user-btn-section .min-max-icon { display: none; } .window-chat-section .chat-msg-box.chat-responsive-box .chat-header .user-btn-section a.minimize-icon .fa-minus :hover, .window-chat-section .userContact-chat-msg-box.chat-responsive-box .chat-header .user-btn-section a.minimize-icon .fa-minus :hover { background-color: transparent !important; } .window-chat-section .chat-msg-box.chat-responsive-box .chat-header .user-btn-section a.minimize-icon .fa-window-maximize, .window-chat-section .userContact-chat-msg-box.chat-responsive-box .chat-header .user-btn-section a.minimize-icon .fa-window-maximize { display: none; } } @media only screen and (max-width: 450px) { .window-chat-section .chat-msg-box.chat-responsive-box, .window-chat-section .userContact-chat-msg-box.chat-responsive-box { min-width: 240px; max-width: 100%; width: auto; } .window-chat-section .chat-msg-box.chat-responsive-box .chat-content-box .chat-msg .chat-footer .chat-editor-box, .window-chat-section .userContact-chat-msg-box.chat-responsive-box .chat-content-box .chat-msg .chat-footer .chat-editor-box { padding-right: 35px; } .window-chat-section .chat-msg-box.chat-responsive-box .chat-content-box .chat-msg .chat-footer .chat-editor-box .chat-form-control:empty:after, .window-chat-section .userContact-chat-msg-box.chat-responsive-box .chat-content-box .chat-msg .chat-footer .chat-editor-box .chat-form-control:empty:after { font-size: 12px; } } .window-chat-section .chat-msg-box a.minimize-icon .fa-window-maximize, .window-chat-section .userContact-chat-msg-box a.minimize-icon .fa-window-maximize { display: none; } .window-chat-section .chat-msg-box.minimized, .window-chat-section .userContact-chat-msg-box.minimized { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); transition-duration: 167ms; transform: translateY(100%) translateY(-46px); width: 280px; overflow: inherit; } @media only screen and (max-width: 1366px) { .window-chat-section .chat-msg-box.minimized.chat-responsive-box, .window-chat-section .userContact-chat-msg-box.minimized.chat-responsive-box { width: 200px; } } .window-chat-section .chat-msg-box.minimized.unread_msg, .window-chat-section .userContact-chat-msg-box.minimized.unread_msg { position: relative; } .window-chat-section .chat-msg-box.minimized.unread_msg .chat-header .unread-msg-count, .window-chat-section .userContact-chat-msg-box.minimized.unread_msg .chat-header .unread-msg-count { position: absolute; top: -8px; right: -5px; text-align: center; background-color: #0082fb; color: #fff; border-radius: 50%; height: 20px; width: 20px; display: flex; justify-content: center; align-items: center; } .window-chat-section .chat-msg-box.minimized.unread_msg .chat-header .unread-msg-count:before, .window-chat-section .userContact-chat-msg-box.minimized.unread_msg .chat-header .unread-msg-count:before { content: ""; position: absolute; width: 10px; height: 10px; background: #0073b1; border-radius: 50%; animation-name: animateDot; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; } @keyframes animateDot { 0%, 70% { transform: scale(1, 1); opacity: 0.4; } 35% { transform: scale(4, 4); opacity: 0.2; } } .window-chat-section .chat-msg-box.minimized.unread_msg .chat-header .user-details .user-name a, .window-chat-section .userContact-chat-msg-box.minimized.unread_msg .chat-header .user-details .user-name a { color: #0082fb; } .window-chat-section .chat-msg-box.minimized.unread_user .userContact-chat-header, .window-chat-section .userContact-chat-msg-box.minimized.unread_user .userContact-chat-header { /*.user-details { .user-name { a { color: #0082fb; } } }*/ } .window-chat-section .chat-msg-box.minimized.unread_user .userContact-chat-header .unread-user-count, .window-chat-section .userContact-chat-msg-box.minimized.unread_user .userContact-chat-header .unread-user-count { position: absolute; top: -8px; right: -5px; text-align: center; background-color: #0082fb; color: #fff; border-radius: 50%; height: 20px; width: 20px; display: flex; justify-content: center; align-items: center; } .window-chat-section .chat-msg-box.minimized.unread_user .userContact-chat-header .unread-user-count:before, .window-chat-section .userContact-chat-msg-box.minimized.unread_user .userContact-chat-header .unread-user-count:before { content: ""; position: absolute; width: 10px; height: 10px; background: #0073b1; border-radius: 50%; animation-name: animateDot; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; } @keyframes animateDot { 0%, 70% { transform: scale(1, 1); opacity: 0.4; } 35% { transform: scale(4, 4); opacity: 0.2; } } .window-chat-section .chat-msg-box.minimized .chat-header, .window-chat-section .userContact-chat-msg-box.minimized .chat-header { padding: 5px 8px; } .window-chat-section .chat-msg-box.minimized .chat-header .user-img, .window-chat-section .userContact-chat-msg-box.minimized .chat-header .user-img { height: 36px; width: 36px; } .window-chat-section .chat-msg-box.minimized .chat-header .user-details .last-seen, .window-chat-section .userContact-chat-msg-box.minimized .chat-header .user-details .last-seen { display: none; } .window-chat-section .chat-msg-box.minimized .user-btn-section a.min-max-icon, .window-chat-section .userContact-chat-msg-box.minimized .user-btn-section a.min-max-icon { display: none; } .window-chat-section .chat-msg-box.minimized .user-btn-section .more-option-btn, .window-chat-section .userContact-chat-msg-box.minimized .user-btn-section .more-option-btn { display: none; } .window-chat-section .chat-msg-box.minimized .user-btn-section a.minimize-icon .fa-minus, .window-chat-section .userContact-chat-msg-box.minimized .user-btn-section a.minimize-icon .fa-minus { display: none; } .window-chat-section .chat-msg-box.minimized .user-btn-section a.minimize-icon .fa-window-maximize, .window-chat-section .userContact-chat-msg-box.minimized .user-btn-section a.minimize-icon .fa-window-maximize { display: block; } .window-chat-section .chat-msg-box.expanded, .window-chat-section .userContact-chat-msg-box.expanded { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); transition-duration: 167ms; height: 696px; width: 500px; /*max-width: 500px;*/ max-height: calc(100vh - 100px); overflow: hidden; } .window-chat-section .chat-msg-box.expanded .chat-header .user-details, .window-chat-section .userContact-chat-msg-box.expanded .chat-header .user-details { width: 300px; } .window-chat-section .chat-msg-box.expanded .user-btn-section a.min-max-icon img.compress-icon, .window-chat-section .userContact-chat-msg-box.expanded .user-btn-section a.min-max-icon img.compress-icon { display: block; } .window-chat-section .chat-msg-box.expanded .user-btn-section a.min-max-icon img.expand-icon, .window-chat-section .userContact-chat-msg-box.expanded .user-btn-section a.min-max-icon img.expand-icon { display: none; } .window-chat-section .chat-msg-box.expanded .chat-content-box, .window-chat-section .userContact-chat-msg-box.expanded .chat-content-box { /*.chatbox-editor { .chat-editor { textarea { height: 100px; } } }*/ } .window-chat-section .chat-msg-box.expanded .chat-content-box .chat-msg .chat-top, .window-chat-section .userContact-chat-msg-box.expanded .chat-content-box .chat-msg .chat-top { /*max-height: calc(100% - 110px);*/ } .window-chat-section .chat-msg-box.expanded .chat-content-box .chat-footer .chat-form-control, .window-chat-section .userContact-chat-msg-box.expanded .chat-content-box .chat-footer .chat-form-control { /*height: 120px !important; max-height: 90px !important;*/ } .window-chat-section .msg-toggle-icon { display: none; } .window-chat-section .msg-toggle-icon .unread-user-count { display: none; } @media only screen and (max-width: 767px) { .window-chat-section .msg-toggle-icon { height: 40px; width: 40px; min-width: 40px; display: flex; justify-content: center; align-items: center; padding: 7px; border-radius: 50px 50px 0px 50px; background-color: var(--ce21-chat-primary-color); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); margin: 0 0px 10px 20px; transition: all 0.3s ease-in; border-color: transparent; } .window-chat-section .msg-toggle-icon.unread_user { position: relative; } .window-chat-section .msg-toggle-icon.unread_user .unread-user-count { position: absolute; top: -8px; right: -5px; text-align: center; background-color: #0082fb; color: #fff; border-radius: 50%; height: 20px; width: 20px; display: flex; justify-content: center; align-items: center; top: -5px; right: -5px; z-index: 1; } .window-chat-section .msg-toggle-icon.unread_user .unread-user-count:before { content: ""; position: absolute; width: 10px; height: 10px; background: #0073b1; border-radius: 50%; animation-name: animateDot; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; } @keyframes animateDot { 0%, 70% { transform: scale(1, 1); opacity: 0.4; } 35% { transform: scale(4, 4); opacity: 0.2; } } .window-chat-section .msg-toggle-icon:focus { outline: none; } .window-chat-section .msg-toggle-icon.collapsed + .userContact-chat-msg-box.collapse { visibility: visible; -webkit-transform: translateX(-100%) !important; transform: translateX(-100%) !important; } .window-chat-section .msg-toggle-icon + .userContact-chat-msg-box.collapse.in { -webkit-transform: translateX(0) !important; transform: translateX(0) !important; border-radius: 0; } } @media only screen and (max-width: 767px) and (max-width: 767px) { .window-chat-section .msg-toggle-icon + .userContact-chat-msg-box.collapse.in .userContact-chat-header .user-btn-section a.close-btn { opacity: 1; visibility: visible; } } @media only screen and (max-width: 767px) { .window-chat-section .msg-toggle-icon img { filter: brightness(0) invert(1); } } @media only screen and (max-width: 450px) { .window-chat-section .msg-toggle-icon { margin-left: 10px; } } .window-chat-section .userContact-chat-msg-box { overflow: inherit; } .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-btn-section a.close-btn { position: absolute; background-color: var(--ce21-chat-primary-color); height: 40px; width: 40px; } @media only screen and (max-width: 767px) { .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-btn-section a.close-btn { top: 10px; right: -50px; opacity: 0; visibility: hidden; } .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-btn-section a.close-btn i { display: none; } .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-btn-section a.close-btn img { transform: rotate(90deg); } } @media only screen and (min-width: 768px) { .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-btn-section a.close-btn { position: static; height: 30px; width: 30px; background-color: #eee; } .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-btn-section a.close-btn img { display: none; } .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-btn-section a.close-btn.bounce:hover { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-iteration-count: infinite; } @-webkit-keyframes bounce { 0%, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0) scaleY(0.95); transform: translateZ(0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } @keyframes bounce { 0%, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0) scaleY(0.95); transform: translateZ(0) scaleY(0.95); } 90% { -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); transform: translate3d(0, -4px, 0) scaleY(1.02); } } } .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-btn-section a.close-btn img { filter: brightness(0) invert(1); opacity: 1; } .window-chat-section .userContact-chat-msg-box .userContact-chat-header .user-btn-section a.close-btn i { color: #000; } @media only screen and (max-width: 767px) { .window-chat-section .userContact-chat-msg-box { border-radius: 0; transition: all 0.3s ease-in; max-width: calc(100% - 100px); width: 350px !important; position: fixed; left: 0; margin-left: 0; height: 100% !important; max-height: 100%; transform: inherit !important; } .window-chat-section .userContact-chat-msg-box .unread-user-count { display: none !important; } .window-chat-section .userContact-chat-msg-box.minimized { width: 350px !important; /*&.unread_user { .chat-header { .user-details { .user-name { a { color: #303130; } } } } }*/ } .window-chat-section .userContact-chat-msg-box.minimized .chat-header { padding: 8px 8px; } .window-chat-section .userContact-chat-msg-box.minimized .chat-header .user-img { height: 40px; width: 40px; } } @media only screen and (min-width: 768px) { .window-chat-section .userContact-chat-msg-box { height: 575px !important; width: 350px !important; } .window-chat-section .userContact-chat-msg-box.collapse { display: flex; visibility: visible; } .window-chat-section .userContact-chat-msg-box.minimized { position: relative; transform: inherit !important; min-height: 40px !important; height: 40px !important; margin-bottom: 10px; width: 40px !important; min-width: 40px !important; border-radius: 50px 50px 0px 50px; display: flex; justify-content: center; align-items: center; border: none !important; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); background-color: var(--ce21-chat-primary-color, #0e324c); } .window-chat-section .userContact-chat-msg-box.minimized.unread_user .userContact-chat-header .unread-user-count { top: -5px; right: -5px; z-index: 1; } .window-chat-section .userContact-chat-msg-box.minimized .chat-userlist { display: none; } .window-chat-section .userContact-chat-msg-box.minimized .userContact-chat-header { border: none !important; padding: 0 !important; margin-right: 0 !important; height: 100%; } .window-chat-section .userContact-chat-msg-box.minimized .userContact-chat-header .userContact-details-section .user-details { display: none; } .window-chat-section .userContact-chat-msg-box.minimized .userContact-chat-header .userContact-details-section .user-img { margin-right: 0; background: none !important; padding: 8px; } .window-chat-section .userContact-chat-msg-box.minimized .userContact-chat-header .userContact-details-section .user-img:before { display: none; } .window-chat-section .userContact-chat-msg-box.minimized .userContact-chat-header .userContact-details-section .user-img img { filter: brightness(0) invert(1); object-fit: inherit; border-radius: 0; height: auto; width: auto; } .window-chat-section .userContact-chat-msg-box.minimized .userContact-chat-header .user-btn-section { position: absolute; top: -5px; right: -5px; } .window-chat-section .userContact-chat-msg-box.minimized .userContact-chat-header .user-btn-section a.close-btn { display: none; background-color: #fff; height: 20px; width: 20px; padding: 3px; } } .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section .user-img { background: none !important; } .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section .user-img:before { display: none; } .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section .user-img img { object-fit: inherit; border-radius: 0; height: auto; width: auto; } .window-chat-section .userContact-chat-msg-box .chat-userlist { max-height: 520px; overflow-y: auto; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section { padding: 0; border-left: 5px solid transparent; border-bottom: none; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section.active { border-left-color: #0082fb; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section:hover { cursor: pointer; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section .unread-msg-count { display: none; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section.unread-msg { position: relative; /*background-color: rgba(0,132,255,0.05);*/ } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section.unread-msg .unread-msg-count { display: block; position: absolute; /*bottom: 4px;*/ right: 10px; height: 18px; width: 18px; display: flex; justify-content: center; align-items: center; background-color: #0082fb; color: #fff; border-radius: 50%; font-size: 12px; font-weight: 600; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section.unread-msg .unread-msg-date { position: absolute; top: 10px; right: 10px; font-size: 12px; color: #0082fb; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section.unread-msg .user-details .user-name a { font-size: 13px; font-weight: 700; color: #000; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section.unread-msg .user-details .message { /*font-weight: 600;*/ color: #0082fb; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section .user-img { margin: 6px 10px 6px 10px; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section .user-details { padding: 6px 6px; width: 100%; border-bottom: 1px solid #eee; min-height: 52px; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section .user-details .user-name { margin-bottom: 2px !important; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section .user-details .user-name a { font-size: 13px; font-weight: 400; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section .user-details .message { font-size: 11px; padding-right: 40px; word-break: break-all; color: #656565; margin-top: auto; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section .user-img { height: 40px !important; max-width: 40px !important; min-width: 40px !important; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section .user-img:before { height: 12px; width: 12px; } .window-chat-section .userContact-chat-msg-box .chat-userlist .user-desc-section .user-img .username-initial { font-size: 18px; } .window-chat-section .chat-msg-box .chat-content-box { font-family: "Open Sans", sans-serif; transition: 0.5s all ease; /*@include flexrow;*/ /*height: 100%;*/ height: calc(100% - 56px); /*position: relative; background-color: $white;*/ /* Track */ /* Handle */ /* Handle on hover */ } .window-chat-section .chat-msg-box .chat-content-box ::-webkit-scrollbar { width: 10px; } .window-chat-section .chat-msg-box .chat-content-box ::-webkit-scrollbar-track { border-radius: 10px; } .window-chat-section .chat-msg-box .chat-content-box ::-webkit-scrollbar-thumb { background: #afafb0; border-radius: 10px; } .window-chat-section .chat-msg-box .chat-content-box ::-webkit-scrollbar-thumb:hover { background: #868788; } .window-chat-section .chat-msg-box .chat-content-box .btn-orange { background: #ffa977; color: #fff; } .window-chat-section .chat-msg-box .chat-content-box .btn-blue { background-color: #0e324c; color: #fff; } .window-chat-section .chat-msg-box .chat-content-box .bg-purple { background-color: #ab47bc !important; } .window-chat-section .chat-msg-box .chat-content-box.browser-notification-bar-active { padding-top: 40px; } .window-chat-section .chat-msg-box .chat-content-box.browser-notification-bar-active .browser-notification-bar { display: block; min-height: 40px; } @media only screen and (max-width: 767px) { .window-chat-section .chat-msg-box .chat-content-box.browser-notification-bar-active { padding-top: 0; } .window-chat-section .chat-msg-box .chat-content-box.browser-notification-bar-active .browser-notification-bar { display: none; } } .window-chat-section .chat-msg-box .chat-content-box .browser-notification-bar { position: absolute; top: 0; left: 0; width: 100%; background: #1a73e8; z-index: 2; padding: 10px; text-align: center; font-size: 13px; color: #fff; display: none; } @media only screen and (min-width: 992px) { .window-chat-section .chat-msg-box .chat-content-box .browser-notification-bar { font-size: 0.73vw; } } .window-chat-section .chat-msg-box .chat-content-box .browser-notification-bar a { color: #fff; text-decoration: underline; font-weight: 600; } .window-chat-section .chat-msg-box .chat-content-box .pre-loader { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: RGBA(255, 255, 255, 0.9); } .window-chat-section .chat-msg-box .chat-content-box .bg-info { background: #00bcd4 !important; color: #fff !important; } .window-chat-section .chat-msg-box .chat-content-box .username-box { position: absolute; width: 100%; height: 100%; background-color: RGBA(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; } .window-chat-section .chat-msg-box .chat-content-box .username-box .btn-close { position: absolute; top: -8px; right: -8px; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; padding: 0; justify-content: center; background-color: #F73E2F; color: #fff; outline: 0 !important; } .window-chat-section .chat-msg-box .chat-content-box .username-box .modal-content { width: 290px; padding: 0; } .window-chat-section .chat-msg-box .chat-content-box .username-box .modal-body { padding: 20px; } .window-chat-section .chat-msg-box .chat-content-box .username-box h5 { text-align: center; font-weight: 700; color: #0e324c; font-size: 19px; border-bottom: 1px solid #d6d6d6; padding-bottom: 15px; margin-top: 0; margin-bottom: 20px; } .window-chat-section .chat-msg-box .chat-content-box .username-box .insert-username-area { position: relative; } .window-chat-section .chat-msg-box .chat-content-box .username-box .insert-username-area .form-control { min-height: 40px; border-radius: 20px; box-shadow: none; } .window-chat-section .chat-msg-box .chat-content-box .username-box .insert-username-area .btn-blue { border-radius: 20px; text-align: center; width: 100%; margin-top: 15px; min-height: 40px; font-weight: 700; } .window-chat-section .chat-msg-box .chat-content-box .username-box .insert-username-area .btn-blue:hover { background-color: #224863; color: #fff; } .window-chat-section .chat-msg-box .chat-content-box .title-bar { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; color: #333; font-size: 22px; font-weight: 600; } .window-chat-section .chat-msg-box .chat-content-box .title-bar .icon-hold { width: 35px; height: 35px; padding: 5px; background-color: #eeeeee; border-radius: 50%; margin-right: 10px; font-size: 16px; display: flex; align-items: center; justify-content: center; } .window-chat-section .chat-msg-box .chat-content-box .title-bar .icon-hold img { width: 100%; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg { /*width: 100%; transition: 0.5s all ease; position: relative; overflow: hidden;*/ display: flex; flex-direction: column; justify-content: flex-end; height: 100%; background-color: #fff; } @media only screen and (max-width: 700px) { .window-chat-section .chat-msg-box .chat-content-box .chat-msg { width: 100%; top: 0; right: 0; } } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-top { /*height: calc(100% - 120px); height: 100%; max-height: calc(100% - 55px);*/ overflow-y: auto; scrollbar-width: thin; scrollbar-color: #0e324c #e6eaed; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-top::-webkit-scrollbar { width: 8px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-top::-webkit-scrollbar-thumb { background: var(--ce21-chat-primary-color, #0e324c); border-radius: 10px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-top::-webkit-scrollbar-track { border-radius: 0; background: var(--chat-primary-color-opacity01, #e6eaed); } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .collapse-link { width: 45px; height: 45px; padding: 5px; background-color: #0e324c; border-radius: 50%; margin-right: 10px; font-size: 16px; display: flex; align-items: center; justify-content: flex-end; position: absolute; top: 1px; left: -20px; padding-right: 12px; color: #fff; z-index: 1; outline: 0; /*i { transform: rotate(190deg); }*/ } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .collapse-link:hover, .window-chat-section .chat-msg-box .chat-content-box .chat-msg .collapse-link:focus, .window-chat-section .chat-msg-box .chat-content-box .chat-msg .collapse-link:active { text-decoration: none; outline: 0; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .collapse-link:hover { background-color: #224863; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-wrap-both { display: flex; flex-direction: column; justify-content: flex-end; /*height: calc(100% - 56px);*/ background: #FFF; height: calc(100% - 51px); } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-wrap-both:hover .chat-top { overflow-y: auto; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-wrap-both.no-chat-filter .chat-filter { display: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-wrap-both.no-chat-filter .chat-top { max-height: 100%; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-wrap-both .chat-top { max-height: calc(100% - 96px); } @media only screen and (min-width: 1025px) { .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-wrap-both .chat-top { overflow-y: auto; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-wrap-both .chat-top::-webkit-scrollbar-thumb { visibility: hidden; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-wrap-both .chat-top:hover::-webkit-scrollbar-thumb { visibility: visible; } } @media only screen and (max-width: 1024px) { .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-wrap-both .chat-top { overflow-y: auto; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-wrap-both .chat-top:hover { overflow-y: auto; } } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-filter { padding: 0 10px; margin-bottom: auto; width: 100%; } @media only screen and (min-width: 768px) { .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-filter .dropdown-menu { border: 0; box-shadow: none; border-radius: 0; padding: 2px; box-sizing: border-box; margin: 0; min-width: inherit; float: inherit; position: relative; display: block; z-index: 0; } } @media only screen and (max-width: 767px) { .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-filter .open > .dropdown-menu { display: flex; flex-direction: column; right: 0; left: inherit; } } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-filter .btn-primary { width: 100%; background-image: none; border: 0; color: #3c4043; font-size: 16px; font-weight: 600; border-radius: 0; background-color: #fff; box-shadow: none; outline: 0; text-align: right; } @media only screen and (min-width: 768px) { .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-filter .btn-primary { display: none; } } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-filter .btn-primary:focus { outline: 0; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-filter a { display: inline-flex; padding: 8px 15px; opacity: 0.8; border-bottom: 1px solid transparent; align-items: center; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-filter a:hover, .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-filter a:focus { text-decoration: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-filter a:hover { opacity: 1; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-filter a.active { border-bottom: 0; background: rgba(51, 51, 51, 0.05); font-weight: 600; border-radius: 8px; } @media only screen and (max-width: 767px) { .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-filter a.active { border-radius: 0; } } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area { /*width: 100%; overflow-y: auto; max-height: 100%;*/ } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages { width: 100%; background-color: #FFF; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; justify-content: flex-end; padding: 10px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-seprator { width: 100%; margin-bottom: 3rem; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; align-items: center; justify-content: center; position: relative; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-seprator:before { content: ''; width: 100%; height: 1px; background-color: #f0eff5; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 0; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-seprator .label { background-color: #f4f4f4; color: #989898; font-size: 13px; position: relative; /*z-index: 1;*/ font-weight: 600; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item { width: 100%; margin-bottom: 3rem; position: relative; padding-right: 60px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item:before { content: ""; top: 23px; left: 51px; background-color: #e4e6eb; width: 15px; height: 15px; transform: skew(45deg, 0deg); box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.04); border: solid transparent; position: absolute; pointer-events: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item.self { text-align: right; padding-left: 80px; padding-right: 20px; position: relative; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item.self:before { content: ""; top: 0px; right: 15px; left: auto; background-color: var(--chat-lighten-20, #1e6ba2); width: 15px; height: 15px; transform: skew(-45deg, 0deg); box-shadow: 3px -3px 3px 0 rgba(0, 0, 0, 0.04); border: solid transparent; position: absolute; pointer-events: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item.self .message-top { display: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item.self .message-top .message-avatar { display: inline-block; width: auto; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item.self .message-top .message-avatar .avatar { display: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item.self .message-top .message-avatar .name-info { width: auto; margin-left: 0; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item.self .message-top .message-avatar .name-info .name { display: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item.self .message-content { display: inline-block; background-color: var(--chat-lighten-20, #1e6ba2); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border-top-right-radius: 0; padding: 6px 10px; margin-left: 0; position: relative; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item.self .message-content:hover:before { content: attr(data-time); position: absolute; top: 50%; left: -55px; right: auto; transform: translateY(-50%); font-size: 11px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item.self .message-content p { color: #fff; text-align: left; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item.self .message-content a { color: #fff; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; justify-content: space-between; position: relative; margin-bottom: 5px; /*@include respond-to($brkmx767) { margin-bottom: 8px; }*/ } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .time { display: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links { display: flex; margin-top: -10px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links .link-circle { font-size: 20px; padding: 0; width: 32px; height: 32px; background-color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #3c4043; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links .link-circle:hover { background-color: #f8f8f8; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links .fav-link { position: relative; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links .fav-link span { background-color: #0e324c; width: 18px; height: 18px; display: inline-flex; position: absolute; top: -1px; right: -2px; border-radius: 50%; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; border: 1px solid #fff; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links .fav-link svg { width: 18px; height: 18px; fill: #BDBFC7; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links .fav-link.favrated { background-color: #eeeeee; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links .fav-link.favrated svg { fill: #0086ff; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links .qamark-link { color: #BDBFC7; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links .qamark-link.active { color: #0086ff; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links .dropdown-menu { left: inherit; right: 0; border-radius: 4px; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15); border: 0; outline: 1px solid transparent; padding: 0; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links .dropdown-menu li > a { padding: 6px 10px; font-size: 14px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links .dropdown-menu li > a:hover { background-color: #eeeeee; background-image: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links .dropdown-menu li > a i { margin-right: 8px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links a { color: #333; /*i { width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; display: inline-flex; } .fa-star { background-color: #efd1f9; &:hover { background-color: #ecbffb; } } .fa-external-link-square-alt { background: #e8deec; &:hover { background-color: #d5bede; } } .fa-times-square { background: #fee6ea; &:hover { background-color: #f5b9c3; } }*/ } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links a:hover, .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-top .quick-links a:focus { text-decoration: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-content { position: relative; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item .message-content:hover:before { content: attr(data-time); position: absolute; top: 50%; right: -55px; transform: translateY(-50%); font-size: 11px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-item span[class*="chat-mention"] { background-color: #cab600; display: inline-flex; padding: 3px 6px; font-size: 12px; font-weight: bold; line-height: 1; color: #ffffff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 20px; align-items: center; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-avatar { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; align-items: flex-start; width: calc(100% - 40px); } @media only screen and (max-width: 576px) { .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-avatar { width: calc(100% - 30px); } } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-avatar .avatar { display: inline-block; margin-bottom: 0; height: 35px; width: 35px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-right: 10px; position: absolute; left: 0; top: 0; } @media only screen and (max-width: 576px) { .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-avatar .avatar { height: 25px; width: 25px; margin-right: 5px; } } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-avatar .avatar img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-avatar .avatar .avatar-title { width: 33px; height: 33px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-avatar .name-info { width: calc(100% - 45px); margin-left: 45px; } @media only screen and (max-width: 576px) { .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-avatar .name-info { width: calc(100% - 35px); } } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-avatar h5 { font-size: 13px; margin: 0; font-weight: 600; color: #0e324c; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; flex-wrap: wrap; align-items: center; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-avatar .name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: normal; /*@include respond-to($brkmx576) { display: block; margin-bottom: 5px; }*/ } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-avatar .label { border-radius: 10px; display: inline-block; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-avatar .time { color: #828282; margin-top: 0px; font-size: 11px; margin: 0 3px; display: inline-block; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-avatar .badgespeaker { display: inline-block; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content { background: #e4e6eb; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; margin-left: 55px; font-size: 13px; position: relative; word-break: break-word; word-wrap: break-word; position: relative; display: inline-block; padding: 6px 10px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content:hover .highlight-option { display: flex; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content.rejected-message-content .message p:first-child { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content.rejected-message-content .message p, .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content.rejected-message-content .message br { display: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content.rejected-message-content.show-all-txt p { display: inherit !important; -webkit-line-clamp: inherit !important; -webkit-box-orient: inherit !important; overflow: inherit !important; text-overflow: inherit !important; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content.rejected-message-content.show-all-txt br { display: block; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content.rejected-message-content.show-all-txt .read-msg-link .read-more-txt { display: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content.rejected-message-content.show-all-txt .read-msg-link .read-less-txt { display: block; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content.rejected-message-content .read-msg-link { display: inline-block; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content.rejected-message-content .read-msg-link .read-more-txt { display: block; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content.rejected-message-content .read-msg-link .read-less-txt { display: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content.bg-option1 { background-color: #FFCED2 !important; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content.bg-option2 { background-color: #BBEEF1 !important; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content.bg-option3 { background-color: #FFFF99 !important; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content.bg-option4 { background-color: #f8f8f8 !important; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content .read-msg-link { display: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content .highlight-option { display: none; position: absolute; top: -5px; right: 0; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content .highlight-option .colorpick { width: 13px; height: 13px; border-radius: 50%; margin: 0 2px; border: 1px solid #acacad; cursor: pointer; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content .highlight-option .bg-option1 { background-color: #FFCED2; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content .highlight-option .bg-option2 { background-color: #BBEEF1; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content .highlight-option .bg-option3 { background-color: #FFFF99; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content .highlight-option .bg-option4 { background-color: #f8f8f8; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-room-area .messages .message-content p { color: #0e324c; margin: 0; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer { padding: 8px 15px; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.05); background-color: #FFF; position: relative; /*position: fixed; bottom: 0; left: 0; width: 100%;*/ } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .alert-message-sending-fail { position: absolute; top: -54px; width: calc(100% - 30px); left: 0; border-radius: 25px; padding: 5px 15px; margin: 15px; font-size: 14px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .alert-message-sending-fail .close { top: 0; right: -6px; color: inherit; opacity: 1; text-shadow: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer.sending .message-send-icon { display: block; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .message-send-icon { position: absolute; top: -20px; right: 15px; font-style: italic; font-size: 11px; display: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .message-send-icon img { max-height: 5px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .message-counter { position: absolute; top: -55px; right: 15px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .message-counter .counter-number { background-color: #ffffff; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #0e324c; font-weight: bold; margin-bottom: -5px; position: relative; z-index: 1; border: 1px solid #ccc; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .message-counter .down-link { color: #fff; font-size: 16px; background-color: #224863; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .message-counter .down-link:hover, .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .message-counter .down-link:focus { text-decoration: none; opacity: 0.9; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer form { display: flex; position: relative; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .chat-editor-box { display: flex; width: 100%; position: relative; border-radius: 20px; border: 1px solid #cccccc; padding-right: 45px; overflow: hidden; background-color: #fff; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .chat-form-control { /*border-radius: 20px;*/ height: auto; min-height: 20px; max-height: 90px; overflow-y: auto; /*position: relative; padding-left: 45px;*/ border: none; box-shadow: none; padding: 10px 15px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .chat-form-control:empty:after { content: 'Type Message...'; /*position: absolute; top: 6px; left: 45px;*/ font-size: 14px; color: #a9a9a9; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .chat-form-control:empty ~ .form-buttons .send-btn { background-color: #eeeeee !important; pointer-events: none; transition: 0.5s all ease; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .form-buttons { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; display: flex; align-items: center; margin-left: 10px; align-self: flex-end; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .form-buttons .smiley-btn { position: absolute; bottom: 10px; right: 50px; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .form-buttons .btn { margin-left: 0px; color: #BDBFC7; font-size: 20px; padding: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 10px; outline: 0; background-color: #f1f1f4; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .form-buttons .btn.active { color: #fff !important; background-color: #0e324c; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .form-buttons .btn:last-child { margin-right: 0; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .form-buttons .send-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; color: #fff !important; background-color: #0e324c; transition: 0.5s all ease; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .chat-footer .form-buttons .send-btn.disabled { color: #BDBFC7 !important; background-color: #f1f1f4 !important; pointer-events: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-msg .message-alert { border-left: 5px solid #d9edf7; margin: 1px 5px 0 5px; padding: 0 8px; } .window-chat-section .chat-msg-box .chat-content-box .chat-header { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; padding: 10px 10px 10px 30px; box-sizing: border-box; background-color: #fff; /* border-bottom: 1px solid #eee;*/ align-items: center; justify-content: space-between; position: relative; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .title-bar { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; color: #333; font-size: 22px; font-weight: 400; } @media only screen and (max-width: 767px) { .window-chat-section .chat-msg-box .chat-content-box .chat-header .title-bar { align-items: center; font-size: 16px; } } .window-chat-section .chat-msg-box .chat-content-box .chat-header .title-bar .icon-hold { width: 35px; height: 35px; padding: 5px; background-color: #eeeeee; border-radius: 50%; margin-right: 10px; font-size: 16px; display: flex; align-items: center; justify-content: center; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .title-bar .icon-hold img { width: 100%; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar .link-circle { width: 30px; height: 30px; background-color: #FFF; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 16px; color: #333; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar .link-circle:hover, .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar .link-circle:focus { background-color: #f0eff5; text-decoration: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar .full-screen-link { display: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar .close-link { background-color: #fbe9e9; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar .close-link:hover { background-color: #F73E2F; color: #FFF; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar > ul { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; list-style: none; margin: 0; padding: 0; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar > ul > li:not(:last-child) { margin-right: 2px; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar .profile-dropdown .link-circle { /*background-color: $bluedark; color: #fff; position: relative;*/ background-color: transparent; color: #000; font-size: 20px; position: relative; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar .profile-dropdown .link-circle img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; border-radius: 50%; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar .profile-dropdown a { color: #333; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar .profile-dropdown a:hover, .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar .profile-dropdown a:focus { text-decoration: none; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar .profile-dropdown .dropdown-menu { left: inherit; right: 0; border-radius: 4px; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15); border: 0; outline: 1px solid transparent; padding: 0; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar .profile-dropdown .dropdown-menu li > a { padding: 6px 10px; font-size: 14px; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar .profile-dropdown .dropdown-menu li > a:hover { background-image: none; background-color: #fafafa; } .window-chat-section .chat-msg-box .chat-content-box .chat-header .profile-bar .profile-dropdown .dropdown-menu li > a i { margin-right: 8px; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen.collapse-participants-panel .section-left { opacity: 0; margin-left: -180px; } @media only screen and (max-width: 1600px) { .window-chat-section .chat-msg-box .chat-content-box.viewer-screen.collapse-participants-panel .section-left { margin-left: inherit; left: -100%; } } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen.collapse-participants-panel .section-right { width: 100%; display: block; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen.hide-participants-panel .section-right { width: 100%; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen.visible-moderator-panel .user-summary-area { display: block; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen.visible-moderator-panel .section-left .participant-area { height: calc(100% - 50px); } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .user-summary-area { display: none; padding: 7.5px 5px; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .user-summary-area p { font-size: 12px; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .chat-header { padding: 6.5px 10px 6.5px 30px; } @media only screen and (min-width: 992px) and (max-width: 1090px) { .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .chat-header .title-bar { font-size: 1.8vw; } } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left { width: 180px; opacity: 1; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .participant-header { min-height: 45px; } @media only screen and (max-width: 1600px) { .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .participant-header { padding-right: 35px; } } @media only screen and (max-width: 1600px) { .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .participant-header .collapse-link { display: flex; } } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .participar-user .user-list { height: calc(100% - 45px); } @media only screen and (max-width: 1600px) { .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left { width: 100%; position: absolute; top: 0; left: 0; z-index: 2; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .modratorlist .btn .fa-plus-square { font-size: 20px; } } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .title-bar { font-size: 16px; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .title-bar .icon-hold { width: 25px; height: 25px; margin-right: 5px; font-size: 14px; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .title-bar .collapse-link:hover, .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .title-bar .collapse-link:focus, .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .title-bar .collapse-link:active { text-decoration: none; outline: 0; } @media only screen and (max-width: 1600px) { .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .title-bar .collapse-link { display: flex; } } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .user-list .user-item .profile-picture, .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .user-list .user-item .profile-picture img, .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .user-list .user-item .profile-picture .avatar-title { width: 28px; height: 28px; font-size: 16px; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .user-list .user-item .user-name { font-size: 13px; padding: 0 0 0 5px; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .user-list .user-item .actions .dropdown-toggle { width: 25px; height: 25px; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .user-list .user-item .actions .dropdown-menu { min-width: inherit; width: 180px; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .user-list .user-item .actions .dropdown-menu li { font-size: 12px; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .user-list .user-item .actions .dropdown-menu .profile-picture { display: none; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .user-list .user-item .actions .dropdown-menu .user-name { font-size: 12px; padding: 0; line-height: normal; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .modratorlist .btn { padding: 6px 10px; min-height: 50px; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-left .participant-area { /*height: calc(100% - 51px);*/ height: 100%; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-right { width: calc(100% - 180px); } @media only screen and (max-width: 1600px) { .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-right { width: 100%; } } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-right .chat-header .profile-bar .full-screen-link { display: inline-flex; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-right .chat-header .profile-bar .close-link { display: none; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-right .chat-filter { padding: 3px 0px 0px 0px; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-right .chat-filter a { font-size: 13px; padding: 10px 8px; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-right .chat-footer { padding: 6px 15px; } .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-right .chat-wrap-both { height: calc(100% - 44px); } @media only screen and (max-width: 767px) { .window-chat-section .chat-msg-box .chat-content-box.viewer-screen .section-right .chat-wrap-both { height: auto; } } .window-chat-section .chat-msg-box .chat-content-box .DropDownPosition .dropdown-menu { bottom: 40px; top: inherit !important; } .window-chat-section .chat-msg-box .chat-content-box .profile-picture { position: relative; width: 32px; height: 32px; border-radius: 50%; } .window-chat-section .chat-msg-box .chat-content-box .profile-picture .avatar-title { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #FFF; position: relative; } .window-chat-section .chat-msg-box .chat-content-box .profile-picture .avatar-title img { width: 100%; height: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; object-fit: cover; } .window-chat-section .chat-msg-box .chat-content-box .profile-picture .status { width: 10px; height: 10px; border-radius: 50%; background-color: #FFF; position: absolute; bottom: 0; right: 0; border: 1px solid #FFF; } .window-chat-section .chat-msg-box .chat-content-box .profile-picture .status.bg-red { background-color: red !important; } .window-chat-section .chat-msg-box .chat-content-box .profile-picture .status.bg-green { background-color: green !important; } .window-chat-section .chat-msg-box .chat-content-box .profile-picture .status.bg-gray { background-color: #333; } .window-chat-section .chat-msg-box .chat-content-box .profile-picture img { width: 32px; height: 32px; border-radius: 50%; } @media only screen and (max-width: 767px) { .window-chat-section .chat-msg-box .chat-content-box .emoji-mart { width: 95% !important; } } .window-chat-section emoji-picker .emoji-mart-anchor.emoji-mart-anchor-selected:focus { outline: 0; } .window-chat-section .chat-msg-box:not(.expanded) emoji-picker section.emoji-mart { width: 290px !important; /* .emoji-mart-search { display: none !important; }*/ } .window-chat-section .chat-msg-box:not(.expanded) emoji-picker section.emoji-mart .emoji-mart-scroll { height: 200px !important; } .window-chat-section .chat-msg-box:not(.expanded) emoji-picker section.emoji-mart .emoji-mart-bar .emoji-mart-preview { display: none !important; } @media only screen and (max-width: 1366px) { .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section .user-details { width: 115px; } } @media only screen and (max-width: 300px) { .window-chat-section .userContact-chat-msg-box .userContact-chat-header .userContact-details-section .user-img { width: 30px; height: 30px; } } .chatUerOnlineStatus[data-online="0"] .user-img:before { background-color: white !important; border: 1px solid #3c4043 !important; } .chatUerOnlineStatus[data-online="1"] .user-img:before { background-color: green; } .chatUerOnlineStatus[data-online="2"] .user-img:before { background-color: #ad1717; }