@import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";:root{--color-background: #ffffff;--color-text: #00BD62;--color-sidebar: #1b1b1b;--color-chat-area: #242424;--color-input: #3a3939;--color-user-section: #141414}.add-button{background:none;border:1px solid var(--color-text);color:var(--color-text);width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:30%}.add-button:hover{transform:scale(1.1);transition:transform .2s ease-in-out;color:#fff;transition:color .2s ease-in-out}.channel-item:hover{color:#fff;transition:color .2s ease-in-out}.channel-item.active{color:#fff;font-weight:700}.message-input{width:100%;background-color:var(--color-input);border:none;color:var(--color-text);border-radius:9px;padding:10px}*{margin:0;padding:0;box-sizing:border-box}:root{--color-background: #ffffff;--color-text: #ffffff;--color-sidebar: #1b1b1b;--color-chat-area: #242424;--color-input: #3a3939;--color-user-section: #141414}html,body{height:100%;width:100%;overflow:hidden;background-color:var(--color-background);color:var(--color-text)}.chat-container{display:flex;height:100vh;width:100vw}.sidebar{width:200px;background-color:var(--color-sidebar);padding:10px;display:flex;flex-direction:column;height:100%}.app-title{font-size:24px;margin-bottom:20px}.channel-section{margin-bottom:20px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.add-button{background:none;border:1px solid var(--color-text);color:var(--color-text);width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}.channel-list{list-style-type:none}.channel-item{display:flex;align-items:center;margin-bottom:5px;cursor:pointer}.channel-icon{margin-right:5px}.user-section{margin-top:auto;background-color:var(--color-user-section);color:var(--color-background);padding:10px}.chat-area{flex-grow:1;background-color:var(--color-chat-area);display:flex;flex-direction:column;height:100%}.chat-header{padding:10px;border-bottom:1px solid var(--color-text)}.chat-messages{flex-grow:1;padding:10px;overflow-y:auto}.message-input-container{padding:10px}.message-input{width:100%;padding:8px;background-color:var(--color-input);border:none;color:var(--color-text)}.message-input::placeholder{color:#949494}body,html{background-color:#1e1e1e;font-family:Anonymous Pro,monospace;margin:0;padding:0;height:100%;overflow:hidden}*{color:#fff;font-family:Anonymous Pro,monospace;margin:0;padding:0}button{padding:12px 24px;background-color:#00bd62;color:#fff;font-weight:600;border-radius:10px;border:none;cursor:pointer;transition:background-color .3s ease}button:hover{background-color:#10b981}.welcome_page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background-color:#1e1e1e}.form-container{background-color:#1e1e1e;padding:1.5rem;border-radius:8px;width:300px;text-align:center;margin-bottom:1.5rem;border:none}.login_register{display:flex;justify-content:space-between;gap:1rem;width:100%;align-items:flex-start}.form-container{margin-right:1rem;flex:1}.form-title{font-size:1.5rem;font-weight:700;margin-bottom:1rem;color:#fff}.input-field{width:100%;padding:.75rem;margin-bottom:.75rem;border:1px solid #ccc;border-radius:5px;background-color:#444;color:#fff}.centered-button{width:100%;background-color:#007bff;color:#fff;padding:.75rem 0;border:none;border-radius:5px;cursor:pointer;transition:background .3s}.centered-button:hover{background-color:#0056b3}.divider{width:80%;height:1px;background-color:#ddd;margin:0rem auto}img{width:20rem;height:auto;margin-bottom:.5rem;display:block;margin-left:auto;margin-right:auto}@media (max-width: 768px){.form-container{width:90%}}.dashboard-container{background-color:#23272a;height:100vh;padding:0;margin:0;display:flex;flex-direction:row}.sidebar{display:flex;flex-direction:column;align-items:center;width:70px;height:100vh;background-color:#1d1f22;padding:10px 0;position:fixed;scrollbar-width:none;-ms-overflow-style:none;overflow-y:scroll}.sidebar::-webkit-scrollbar{display:none}.sidebar-header{width:100%;display:flex;flex-direction:column;align-items:center;padding:10px 0;background-color:#2c2f33}.sidebar-logo{width:70px;height:auto;margin-bottom:10px;position:static;cursor:pointer;transition:opacity .2s ease-in-out}.sidebar-logo:hover{opacity:.7}.direct-messages-sidebar{width:165px;padding-left:115px;padding-top:20px;background-color:#303338;border-left:1px solid #ddd;display:flex;flex-direction:column}.direct-messages-title{display:flex;flex-direction:column;font-size:18px;font-weight:700;color:#fff;margin:0;padding-bottom:10px}.friends-btn-container{display:flex;justify-content:center;align-items:center;margin-top:auto;padding:10px}.friends-btn{margin-top:auto;background-color:#00bd62;color:#fff;width:145px;border:none;border-radius:5px;font-size:16px;cursor:pointer;transition:background-color .3s ease}.friends-btn:hover{background-color:#327237}.friends-page{display:flex;width:97vw;height:100vh;overflow:hidden}.sidebar{width:80px;background-color:#2c2f33;padding:10px}.all-friends-sidebar,.friends-sidebar,.pending-requests-sidebar{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;overflow-x:hidden;overflow-y:auto;height:100vh;flex-grow:1;flex-basis:0;min-width:250px;max-width:32%;background-color:#35393e;padding:15px;border-left:1px solid #444;box-sizing:border-box}.no-friend-messages{color:#888;font-style:italic;text-align:center;margin-top:10px}.friends-title{color:#fff;font-size:18px;margin-bottom:10px}.friends-list{display:flex;flex-direction:column;gap:10px}.friend-item{display:flex;align-items:center;justify-content:space-between;background-color:#35393e;padding:4px;border-radius:5px;color:#fff;text-align:center;cursor:pointer;transition:background .2s}.friend-item:hover{background-color:#494f55}.DM-friend-item{background-color:#23272a;padding:10px;border-radius:5px;color:#fff;text-align:center;cursor:pointer;transition:background .2s}.DM-friend-item:hover,.DM-friend-item.active{background-color:#3a3f44}.add-friend-section{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background-color:#35393e;margin-top:20px}.add-friend-section h3{margin-bottom:10px}.search-input{width:200px;padding:8px;margin-bottom:10px;border:1px solid #ccc;border-radius:4px;background-color:#2c2f33}.search-btn{padding:8px;border:none;background-color:#4caf50;color:#fff;cursor:pointer}.search-btn:hover{background-color:#45a049}.search-results{margin-top:10px}.add-friend-btn{background-color:#00bd62;color:#fff;border:none;padding:8px 10px;cursor:pointer;border-radius:4px}.add-friend-btn:hover{background-color:#327237}.accept-request-btn{margin-left:auto;background-color:transparent;border:none;color:red;font-size:18px;cursor:pointer;border-radius:8px;padding:5px 10px;color:#56d661}.accept-request-btn:hover{background-color:#6b727c}.remove-friend-btn{margin-left:auto;background-color:transparent;border:none;color:red;font-size:18px;cursor:pointer;border-radius:8px;padding:5px 10px}.remove-friend-btn:hover{text-decoration:underline;background-color:#6b727c;border-radius:8px}.notification-popup{color:#fff;background-color:red;padding:10px;border-radius:5px;margin-top:10px;font-size:14px;display:inline-block;max-width:300px}.page-container{display:flex;width:100vw;height:100vh;overflow:hidden}.members-sidebar{width:100%;padding:18px;display:flex;flex-direction:column}.members-container{display:flex;flex-direction:column;align-items:flex-start;width:250px;height:100vh;background-color:#23272a;border-left:1px solid #444;flex-shrink:0;padding:10px;margin-right:70px}.members-header{font-size:1.5rem;color:#fff;font-weight:700;margin-top:-20px;margin-bottom:10px}.members-list{display:flex;flex-direction:column}.member-item{font-size:15px;border:2px solid #343a3e;background-color:#343a3e;padding:10px;margin-bottom:8px;cursor:pointer;text-align:left;border-radius:5px;transition:background-color .2s ease-in-out}.member-item:hover{background-color:#404449}.member-item.active{background-color:#007bff;color:#fff}.spaces-sidebar img{width:70px;height:auto;margin-bottom:10px;position:static;cursor:pointer;transition:opacity .2s ease-in-out}.spaces-sidebar img:hover{opacity:.7}.space-list-container{width:100%;flex:1;height:100%;max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:none;scrollbar-color:transparent transparent}.space-list-container::-webkit-scrollbar{display:none}.sidebar h2{font-size:24px;margin-bottom:20px}.space-list{flex-grow:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;margin-top:10px;overflow-y:auto;max-height:calc(100vh - 120px)}.space-item{width:50px;height:50px;border-radius:50%;background-color:#00bd62;color:#fff;font-size:18px;font-weight:700;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:background-color .3s;flex-shrink:0}.space-item:hover{background-color:#327237}.space-item.active{border:2px solid white}.create-space-btn{width:50px;height:50px;border-radius:50%;background-color:#f5f5f5;color:#333;font-size:30px;font-weight:700;border:none;display:flex;justify-content:center;align-items:center;cursor:pointer;position:sticky;margin-top:5px;margin-bottom:10px}.create-space-btn:hover{background-color:#c4c4c4}.content{flex-grow:1;background-color:#23272a;color:#fff;padding:20px;margin-left:90px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center}.modal{background-color:#23272a;color:#fff;padding:30px;border-radius:8px;width:400px;text-align:center}.modal input{width:100%;padding:10px;margin-bottom:20px;background-color:#222;color:#fff;border:1px solid #00bd62;border-radius:5px}.modal button{width:100%;padding:10px;background-color:#00bd62;border:none;color:#fff;font-size:16px;cursor:pointer;margin-top:10px}.modal button:hover{background-color:#327237}.chat-container{display:flex;flex-grow:1;height:100vh;min-width:0;justify-content:flex-start;overflow:hidden}.container{display:flex;height:100vh}.channel-sidebar{display:flex;width:250px;height:100vh;background:#23272a;padding:10px;flex-direction:column}.channel-header{display:flex;justify-content:space-between;align-items:center;width:105%;padding:5px 10px;margin-bottom:8px}.channel-title{font-size:16px;font-weight:700;color:#b9bbbe}.channel-list{display:flex;flex-direction:column;gap:5px;width:100%}.channel-item{width:85%;padding:8px 10px;text-align:center;text-align:left;background-color:#23272a;border:none;border-radius:5px;color:#fff;cursor:pointer}.channel-item:hover{background-color:#3a3f44}.add-channel-btn{background-color:transparent;border:none;color:#b9bbbe;font-size:16px;cursor:pointer;padding:2px 4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px}.add-channel-btn:hover{color:#fff;background-color:#ffffff1a}.spaces-sidebar{margin:-10px 0 0;padding:10px 0 0;width:70px;background-color:#2c2f33;display:flex;flex-direction:column;align-items:center;overflow-y:hidden;-ms-overflow-style:none;scrollbar-width:none;flex-shrink:0}.space-name{font-size:20px;font-weight:700;margin-bottom:10px;color:#fff}.spaces-sidebar::-webkit-scrollbar{display:none}.create-space-btn-server{width:50px;height:50px;background-color:#36393f;color:#fff;font-size:28px;font-weight:700;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease-in-out}.create-space-btn-server:hover{background-color:#4f545c}.chat-box{height:100%;width:100%;background-color:#303238;display:flex;flex-direction:column;padding:20px;flex-grow:1;overflow-x:hidden;gap:8px}.message{padding:5px;border-radius:5px}.message:hover{background-color:#3e3f44}.message-header{font-size:14px;display:flex;align-items:center;gap:8px}.username{font-weight:700;color:#fff;font-family:Roboto,sans-serif;font-size:18px;padding-bottom:5px}.timestamp{font-size:12px;color:#aaa;padding-bottom:5px}.message-text{font-size:15px}.message-input{margin-top:auto;background-color:#3e3f44;display:flex;justify-content:space-between;align-items:center;width:95%;border-radius:10px}.message-input input{background-color:#3e3f44;border:none;outline:none;padding:10px;width:80%}.message-input button{padding:10px 15px;background-color:#00bd62;color:#fff;border:none;cursor:pointer;margin-left:auto}.message-input button:hover{background-color:#327237}.channel-item-container{display:flex;align-items:center;justify-content:space-between;border-radius:5px}.channel-item-container:hover,.channel-item-container.active{background-color:#3a3f44;border-radius:8px}.ellipsis-btn{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:5px;transition:opacity .2s}.ellipsis-btn:hover{background-color:#4f545c;border-radius:5px}.channel-name{font-size:14px;display:flex;align-items:center;justify-content:space-between;padding:5px 10px;border-radius:5px;width:100%}.channel-name:hover,.channel-name.active{background-color:#3a3f44;border-radius:5px}.channel-options-btn{background:none;border:none;cursor:pointer;font-size:1.2em}.channel-options-btn:hover{color:#000}.channel-delete-btn{background:transparent;border:none;color:#d00;cursor:pointer;font-size:14px}.context-menu{position:absolute;background:#333;color:#fff;padding:8px;border-radius:5px;box-shadow:0 4px 6px #0000004d;z-index:1000}.context-menu button{display:block;background:none;border:none;color:#fff;padding:5px 10px;width:100%;text-align:left;cursor:pointer}.context-menu button:hover{background:#444}.channel-options-section{background:red;border:2px solid blue;padding:10px;border-top:1px solid #ccc;display:block;justify-content:space-around}.dropdown-menu{position:absolute;top:var(--dropdown-top);left:var(--dropdown-left);background:#333;border-radius:5px;padding:8px;box-shadow:0 4px 6px #0003;z-index:1000;display:flex;flex-direction:column;min-width:120px;transition:opacity .2s ease-in-out}.dropdown-menu button{background:none;border:none;border-radius:5px;color:#fff;padding:10px;text-align:left;cursor:pointer;width:100%}.dropdown-menu button:hover{background:#fff3;border-radius:5px}.arrow-up{position:absolute;top:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #333}.color-picker{text-align:center;margin-top:10px}.color-options{display:flex;justify-content:center;gap:10px}.color-circle{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .2s ease-in-out}.color-circle:hover{transform:scale(1.1)}.color-circle.active{border:2px solid white;box-shadow:0 0 5px #fffc}.leave-space-btn{margin-top:auto;padding:8px 16px;background-color:red;color:#fff;border:none;border-radius:4px;cursor:pointer}.leave-space-btn:hover{background-color:#8b0000}.createInvite-btn{align-items:center}.createInvite-btn:hover{background-color:#327237}.DM-sidebar{display:flex;width:250px;height:100vh;background:#23272a;padding:10px;flex-direction:column}.DM-sidebar-title{display:flex;justify-content:space-between;align-items:center;width:105%;padding:5px 10px;margin-bottom:8px;font-size:20px}.DM-friend-list{font-size:15px;font-weight:700;background:#23272a}