.chatroomToolBoxNotLoggedIn{background-color:var(--secondary-background-color,#181818);justify-content:center;align-items:center;gap:1rem;width:100%;display:flex}#chatroomToolBox{z-index:1;box-sizing:border-box;background-color:var(--secondary-background-color,#181818);border-top:var(--primary-border);border-bottom:var(--primary-border);grid-area:chatroomToolBox;justify-content:space-around;align-items:center;width:100%;height:50px;padding:8px;display:flex;bottom:0;left:0;right:0}@keyframes pulsing{0%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}#chatroomToolBox #someoneIsTyping{background-color:var(--secondary-background-color,#181818);color:var(--primary-text-color,#fff);font-size:12px;position:absolute;top:-14px;left:10px}#chatroomToolBox #chatroomToolBoxItems{grid-gap:8px;grid-template-rows:1fr;grid-template-columns:1fr 40px;place-items:center;width:100%;height:100%;display:grid}#chatroomToolBox #chatroomToolBoxItems #chatroomToolBoxInput{background-color:var(--input-background-color,#fff);color:var(--input-text-color,#000);border:1px solid var(--input-border-color,#ccc);resize:none;border-radius:4px;outline:none;flex-grow:1;width:100%;height:100%}#chatroomToolBox #chatroomToolBoxItems .audioPlayer{justify-content:center;align-items:center;width:100%;max-width:80vw;height:35px;display:flex}#chatroomToolBox #chatroomToolBoxItems .audioPlayer audio{width:100%;max-width:80vw;height:25px}#chatroomToolBox #chatroomToolBoxItems .audio-recording-animation{z-index:1000;background-color:#00000080;flex-direction:column;justify-content:center;align-items:center;animation:2s infinite pulsing;display:flex;position:fixed;inset:0 0 50px}#chatroomToolBox #chatroomToolBoxItems .audio-recording-animation .counter{color:var(--primary-text-color,#fff);font-size:120px}#chatroomToolBox #chatroomToolBoxItems #someoneIsTyping{background-color:var(--secondary-background-color,#181818);color:var(--primary-text-color,#fff);font-size:12px;position:absolute;top:-14px;left:10px}#chatroomToolBox #chatroomToolBoxItems .chatroomToolBoxActionBtn{background-color:var(--button-background-color,#181818);color:var(--button-text-color,#fff);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:flex}@media (width<=480px){#chatroomToolBox .chatroom-tools-items .paperclip-button,#chatroomToolBox .chatroom-tools-items .submit-button{width:28px;height:28px}}
.chatroomOnlineUsersListItem{background-color:#0000;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;padding:2px 5px;display:flex}.chatroomOnlineUsersListItem .onlineUserDataWrapper{justify-content:space-between;align-items:center;width:100%;display:flex}.chatroomOnlineUsersListItem .onlineUserDataWrapper .onlineUserData a{align-items:center;display:flex}.chatroomOnlineUsersListItem .onlineUserDataWrapper .onlineUserData a .onlineUserUsername{color:var(--primary-text-color,#fff);white-space:nowrap;text-overflow:ellipsis;margin-left:5px;overflow:hidden}
.chatroomOnlineUsersList{border-left:var(--primary-border);box-sizing:border-box;background-color:var(--secondary-background-color,#181818);grid-area:chatroomOnlineUsersList;width:200px;padding:4px;position:absolute;top:50px;bottom:50px;right:0;overflow-y:auto}
.chatroomPageContent{z-index:11;grid-template:"chatroomTopbar"50px"chatroomMessagingArea"1fr"chatroomToolBox"50px/1fr;width:100%;height:100%;display:grid;position:fixed;inset:0}