@import"https://fonts.googleapis.com/css2?family=SUSE:wght@100..800&display=swap";.room-dashboard{display:flex;flex-direction:column;align-items:center;width:30vw;overflow:hidden;height:90vh;background-color:#0d0f0f;border:1px solid rgb(68,68,68)}.header{text-align:center;width:90%}.headerContainer{display:flex;border-bottom:1px solid rgb(68,68,68);width:100%;align-items:center;padding-bottom:0}.headerContainer button{background-color:transparent;color:#7d7d7d;border:none;height:29px;border-radius:5px;font-weight:700}.room-list{display:flex;flex-direction:column;overflow-y:auto;height:60vh;letter-spacing:2px;width:100%;color:#f0f8ff;font-weight:500;font-family:SUSE,sans-serif;font-optical-sizing:auto}.room-list::-webkit-scrollbar{width:6px}.room-list::-webkit-scrollbar-track{background:transparent;border-radius:10px}.room-list::-webkit-scrollbar-thumb{background-color:#434141;border-radius:10px}.room-list::-webkit-scrollbar-thumb:hover{background-color:#f8f8ff}.room-item{height:40px;border-bottom:.7px solid rgb(68,68,68);align-items:center;display:flex;width:100%;background:#0d0f0f;cursor:pointer;flex:0 0 auto}.room-item p{margin-left:10px}.room-item:hover{background:#131313}.create-room-form{margin:0}.create-room-form input{padding:10px;outline:none;border:none;width:65%;margin-right:5px}.create-room-form button{padding:5px;margin:0;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer;width:20%}p,a{padding:0;margin:0}.ChatRoom{width:70vw;background-color:#0d0f0f;margin:0;height:90vh;font-family:SUSE,sans-serif;font-optical-sizing:auto;font-style:normal;position:relative;display:flex;flex-direction:column;align-items:center;border:1px solid rgb(68,68,68);border-top:1px solid rgb(68,68,68)}.ChatRoom h2,p{margin:0}.MessageList{min-height:350px;height:75%;max-width:69vw;overflow-y:auto;margin-bottom:5px;text-align:left;position:relative}.MessageList::-webkit-scrollbar{width:4px}.MessageList::-webkit-scrollbar-track{background:transparent;border-radius:10px}.MessageList::-webkit-scrollbar-track:hover{background:pink;border-radius:10px}.MessageList::-webkit-scrollbar-thumb{background-color:#474545;border-radius:10px}.MessageList::-webkit-scrollbar-thumb:hover{background-color:#000}.MessageContainer{display:flex;position:relative;width:100%}.MessageItem{margin-bottom:2px;max-width:70%;height:auto;word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;white-space:normal;position:relative;display:flex;color:#fff}.Avatar{width:30px;background-color:transparent}.Message{width:auto;background-color:#1f313b;margin:0 8px;padding:0 15px;border-radius:8px;position:relative;color:#fff;word-wrap:break-word;box-shadow:0 1px 2px #00000026}.Message:before{content:"";position:absolute;right:-8px;width:0;height:0;border-width:8px;border-style:solid;border-color:#1f313b transparent transparent transparent}.Message.left{background-color:#151d21;margin-left:20px}.Message.left:before{right:auto;left:-8px;border-color:#151d21 #151d21 transparent transparent}.userName{font-size:small;font-weight:600}.userName p{margin:4px;color:#7fffd4}.MessageBody{font-size:13px;font-family:Verdana,Geneva,Tahoma,sans-serif;margin:4px;line-height:1.5;letter-spacing:.7px;font-weight:100;width:100%}.InputContainer{display:flex;justify-content:space-between;align-items:center;max-width:68vw;flex-shrink:0}.MessageInput{flex:1;padding:10px;margin-right:10px;margin-left:10px;border:none;border-radius:4px;outline:none}.SendMessageButton{padding:10px 20px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.SendMessageButton:hover{background-color:#0056b3}.scroll-to-bottom{display:flex;justify-content:center;align-items:center;bottom:60px;transform:translate(300px);position:absolute;width:30px;height:30px;background-color:#421616;color:#fff;border:none;border-radius:50%;cursor:pointer}.scroll-to-bottom:hover{background-color:#0056b3}@media (max-width: 480px){.ChatRoom{width:70vw;height:100%;flex:1 0 auto}.MessageList{min-height:350px;height:80vh}.App{margin-top:45px}.room-list{height:75vh}.room-dashboard{height:100%}}body,html{font-family:Arial,sans-serif;background-color:#0d0f0f;margin:0;padding:0;width:100vw;height:100vh;color:#d6b0d6;width:100%;overflow:hidden}#root{width:100vw;height:100vh;display:flex;justify-content:flex-end;flex-direction:column;overflow:hidden}.App{height:100vh;overflow:hidden;display:flex}input{padding:8px;border-radius:4px;width:200px;outline:none;background-color:#1c1b1b;color:#f0f8ff}.footer{position:fixed;bottom:0;width:100%;background-color:transparent;padding:10px;text-align:center;display:none}.room-dashboard{transition:width .1s ease-in-out}.ChatRoom{transition:display .1s ease-in-out}