div.chat-widget{border-radius:10px;max-height:calc(100vh - 80px);overflow-x:hidden;overflow-y:auto;padding-bottom:6px;position:fixed;right:20px;z-index:1000}.chat-button-tab{border:1px solid #1952a3;border-left:none;border-top:none;cursor:pointer;outline:none;padding:10px 20px;position:sticky;text-transform:uppercase;top:0;width:50%}.chat-button-tab.hide{display:none}.chat-button-tab:not(.active){background-color:#d3d3d3!important}.chat-button-tab.active{border-bottom:0}.chat-button-tab:hover{background-color:#ddd}.chat-tab-content{display:none;padding:5px}div.chat-button{align-items:center;animation:boom 3s ease-in-out infinite;border-radius:50%;bottom:20px;box-shadow:0 1px 5px 3px rgba(0,0,0,.5);cursor:pointer;display:flex;height:35px;justify-content:center;line-height:60px;position:fixed;right:20px;text-align:center;width:35px;z-index:999}@keyframes boom{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}div.chat-widget .message{border-radius:3px;margin-bottom:5px;margin-left:3px;margin-right:3px;padding:5px}div.chat-widget .message:not(.right){background-color:#fff;margin-left:15px}div.chat-widget .message.right{background-color:#d3d3d3;margin-right:15px}div.chat-widget .message .message-text{font-style:italic}div.chat-widget .message .message-name{display:block;font-weight:700}div.chat-widget .message .message-date{display:block;font-size:12px;text-align:right}.message-input{border:0;border-radius:0 0 10px 10px;border-top:2px solid #000;box-sizing:border-box;display:block;margin:10px 1% 0;padding:5px 27px 5px 5px;width:98%}body.dark textarea.message-input{border-color:red}.message-input::placeholder{color:#999}.message-input:focus-visible{outline:none}#message-send{background:#7cfc00;border:1px solid #20b2aa;border-radius:50%;color:#000;display:block;font-weight:700;height:25px;margin:-28px 5px 0 auto;text-align:center;width:25px}p.chat-title{background-color:#f2f2f2;font-weight:700;padding:10px;position:sticky;top:0}body.dark p.chat-title{background-color:#333;color:#fff}button.close-chat{border:none;border-radius:4px;color:#fff;margin-right:5px;position:relative;width:20px}button.close-chat:hover{cursor:pointer;outline:2px solid #b7c4d9}div.users-wrapper{margin-top:0}div.groups-widget-header,div.users-wrapper span{font-size:16px;font-weight:700}.messages-title{color:red;margin-bottom:10px;padding:2px;text-transform:uppercase}button.user-button{background-color:#b7c4d9;border:0;border-bottom:1px solid #1952a3;display:block;font-size:14px;height:25px;line-height:25px;margin-bottom:10px;overflow:hidden;text-align:left;text-overflow:ellipsis;transition:background-color .3s ease;white-space:nowrap;width:100%}button.user-button:hover{background-color:#e0ffff;border-bottom:1px solid #008b8b;cursor:pointer}button.user-button.active{background-color:#a9a9a9!important;box-shadow:0 1px 5px;height:auto;line-height:normal;transform:translateY(0);z-index:100}button.user-button small{color:red;font-size:12px}button span#unread{display:block;font-size:12px}button span#date{display:block;font-size:10px;text-align:right}div.chat-widget .loader-overlay{background-color:rgba(0,0,0,.5);display:none;height:100%;left:0;position:absolute;top:0;width:100%;z-index:2}div.chat-widget .loader{animation:spin 1s linear infinite;border:4px solid #ccc;border-radius:50%;border-top-color:#1952a3;display:none;height:40px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:40px;z-index:3}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}.chat-widget .error-message,.chat-widget p.error{color:red;font-size:16px;font-weight:bolder;text-align:center}div.group-wrapper{background-color:#b7c4d9;border:1px solid #1952a3;border-radius:5px;margin-bottom:5px;padding:10px}div.group-wrapper.active{background-color:#1952a3}div.group-wrapper:hover{background-color:#e5e5e5;cursor:pointer;outline:2px solid #b7c4d9}div.group-name{display:block;font-weight:700;margin-bottom:5px}small.creator{color:#1952a3;font-weight:100}div.group-participants{margin-bottom:5px}div.group-participants small{color:#333!important;font-size:12px}div.group-participants .more-participants{font-style:italic}div#date{font-size:12px}button#add-group{background-color:#b7c4d9;border:1px solid #1952a3;border-radius:3px;padding:2px}button#add-group:hover{background-color:#e5e5e5;cursor:pointer}.new-group-form{border:1px solid #1952a3;border-radius:5px;display:flex;flex-direction:column;margin:5px auto 0;max-width:400px;padding:20px}.new-group-input{border:1px solid #ccc;border-radius:5px;padding:10px}.checkboxes,.new-group-input{margin-bottom:10px}.checkboxes p{margin:5px 0}.group-member{margin-right:5px}.new-group-btn{background-color:#b7c4d9;border:1px solid #1952a3;border-radius:5px;cursor:pointer;font-size:14px;padding:8px 16px}.new-group-btn:hover{background-color:#e5e5e5}.cancel-btn{background-color:transparent;border:1px solid #1952a3;border-radius:5px;color:gray;cursor:pointer;display:inline-block;margin-left:2px;padding:2px 10px;text-transform:uppercase;transition:color .3s}.cancel-btn:hover{background-color:#e5e5e5}