@import"https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap";body{--background: #fffffa;--header: #2779a7;--container: #edeae5;--font-dark: #251101;--font-light: #fffffa;--accent: #fce181;--message: #9fedd7;--buttons: #2779a7;--link: #01597e;background-color:var(--background);font-family:Outfit,Arial,sans-serif;color:var(--font-dark);margin:0;padding:0}#title{font-size:4rem;line-height:4rem;margin:30px 0 10px}main{display:flex;justify-content:center;max-width:2000px;width:100%;place-self:center;min-height:calc(100vh - 160px)}section,#page-layout{min-height:max(300px,calc(100vh - 185px))}#page-layout{position:relative;background-color:var(--container);margin:10px 20px 10px 10px;border-radius:1rem;width:100%}a{color:var(--link);text-decoration:none;transition:.15s ease-in-out}a:hover{color:#49b5c6}button{background-color:var(--buttons);color:var(--font-light);font-family:Outfit,Arial,sans-serif;font-size:1rem;border:none;border-radius:1.25rem;padding:10px;margin:0 5px;transition:.15s ease-in-out;cursor:pointer}button:hover{background-color:#49b5c6}button:active{background-color:#276973}button:disabled{background-color:#9c9c9c;cursor:unset}.add-members,.see-members{color:var(--font-light);position:absolute;display:flex;flex-direction:column;align-items:center;background-color:#6e5681;z-index:3;right:20px;top:20px;padding:20px;max-height:400px;width:400px;border-radius:1rem}.add-members h2,.see-members h2{margin:0 0 10px}.add-members ul,.see-members ul{padding:0;margin:20px 0;width:100%;text-align:left;max-height:200px;overflow-y:auto;overflow-x:auto;white-space:nowrap}.see-members{font-size:1.25rem}.see-members li{display:flex;align-items:center;margin-bottom:10px}.see-members-profile{height:1.75rem;margin-right:5px}.see-members a{font-weight:600;color:var(--font-light);font-size:1.5rem;margin-right:5px}.see-members a:hover{color:#49b5c6}.search{border:1px solid gray;width:calc(100% - 10px);border-radius:1rem;line-height:2rem;padding-left:10px;margin:10px 0}.loading-wrapper{position:absolute;top:max(100px,calc(50% - 2rem));left:0;width:100%;display:flex;flex-direction:column;align-items:center}.loading{font-size:2rem;transition:opacity .2s ease-in-out}.load-animation{color:transparent;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect fill="%232779a7" stroke="%232779a7" stroke-width="10" width="30" height="30" x="25" y="85"><animate attributeName="opacity" calcMode="spline" dur="3" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.4"></animate></rect><rect fill="%232779a7" stroke="%232779a7" stroke-width="10" width="30" height="30" x="85" y="85"><animate attributeName="opacity" calcMode="spline" dur="3" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="-.2"></animate></rect><rect fill="%232779a7" stroke="%232779a7" stroke-width="10" width="30" height="30" x="145" y="85"><animate attributeName="opacity" calcMode="spline" dur="3" values="1;0;1;" keySplines=".5 0 .5 1;.5 0 .5 1" repeatCount="indefinite" begin="0"></animate></rect></svg>');background-repeat:no-repeat;background-position:0 100%}button,.loading{-webkit-user-select:none;-ms-user-select:none;user-select:none}@media (max-width: 1200px){#page-layout{height:unset}}@media (max-width: 1000px){main{flex-direction:column;align-items:center;width:calc(100% - 20px)}main,section{height:unset}#page-layout{margin:10px 10px 20px}}@media (max-width: 600px){.add-members,.see-members{top:10px}}@media (max-width: 500px){.add-members,.see-members{padding:15px;max-height:400px;width:300px}}header{background-color:var(--background);width:100%}#header-cont{display:flex;justify-content:space-between;place-self:center;color:var(--font-dark);padding:20px 0;margin:0 20px;width:100%;max-width:2000px}.header-left{display:flex;font-size:4rem;align-items:center;margin:0 10px}.logo{display:flex;align-items:center}.logo-img{width:75px;object-fit:contain;margin-right:5px}.pronunciation{color:var(--accent);font-size:1.5rem;margin:0 10px 10px;align-self:flex-end}.header-right{display:flex;flex-direction:column;text-align:end;font-size:2rem;margin:0 10px}.header-account{display:flex;align-items:center}.header-profile{height:2.5rem;margin-right:10px}.header-right button{margin:5px;padding:5px 10px}@media (max-width: 1000px){.header-left{font-size:3rem;margin:0 10px}.logo-img{width:3rem}.header-right{flex-direction:row}.header-btns{border-left:2px solid var(--header);display:flex;flex-direction:column;align-items:center;line-height:1rem;padding-left:5px}.header-right button{font-size:.8rem;margin:3px}.header-account{margin-right:5px}}@media (max-width: 800px){.header-left{font-size:2.5rem}.logo-img{width:2.5rem}.header-right{font-size:1.5rem}.header-profile{height:2.25rem;margin-right:5px}.header-btns{padding-left:5px}}@media (max-width: 700px){.header-left{font-size:2rem}.header-btns{padding-left:5px}.header-account{font-size:1.25rem}}@media (max-width: 600px){.header-left{font-size:1.5rem}.logo-img{width:2.25rem}.header-account span{text-align:start;width:min-content}}@media (max-width: 500px){.logo-img{margin-left:20px;width:3.5rem}.logo span{display:none}}.chatlist{background-color:var(--container);display:flex;flex-direction:column;width:100%;max-width:450px;margin:10px 10px 10px 20px;border-radius:1rem;position:relative}.chatlist h2{background-color:var(--accent);border-top-left-radius:1rem;border-top-right-radius:1rem;padding:26px 20px;margin:0 0 20px}.no-chats{margin:0 20px}.chats{min-height:calc(100vh - 320px);max-height:calc(100vh - 100px);overflow-y:auto;overflow-x:hidden}.chatlist ul{list-style:none;padding:0;margin:0 20px}.chat{font-size:1.15rem;color:#696969;position:relative;margin-bottom:20px;display:flex;align-items:center}.chatlist-profile{height:2rem;margin:0 5px 10px 0}.chat-name{font-weight:600;font-size:1.25rem}.chat-preview{margin:0 0 10px;font-size:.9rem;text-wrap:nowrap;overflow-x:hidden}.timestamp{position:absolute;top:5px;right:0;font-size:.8rem;text-align:end;z-index:2;background-color:var(--container);padding-left:5px}@media (max-width: 1200px){.chatlist{width:350px}.chatlist h2{font-size:1.25rem;padding:24px}.chatlist ul{margin:0 10px}.chat-name{font-size:1rem}}@media (max-width: 1000px){.chatlist h2{font-size:1.5rem;padding:26px 20px}.chatlist{max-width:unset;width:100%;margin:10px}.chats{min-height:unset}}@media (max-width: 600px){.chatlist h2{padding:15px 20px}.chats ul{margin:0 10px}.chat-name{font-size:1.1rem}.chat-preview{max-width:400px}.timestamp{width:min-content;min-width:80px;text-align:end}}@media (max-width: 500px){.chat-preview{max-width:275px}}#userlist-cont{position:relative}#userlist-cont h2{background-color:var(--message);border-top-left-radius:1rem;border-top-right-radius:1rem;padding:26px 20px;margin:0 0 20px}.user-directory p{margin:0 10px}.user-search{border:1px solid gray;border-radius:2rem;line-height:2rem;font-size:1.5rem;padding:5px 20px;margin:10px 20px;width:calc(100% - 40px);box-sizing:border-box}.user-list{max-height:calc(100vh - 350px - 2rem);overflow-y:auto;line-height:2rem;padding:0 20px}.user{align-items:center;display:flex;justify-content:space-between;width:fit-content;min-width:300px;text-wrap:nowrap;padding:5px}.user-cont{display:flex}.user-profile{height:2rem;width:2rem;margin-right:10px;background-color:gray;border-radius:50%}.user-chat-btn{padding:5px 10px;margin:0 10px}.username{font-size:1.5rem;font-weight:600;margin-right:5px}.full-name{font-size:1rem;font-style:oblique;color:gray}.btn-create-chat{position:absolute;top:20px;right:20px}@media (max-width: 1000px){.user-list{margin-bottom:10px}}@media (max-width: 800px){.user-search{line-height:1.25rem;font-size:1rem;padding:5px 10px;margin:10px 20px}}@media (max-width: 600px){#userlist-cont h2{padding:15px 20px}.user{line-height:1.5rem}.user a{font-size:1.25rem}.btn-create-chat{top:.8rem;font-size:.8rem}}#chat-page{display:flex;max-width:2000px;width:100%}.edit-group{line-height:2.5rem;font-size:2rem;font-family:inherit;font-weight:600;margin:20px -10px;border-radius:2rem;border:1px solid gray;max-width:500px;padding:0 10px}.chat-cont p{color:gray;font-style:oblique;margin:20px}.chat-header{background-color:var(--header);border-top-left-radius:1rem;border-top-right-radius:1rem;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.chat-header h1{display:flex;align-items:center;font-size:1.5rem;padding:10px 0;color:var(--font-light)}.chat-profile{height:2.5rem;width:2.5rem;border-radius:50%;margin-right:10px;background-color:gray}.chat-full-name{margin:0 10px;color:var(--message);font-weight:300;font-size:1.25rem}.chat-btns{display:flex}.chat-btns button{margin:0 3px;padding:8px}.chat-btn{display:flex;width:2rem}.messages-cont{background-color:var(--container);width:100%;height:calc(100vh - 320px - 2rem);overflow-y:auto}.messages-cont ul{display:flex;flex-direction:column;padding:0;list-style-type:none}.message{background-color:var(--message);color:var(--font-dark);position:relative;display:flex;place-self:start;margin:5px 20px;padding:20px 10px;border-radius:1rem;max-width:max(90%,900px);min-width:150px;font-size:1.1rem;overflow-wrap:break-word;word-break:break-all}.you{background-color:var(--accent);place-self:end}.message-time{position:absolute;top:3px;right:10px;font-size:.75rem;color:var(--link);opacity:0;transition:opacity .2s ease-in-out}.message:hover .message-time,.message-time.visible{opacity:1}.user-read{position:absolute;right:10px;bottom:0}.read-profile{height:.8rem;margin-left:3px}.message-input{display:flex;padding:20px 15px}#input-text{padding:0 15px;width:100%;line-height:2rem;font-size:1.1rem;border-top-left-radius:2rem;border-bottom-left-radius:2rem;border:1px solid gray}#btn-send{padding:10px 20px;border-radius:0;border-top-right-radius:2rem;border-bottom-right-radius:2rem}#btn-leave:hover{background-color:#f04f4f}@media (max-width: 1200px){.chat-header h1{font-size:1.25rem}.chat-btn{width:1.5rem;margin:0 5px}.message{font-size:1rem}.message-time{font-size:.5rem}}@media (max-width: 1000px){#chat-page{display:flex;flex-direction:column-reverse;align-items:center}}@media (max-width: 600px){.chat-header h1{font-size:1.25rem}.chat-btns button{margin:0 2px;padding:5px}}@media (max-width: 400px){.chat-btns{display:flex;flex-direction:column;width:min-content}.chat-btn{width:1rem;margin:0;padding:0 5px}}.profile-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center}.modal-content{margin:0 20px}.profile-icons{margin-bottom:20px}.profile-icon,.profile-user{height:100px;width:100px;margin-right:10px;border:8px solid rgba(0,0,0,0);border-radius:100%;transition:.15s ease-in-out}.profile-user{transition:.15s ease-in-out}.profile-user:hover{border:8px solid var(--accent);filter:brightness(90%)}.profile-selection{display:flex;flex-direction:column;align-items:center;place-self:center}#btn-profile-change{padding:5px;margin-top:3px;font-size:1rem}@media (max-width: 800px){.profile-icon,.profile-user{height:80px;width:80px}}@media (max-width: 400px){.profile-icon,.profile-user{height:70px;width:70px}}#user-page{border-radius:2rem;background-color:var(--container);display:flex;flex-direction:column;align-items:center;max-width:1200px;width:100%;padding:0 0 30px;margin:0 20px 20px;min-height:calc(100vh - 200px)}#user-page h1{display:flex;justify-content:center;font-size:3rem;line-height:3rem;width:100%;background-color:var(--accent);border-top-left-radius:2rem;border-top-right-radius:2rem;margin:0 0 10px;padding:15px 0}#user-page h2{font-size:2rem;margin:10px 0;line-height:3rem}#user-page p{margin:5px 0}.user-info{display:flex;flex-direction:column;margin:0 10px}.btn-delete{background-color:#f04f4f}.btn-delete:hover{background-color:#d62424}.btn-delete:active{background-color:#9c0606}#user-page p{margin-bottom:10px}#user-page input{border:1px solid gray;line-height:2rem;border-radius:2rem;padding:0 10px;min-width:250px;font-size:inherit;margin-bottom:20px}.profile-icon{place-self:center}.modal-content{background-color:var(--container);padding:20px;border-radius:10px;text-align:center;max-width:400px;width:90%}.loading-message{font-size:1.25rem;padding:20px}@media (max-width: 1000px){#user-page h1{font-size:2rem;line-height:2.5rem}#user-page h2{font-size:1.5rem;line-height:2rem}}@media (max-width: 600px){#user-page h1{font-size:1.5rem;line-height:1.5rem}#user-page h2{font-size:1.25rem;line-height:2rem}}#login,#signup{border-radius:2rem;background-color:var(--container);display:flex;flex-direction:column;align-items:center;max-width:1200px;width:100%;padding:0 0 30px;font-size:1.25rem;margin:0 20px 20px;min-height:max(350px,calc(100vh - 200px));position:relative}#signup{min-height:min(750px,calc(100vh - 200px))}#login h1,#signup h1{display:flex;justify-content:center;font-size:3rem;line-height:3rem;width:100%;background-color:var(--message);border-top-left-radius:2rem;border-top-right-radius:2rem;margin:0 0 20px;padding:15px 0}#login input,#signup input{font-size:inherit;font-family:inherit;margin-bottom:20px;min-width:500px;border-radius:2rem;border:1px solid gray;padding:0 15px;line-height:2.5rem}#login label,#signup label{display:flex}#btn-login{font-size:1.25rem;padding:10px 40px;margin:10px 0}.profile-selection{margin-bottom:20px}@media (max-width: 600px){#login h1{font-size:2rem;line-height:2rem}#login input{min-width:300px;font-size:1rem;line-height:2rem}}#error-cont{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--font-dark);margin:0 40px;background-color:var(--container);border-radius:2rem}.error-img{max-width:500px;object-fit:contain}@media (max-width: 1000px){#error-cont{font-size:1rem}}@media (max-width: 600px){#error-cont{margin:0 10px}.error-img{max-width:400px}}@media (max-width: 450px){#error-cont{font-size:.75rem}.error-img{max-width:350px}}footer{display:flex;justify-content:center;align-items:center;width:100%}