#app{height:100svh;width:100svw;position:relative}button{color:#000}.auth-page{height:100svh;width:100svw;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;top:100%;transition:1.5s}.auth-page-logo{height:200px;width:200px}.auth-page .input-field{margin:15px;width:225px;height:min-content;border-bottom:1px solid white}.auth-page .input-field input{background-color:transparent;border:none;outline:none;width:100%;height:30px;font-size:14px;color:#fffc}.auth-page .input-field input::placeholder{color:#fff9}.error-message{color:#ff79c9;font-size:14px}.submit-auth-form{height:40px;width:70px;border-radius:10px;border:none;outline:none;transition:.2s;opacity:.7}.buttons-divider{margin:10px;width:200px;display:flex;justify-content:center;align-items:center}.buttons-divider p{color:#fffc;font-size:14px;margin:0 10px}.buttons-divider .line{height:1px;width:100%;background-color:#fffc}.continue-with-google-button{height:40px;display:flex;align-items:center;border-radius:10px;border:none;outline:none;padding:0 10px;transition:.2s;cursor:pointer;margin-bottom:10px}.continue-with-google-button:hover{box-shadow:0 0 10px #fff}.continue-with-google-button img{height:30px;width:30px;margin-right:10px}.switch-form-button{color:#fff9;font-weight:300;font-size:14px}.switch-form-button a{color:#fff}#messages-page{display:flex;height:100svh;width:100svw;position:relative}#contacts{height:100svh;width:100svw;max-width:70px;min-width:70px;background-color:#040422;transition:.2s;z-index:10;position:relative}#contacts header{height:60px;width:100%;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden}#contacts h1{color:#fffc;margin-left:15px}#toggle-contacts{height:60px;width:70px;font-size:30px;background-color:#040422;outline:none;border:none;cursor:pointer;color:#fffc;font-weight:300;position:absolute;right:0;top:0}#add-contact{height:70px;width:100%;font-size:20px;font-weight:300;background-color:#ffffff08;border:none;border-bottom:1px solid rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.1);color:#fff6;transition:.2s;cursor:pointer;text-wrap:nowrap;overflow:hidden;display:none;opacity:0;height:0;justify-content:center;align-items:center}#add-contact:hover{background-color:#ffffff0d}#profile-board-container{position:absolute;top:0;left:0;height:100svh;width:100svw;z-index:1000;display:none;opacity:0;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:.2s}#profile-board-background{position:absolute;top:0;left:0;height:100svh;width:100svw;transition:.2s}#profile-board{position:relative;height:400px;width:300px;padding:15px;border-radius:10px;border-top:1px solid rgba(255,255,255,.1);background:linear-gradient(45deg,#0c0f2b,#1d213b);box-shadow:0 0 10px #0003;display:flex;flex-direction:column;justify-content:center;align-items:center}#exit-board{position:absolute;top:10px;right:10px;height:25px;width:25px;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;outline:none;cursor:pointer}#exit-board img{height:20px;width:20px}#main-profile-photo{height:150px;width:150px;border-radius:180px;border:5px solid rgba(255,255,255,.3);margin-bottom:15px}#displayName-display{color:#fffc;font-size:25px}#email-display{color:#fff9;font-weight:300;font-size:17px;margin-bottom:15px}#sign-out-button{background:linear-gradient(45deg,#9a1313,#ce2929);border:none;outline:none;border-radius:10px;height:40px;width:70px;font-size:15px;font-weight:400;color:#fffc;transition:.2s;cursor:pointer}#sign-out-button:hover{box-shadow:0 0 10px #ff4e33}#new-contact-popup-container{position:absolute;top:0;left:0;height:100svh;width:100svw;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;display:none;justify-content:center;align-items:center;transition:.2s;opacity:0}#new-contact-popup-background{position:absolute;top:0;left:0;height:100svh;width:100svw}#new-contact-popup{position:relative;height:min-content;width:100%;max-width:400px;margin:20px;padding:15px;border-radius:10px;border-top:1px solid rgba(255,255,255,.1);background:linear-gradient(45deg,#0c0f2b,#1d213b);box-shadow:0 0 10px #0003;display:flex;flex-direction:column;justify-content:center}#exit-new-contact-popup{position:absolute;top:10px;right:10px;height:25px;width:25px;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;outline:none;cursor:pointer}#exit-new-contact-popup img{height:20px;width:20px}#new-contact-input{display:flex;align-items:center;width:100%;height:30px;margin:10px 0}#new-contact-popup h1{color:#fffc;width:100%}#new-contact-input-container{width:100%;height:100%;position:relative}#new-contact-input input{width:100%;height:100%;background-color:#ffffff1a;border:none;border-radius:5px;color:#fffc;padding:0 5px;outline:none}#new-contact-input input::placeholder{color:#ffffff80}#input-selection{height:min-content;width:98%;position:absolute;top:30px;left:50%;transform:translate(-50%);background-color:#121228;z-index:1002;transition:.2s;border-bottom-left-radius:10px;border-bottom-right-radius:10px}#add-contact-button{height:100%;width:60px;margin-left:10px;border:none;outline:none;border-radius:5px;background-color:#ffffffb3;opacity:.7;transition:.2s}#add-contacts-list{height:min-content;display:flex;flex-wrap:wrap;gap:5px}.new_member{outline:none;border:1px solid rgba(255,255,255,.05);border-radius:5px;padding:5px;background-color:#1a1d32;color:#fffc;opacity:.8;transition:.2s;cursor:pointer}.new_member:hover{opacity:1}#create-chat-button{margin-top:10px;height:30px;width:60px;border:none;outline:none;border-radius:5px;background-color:#ffffffb3;opacity:.7;transition:.2s}#new-contact-input-selection{height:min-content;width:100%;display:flex;flex-direction:column}#new-contact-input-selection p{color:#fffc;height:30px;width:100%;display:flex;align-items:center;padding:0 10px;transition:.2s;cursor:pointer}#new-contact-input-selection p:hover{background-color:#ffffff05}#upload-file-container{position:absolute;height:100svh;width:100svw;z-index:999;opacity:0;display:none;justify-content:center;align-items:center;transition:.2s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#upload-file-background{position:absolute;height:100svh;width:100svw;transition:.2s}#upload-file-popup{background-color:red;height:300px;width:300px;aspect-ratio:1;z-index:1000;border-radius:10px;border-top:1px solid rgba(255,255,255,.1);background:linear-gradient(45deg,#0c0f2b,#1d213b);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:45px 20px 20px;position:relative}#exit-upload-file-popup{height:25px;width:25px;position:absolute;top:10px;right:10px;background-color:transparent;border:none;outline:none;cursor:pointer}#exit-upload-file-popup img{height:100%;width:100%}#dropzone{height:100%;width:100%;background-color:#ffffff0d;border-radius:5px;border:2px solid rgba(255,255,255,.03);display:flex;justify-content:center;align-items:center;flex-direction:column;padding:20px;transition:.2s;cursor:default}#dropzone img{height:80px;width:80px;opacity:.4;margin-bottom:10px}#dropzone h2{text-align:center;color:#fff6;font-weight:300;font-size:20px;margin:5px 0}#dropzone p{color:#fff6;margin-bottom:10px}#dropzone button{padding:5px;border-radius:5px;border:none;outline:none;cursor:pointer;color:#000}#hidden-browse-files{display:none}.chat-container{height:70px;width:100%;display:flex;align-items:center;overflow:hidden;cursor:pointer;transition:.2s}.chat-container:hover{background-color:#ffffff0d}.chat-photo-container{height:70px;width:70px;min-width:70px;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden}.chat-photo{height:45px;width:45px;border-radius:180px}.chat-photo1{position:absolute;height:35px;width:35px;right:10px;top:15px}.chat-photo2{position:absolute;height:35px;width:35px;left:10px;bottom:15px}.chat-title{color:#ffffffb3;font-weight:200;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#chat{height:100%;width:100%;position:relative}#chat header{height:60px;width:100%;background-color:#040422;position:relative;display:flex;justify-content:center;align-items:center;padding:0 60px;box-shadow:0 0 10px #1d1d46}#chat h1{color:#fffc;font-weight:300;font-size:clamp(15px,3vw,30px);transition:.2s}#profile-button{height:40px;width:40px;border:2px solid white;outline:none;border-radius:180px;overflow:hidden;cursor:pointer;position:absolute;top:10px;right:10px}#profile-button img{height:100%;width:100%}#messages-display{height:calc(100svh - 120px);width:100%;padding:10px;overflow:scroll;display:flex;flex-direction:column-reverse}#message-input{height:min-content;min-height:60px;width:100%;border-top:1px solid rgba(255,255,255,.1);box-shadow:0 0 20px #7c7cdd33;background:linear-gradient(-90deg,#0e122e,#040422);display:flex;padding:10px;position:absolute;bottom:0}#input-container{height:min-content;width:100%;background-color:#ffffff1a;border-radius:10px;box-shadow:inset -4px -4px 15px #0000004d}#file-input-container{height:min-content;display:flex;align-items:center;flex-wrap:wrap}#message-input textarea{width:100%;height:40px;min-height:40px;padding:14px;outline:none;border:none;background:transparent;color:#fff;resize:none;overflow:hidden}#message-input input::placeholder{color:#fff9}#upload-file{height:40px;width:40px;min-width:40px;background-color:transparent;display:flex;justify-content:center;align-items:center;border:none;outline:none;margin-left:10px}#upload-file img{height:70%;width:70%;opacity:.7;transition:.2s}#upload-file img:hover{opacity:1;cursor:pointer}#send-button{height:40px;width:60px;min-width:60px;margin-left:10px;border:none;outline:none;border-radius:10px;background-color:#ffffffb3;opacity:.7;transition:.2s}.message{color:#fff;position:relative;width:100%;padding:10px}.message-self .message-content{display:flex;flex-direction:column;align-items:flex-end}.message-content{background-color:#0003;border-radius:10px;max-width:200px;padding:10px;overflow-wrap:break-word;transition:.2s;cursor:default}.message-content:hover{background-color:#ffffff0d;transform:scale(1.05)}.message-content p{text-wrap:wrap;width:100%;height:100%}.message h3{text-wrap:nowrap;font-size:15px;color:#fffc}.message-self{display:flex;flex-direction:column;align-items:flex-end;padding-left:30px}.message-others{display:flex;flex-direction:column;align-items:flex-start;padding-right:30px}#file-to-send{height:min-content;width:min-content;display:flex;gap:10px;align-items:center;background-color:#0e0e2c;border-radius:10px;border:2px solid rgba(255,255,255,.2);padding:10px;margin:10px;cursor:pointer;transition:.2s}#file-to-send:hover{filter:brightness(1.2)}#file-to-send img{height:40px;width:40px}#file-to-send p{color:#fff}*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}::-webkit-scrollbar{display:none}body{height:100svh;width:100svw;overflow:hidden;background-color:#040422}#root{height:100%;width:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;background:#084062;background:radial-gradient(at center bottom,#131840,#080b21)}