html,body{height:100%;margin:0;padding:0}#root{height:100%;display:flex;flex-direction:column;align-items:center;flex:1;background-color:#111827;color:#e2e8f0;gap:1rem;overflow:hidden}*{line-height:1.5;box-sizing:border-box}hr{width:100%;border:1px solid rgb(88,88,88)}p{font-size:large;text-align:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{animation:spin 1s linear infinite;background-color:transparent;border:9px solid gray;border-top:9px solid white;height:70px;width:70px;border-radius:50%;margin:2rem}.spinnerBox{width:100%;display:flex;justify-content:center}.errorWrapper{margin:.5rem 0;border:2px solid #FF2C2C;border-left:10px solid #FF2C2C;font-size:large;border-radius:0 5px 5px 0;padding:1rem .5rem;list-style:none}.goHome{border-radius:20px;box-shadow:0 0 10px;padding:2rem 4rem;font-size:x-large;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}.goHome a{color:#e2e8f0;text-decoration:none;padding:.5rem 1rem;background-color:#ffffff4d;border-radius:5px;box-shadow:#000 0 0 10px 1px;transition:transform .1s ease-in-out}.goHome p{margin:0;text-align:center}.goHome a:hover,.goHome a:focus{background-color:#fff6;transform:scale(1.05)}.appWrapper{display:flex;flex-direction:column;height:100%;overflow:hidden}.appMainPage{display:flex;flex:1;width:100%;flex-wrap:wrap;min-height:0}.appLeftSide{flex:0 0 300px;min-width:250px;max-width:400px;max-height:100%;overflow-y:auto;padding:1rem;min-width:0}.appRightSide{flex:1 1 500px;min-width:300px;overflow-y:auto;padding:1rem;max-height:100%;min-width:0;overflow-x:hidden}.listedUser{text-align:start;position:relative;word-break:break-all;min-width:100px;font-size:large;cursor:pointer;padding:.2rem .5rem;border-radius:5px;display:flex;align-items:center;text-decoration:none;color:inherit}.activeListedUser{background-color:#fff6}.listedUser:not(.activeListedUser):hover,.listedUser:not(.activeListedUser):focus{background-color:#fff3}img.listedUserAvatar{height:3rem;margin-right:.8rem}img.listedUserAvatar.chatListAvatar{margin-right:.2rem}.friendGrid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));position:relative}.userList{padding:1rem;border-radius:20px;box-shadow:0 0 10px;display:flex;flex-direction:column;gap:.5rem;text-align:center;position:relative;overflow-x:hidden}.userList .legend{font-size:x-large}.userList hr{width:100%;margin-top:0}@media(max-width:800px){.appMainPage{overflow:visible}.appLeftSide,.appRightSide{flex:1 1 100%;max-width:100%}#root{height:fit-content;min-height:100vh}}.alertPopup{z-index:100000;position:fixed;top:1rem;right:1rem;border-radius:0 5px 5px 0;padding:.75rem 1.25rem;font-size:1.2rem;color:#fff;box-shadow:0 8px 20px #0003;opacity:0;transform:translateY(-10px);animation:slideIn .3s ease forwards;min-width:200px}.alertPopup.error{background-color:#e5484d;border-left:5px solid #ffb3b5}.alertPopup.success{background-color:#2fbf71;border-left:5px solid #b9f6ca;color:#353535}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.spaceApartFlex{display:flex;justify-content:end;align-items:center;position:relative}.infoContainer{width:2rem;height:2rem;display:flex;justify-content:center;align-items:center;cursor:help}.spaceApartFlex img{height:1rem}.openMoreOptions{z-index:9999;background-color:#1a202c;border-radius:5px;padding:10px;display:flex;flex-direction:column;box-sizing:border-box;width:fit-content;box-shadow:0 0 10px;color:#fff;position:absolute;top:120%;right:0}.dropdown-link{padding:.1rem 1rem;text-decoration:none;color:inherit;cursor:pointer;white-space:nowrap}.dropdown-link:hover,.dropdown-link:focus{background-color:#fff3}header{width:100vw;background-color:#1a202c;color:#e2e8f0;font-size:larger;box-shadow:#000 0 0 10px .1px}nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem}nav .headerLinks{display:flex;gap:1rem;align-items:center}nav *{padding:0;margin:0}.headerTitleRotate{transform:translate(30%) rotate(-90deg);white-space:nowrap;color:#29bbff;font-style:oblique;line-height:1;font-size:1.4rem;margin-left:-20px;width:100cqh}.logo{text-decoration:none;color:inherit;display:flex;container-type:size;color:#e2e8f0}.logo h1{height:100%;flex:1;display:flex;justify-content:center;align-items:center;gap:0;line-height:1;font-size:100cqh;position:relative}.logo{height:50px;display:flex;align-items:center}.headerLink{color:#e2e8f0;text-decoration:none;padding:.5rem 1rem;border-radius:5px;cursor:pointer;background-color:transparent;border:none;font-size:1.2rem;font-family:inherit;font-weight:inherit}.headerLink:hover,.headerLink:focus{background-color:#fff3}.headerAvatar{height:3.5rem;width:3.5rem;cursor:pointer}.profileContainer{position:relative;padding:0;margin:0;height:3.5rem;width:3.5rem}.authForm{display:flex;flex-direction:column;background-color:#1a202c;padding:2rem;gap:1rem;border-radius:10px;box-shadow:#000 0 0 10px 1px;font-size:large}.authForm legend{font-size:x-large;min-width:200px}.authForm input{padding:2px 4px;font-size:large;border-radius:3px;border:2px solid rgb(255,255,255,.3);background-color:#fff3;color:#e2e8f0}.authForm label{display:flex;flex-direction:column;cursor:text}.authForm button.submit{width:fit-content;height:fit-content;align-self:center;padding:.5rem 2rem;border-radius:5px;font-size:large;box-shadow:#000 0 0 10px 2px;background-color:#ffffff80;border:none;cursor:pointer}.authForm button.submit:hover,.authForm button.submit:focus{background-color:#fff6}.authForm button.submit:active{box-shadow:none;transform:translate(-.5%,2%)}.authBtns{display:flex;gap:.5rem}.authBtns a{background:#ffffff26;border:none;font-size:1rem;color:inherit;padding:.5rem 1rem;cursor:pointer;border-radius:6px;text-decoration:none}.authBtns a:hover{background:#ffffff40}.authBtns a.active{background:#ffffff73;font-weight:600;cursor:default;transform:scale(1.2)}.profileOutline{max-width:700px;min-width:300px;width:100%;padding:1rem;flex:1}.editButtons{margin-bottom:1rem;display:flex;gap:1rem}.profileTop{display:flex;padding:.5rem;justify-content:space-between;align-items:center;font-size:larger}.profileBottom{word-break:break-all}.blurb{width:100%;min-height:300px;field-sizing:content;flex:1;padding:.5rem;background-color:#1a202c;color:inherit;border-radius:5px;resize:vertical}input{background-color:#1a202c;color:inherit;border:1px solid gray;padding:.5rem;border-radius:5px}.onlineStatus{width:20px;height:20px;border-radius:50%}.onlineStatusSmall{width:8px;height:8px;border-radius:50%;position:absolute;top:2px;left:2px}.onlineStatus.online,.onlineStatusSmall.online{background-color:green}.onlineStatus.offline,.onlineStatusSmall.offline{background-color:red}.flex{display:flex;justify-content:center;align-items:center;gap:.5rem}.EditAvatarModalOverlay{z-index:10000;position:fixed;inset:0;background-color:#0006;display:flex;align-items:start;justify-content:center;overflow-y:auto}@keyframes dropIn{0%{transform:translateY(-20%);opacity:0}to{transform:translateY(0);opacity:1}}.EditAvatarModal{animation:dropIn .5s ease-in-out;width:fit-content;height:fit-content;padding:2rem;border-radius:20px;background-color:#111827;box-shadow:0 0 10px 1px;margin:2rem;display:flex;flex-direction:column;justify-content:space-between;align-items:start;gap:1rem;overflow-y:auto}.EditAvatarModal button,.EditAvatarModal select,.editButtons button{cursor:pointer;background-color:#4f46e5;padding:.5rem 2rem;border:2px solid black;border-radius:5px;color:inherit;font-size:large}.EditAvatarModal button:disabled,.editButtons button:disabled{background-color:gray;cursor:not-allowed}.EditAvatarModal select{padding-left:.5em}.EditAvatarModal button:not(:disabled):hover,.EditAvatarModal button:not(:disabled):focus,.editButtons button:not(:disabled):hover,.editButtons button:not(:disabled):focus,.EditAvatarModal select:hover,.EditAvatarModal select:focus{background-color:#3b34c3}.avatarContainer{display:flex;justify-content:center;flex-wrap:wrap;max-width:650px;gap:18px}.choseAvatar{box-sizing:content-box;max-width:150px;border-radius:8px;display:flex;justify-content:center;align-items:center;padding:.5rem;cursor:pointer;transition:transform .1s linear}.choseAvatar:hover,.choseAvatar:focus{transform:scale(1.025)}.modalButtons{width:100%;display:flex;gap:1rem;justify-content:end}.changeAvatar{cursor:pointer}.avatar{height:100px;width:100px;border-radius:50%;background-color:#1a202c;overflow:hidden}.profileTopLeft{display:flex;flex-direction:column;align-items:flex-start;font-size:xx-large;gap:1rem;font-weight:bolder}.centered{display:flex;align-items:center;flex-direction:column}.flexColumn{display:flex;flex-direction:column;gap:.5rem}.partial{width:100%;min-height:100%;box-shadow:0 0 10px 1px;border-radius:20px;padding:1rem;display:flex;flex-direction:column}.outletOptions{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));justify-content:start;gap:1.5rem}.optionCard{width:100%;aspect-ratio:1/1.1;border-radius:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;background-color:#6a89a7;border:3px solid black;transition:transform .2s ease,background-color .2s ease;font-size:large;color:#000;text-decoration:none;gap:.5rem;word-break:break-word}.optionCard:hover,.optionCard:focus{background-color:#6a89a7cc;transform:scale(1.05)}.optionCard .icon{width:50%;max-width:8rem;height:auto}.backArrow{height:2rem;padding:.2rem .5rem;box-sizing:content-box;border-radius:5px;transition:transform .15s ease,background-color .15s ease}.backArrow:hover,.backArrow:focus{transform:scale(1.05);background-color:#fff3}.messages{display:flex;flex-direction:column;gap:.5rem;padding:1rem;flex:1}.messageWrapper{max-width:max(200px,45%);width:fit-content;font-family:Georgia,Times New Roman,Times,serif;cursor:pointer}.messageWrapper.received .details{align-items:flex-end}.messageWrapper .details{font-size:small;display:flex;flex-direction:column;width:100%}.messageWrapper .flex{justify-content:start;align-items:end}.messageWrapper.sent{align-self:flex-end}.messageWrapper.sent .flex{flex-direction:row-reverse;justify-content:end}.message{padding:.5rem 1rem;font-family:Georgia,Times New Roman,Times,serif;word-break:break-word}.message.received{background-color:#22c55e66;color:#ddd;border-radius:20px 5px 5px 2px}.message.sent{background-color:#5865f2;color:#ddd;border-radius:5px 20px 2px 5px}.sendMessage{display:flex;gap:.5rem;align-items:center;position:sticky;bottom:-1rem;background-color:#111827;padding:.5rem;padding-top:0}.sendMessage input{flex:1;height:4rem;font-size:1.5rem;width:0}.sendMessage img,.choseRequests img{height:2rem;padding:.5rem;box-sizing:content-box;border-radius:5px;transition:transform .2s ease;cursor:pointer}.sendMessage img:hover,.sendMessage img:focus,.choseRequests img:hover,.choseRequests img:focus{transform:scale(1.1);background-color:#fff3}.sendMessage img:active,.choseRequests img:active{transform:scale(.95);background-color:#ffffff4d}.loadOldMessagesBtn{flex:auto;color:#fff;font-size:large;background-color:#1a202c;box-shadow:0 0 5px;cursor:pointer;border:2px solid rgb(26 32 44);border-radius:5px;transition:transform .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.loadOldMessagesBtn:hover,.loadOldMessagesBtn:focus{background-color:rgb(26 32 44,.8);border-color:rgb(26 32 44,.8);box-shadow:0 0 10px 1px;transform:scale(1.01)}.loadOldMessagesBtn:active{background-color:rgb(26 32 44,.6);border-color:rgb(26 32 44,.6);box-shadow:0 0 5px;transform:scale(.99)}.optionButtons{min-width:300px;width:100%;padding:1rem;display:flex;justify-content:flex-end;gap:1rem}.optionButton{background-color:#4f46e5;color:inherit;text-decoration:none;padding:.5rem 1rem;border-radius:5px;border:none;font-size:large;cursor:pointer}.optionButton:hover,.optionButton:focus{background-color:#3b34c3}.nameSearch{margin-bottom:1rem}.choseRequests{width:100%;display:flex;align-items:center}.choseRequests button{flex:1;background-color:#1a202c;color:#5865f2;font-size:larger;cursor:pointer;border:none;border:2px solid black;border-radius:5px}.choseRequests button:hover{box-shadow:0 1px #fff}.choseRequests button.active{box-shadow:0 2px #5865f2}.choseRequests img{height:2rem;margin-left:.5rem}.singleChat{display:flex;flex-direction:column;text-decoration:none;color:inherit;gap:.2rem;text-align:start;position:relative;min-width:100px;font-size:large;cursor:pointer;padding:.2rem .5rem;border-radius:5px;justify-content:center}.singleChat .avatars{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:2px 0;align-items:center}.singleChat:hover,.singleChat:focus{background-color:#fff3}.messagingOptions{justify-content:end;display:flex;width:100%;height:fit-content;gap:1rem}.viewUsersInChat{display:flex;align-items:center;padding:.2rem;max-width:200px;min-width:0}.viewUsersInChat span{word-break:break-all;white-space:normal}.viewUsersInChat img{height:2rem}