:root{--nav-width: 7rem;--border-radius: 1rem;font-size:1.25rem;font-family:Poppins,sans-serif}@media (prefers-color-scheme: light){:root{--main-color: #38195e;--nav-background-color: #2a1346;--button-background-color: #2a1346;--font-color: #fde2ff;--positive-color: #7fdd7f;--negative-color: #dd7f7f;--caution-color: #ddd77f;--you-color: #7f8cdd}}@media (prefers-color-scheme: dark){:root{--main-color: #000000;--nav-background-color: #0d0d0d;--button-background-color: #252525;--font-color: #c5c5c5;--positive-color: #9ade9a;--negative-color: #de9a9a;--caution-color: #dedc9a;--you-color: #9aa3de}}body{background-color:var(--main-color);margin:0;height:100%}#root{height:100dvh;width:100%}main,nav{display:flex;flex-direction:column;place-items:center;place-content:start;text-align:center;background-color:var(--main-color);color:var(--font-color);height:100%}nav{background-color:var(--nav-background-color);width:var(--nav-width);position:fixed;font-size:.75rem;transition:width .85s ease-in-out;place-content:center;z-index:4}nav ul{display:flex;flex-direction:column;justify-content:space-around;list-style:none;margin:0;padding:.5rem;height:100%}nav ul li{width:100%}nav ul li:hover{text-decoration:underline}nav #navButton{position:absolute;top:0%;left:87%;z-index:3;background-color:transparent;border-color:transparent;opacity:.55}nav #navButton:hover,nav #navButton:active{opacity:1;scale:1.05}main{padding-top:0;margin-left:var(--nav-width)}main p{text-wrap:wrap;width:100%}form{display:flex;flex-direction:column;text-align:start;width:50%;gap:1rem}button{border-radius:var(--border-radius);background-color:var(--button-background-color);padding:.5rem;color:var(--font-color);font-size:1rem;border:1px solid transparent}button:hover{cursor:pointer}input{background-color:var(--nav-background-color);border-radius:var(--border-radius);color:var(--font-color);border-color:transparent;padding:.33rem;font-size:1rem}a{color:var(--font-color);text-decoration:none}#registerPage{display:flex;flex-direction:column;place-items:center;gap:1rem}#registerPage form{display:grid;grid-template-columns:1fr;grid-template-rows:auto;place-self:center;place-items:start;text-align:start!important;gap:.5rem;margin:0;padding:0;width:fit-content!important}#registerPage form button{margin-top:.5rem;place-self:center}#registerPage form label{margin-left:.25rem}#profileSettings{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;margin:1rem;row-gap:0;font-size:.75rem}#profileSettings .profileSection{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:.5rem;place-items:center;place-content:center;text-align:start}#profileSettings .profileSection button{padding:.25rem}#deleteProfile{display:flex;flex-direction:column;gap:1rem;place-content:center;place-items:center}#deleteProfile input{width:85%}#deleteProfile button{padding:.25rem;font-size:1.25rem}table{padding:.5rem;text-align:start;table-layout:auto}table th{text-align:start;padding-left:.5rem}table tbody{text-align:start;text-overflow:clip}table tbody tr{height:100px}table tbody tr td{padding:.5rem;border-bottom:2px solid var(--font-color)}table tbody tr td .status{background-color:var(--button-background-color);border-radius:var(--border-radius);padding:.5rem;text-align:start;font-size:.85rem;width:fit-content}table tbody .pendingRequest,table tbody .pendingRequest:visited,table .pendingRequest{opacity:.6;text-decoration:underline}#conversationsPage{display:grid;grid-template-columns:1fr 3fr;grid-template-rows:1fr}#conversationsPage #conversationLists,#conversationsPage #currentConversation{height:100dvh}#conversationsPage #currentConversation{display:grid;grid-template-columns:1fr;grid-template-rows:8fr 1fr;width:100%}#conversationsPage #currentConversation #messageContainer{display:flex;flex-direction:column;overflow-y:scroll}#conversationsPage #currentConversation #messageContainer sub.messageTimestamp,#conversationsPage #currentConversation #messageContainer sub.messageSender{opacity:.6;font-size:.5rem;position:absolute}#conversationsPage #currentConversation #messageContainer sub.messageTimestamp{bottom:0;right:0;padding-right:.5rem;padding-bottom:.25rem}#conversationsPage #currentConversation #messageContainer sub.messageSender{top:0;left:0;padding-left:1rem;padding-top:.25rem}#conversationsPage #currentConversation #messageContainer .messageFromOwner,#conversationsPage #currentConversation #messageContainer .messageFromOther{position:relative;border:1px solid var(--font-color);border-radius:var(--border-radius);padding:1rem;margin:1rem;min-width:25%;max-width:75%;width:fit-content;text-wrap:wrap;text-align:start;word-break:break-word}#conversationsPage #currentConversation #messageContainer .messageFromOwner p,#conversationsPage #currentConversation #messageContainer .messageFromOther p{padding:0;margin:0}#conversationsPage #currentConversation #messageContainer .messageFromOwner p input,#conversationsPage #currentConversation #messageContainer .messageFromOther p input{width:inherit;opacity:.85;border:2px solid #fde2ff!important;font-size:inherit;padding:0!important;margin:0!important}#conversationsPage #currentConversation #messageContainer .messageFromOwner{align-self:end;background-color:var(--nav-background-color)}#conversationsPage #currentConversation #messageContainer .messageFromOther{align-self:start}#conversationsPage #currentConversation #messageContainer .lds-spinner{position:relative;top:0;right:50%;transform:translate(-50%,-50%)}#conversationsPage #currentConversation #messageContainer button{position:absolute;top:50%;transform:translateY(-50%);right:0;padding:0;background-color:transparent;border-color:transparent}#conversationsPage #currentConversation #messageContainer button .moreButton path{fill:var(--font-color);opacity:.6;scale:1.1;pointer-events:none}#conversationsPage #currentConversation #messageContainer button .moreButton:hover path{opacity:1}#conversationsPage #conversationLists{font-size:.75rem;display:flex;flex-direction:column;overflow-y:scroll}#conversationsPage #conversationLists button{font-size:.75rem}#conversationsPage #conversationLists #newConversationButton{font-size:2.5rem}#conversationsPage button{display:flex;place-items:center;place-content:center;background-color:transparent;margin:0;padding:0;opacity:.8}#conversationsPage button ul{display:flex;list-style:none;border:1px solid var(--font-color);border-radius:var(--border-radius);place-items:center;padding:.5rem;width:100%}#conversationsPage button ul li{padding:0;margin:0}#conversationsPage button ul:hover{cursor:pointer;background-color:hsl(from var(--main-color) h s calc(l + 10%));color:hsl(from var(--font-color) h s calc(l + 10%))}#conversationsPage button:hover{opacity:1}#conversationsPage #newConversationButton{font-size:2.5rem;padding:0;margin:0}#conversationsPage #cancelConversationButton{position:absolute;font-size:1.5rem;top:-0;right:.5rem;width:fit-content}#conversationsPage #newConversationForm{display:flex;flex-direction:column;place-items:center;place-content:center;text-align:center;width:min-content;margin:0;padding:.5rem;border:1px solid var(--font-color);border-radius:var(--border-radius);position:absolute;z-index:5!important;background-color:var(--nav-background-color);top:50%;left:50%;transform:translate(-50%,-50%)}#conversationsPage #newConversationForm #selectedFriends{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem;padding:.5rem}#conversationsPage #newConversationForm #selectedFriends .selectedFriendParticipant{position:relative;padding:.75rem;background-color:var(--nav-background-color);border-radius:var(--border-radius);width:fit-content}#conversationsPage #newConversationForm #selectedFriends .selectedFriendParticipant .removeFriendParticipantButton{position:absolute;top:.25rem;right:.25rem}#conversationsPage #newConversationForm .newMessageInputContainer{display:flex;flex-direction:column}#conversationsPage #newConversationForm input{padding:.5rem}#conversationsPage #newConversationForm label{font-size:.6rem;opacity:.8;padding:0;margin:0}#conversationsPage #newConversationForm #startConversationButton{background:var(--nav-background-color);padding:1rem}#iconContainer{position:absolute;top:0;display:none;flex-direction:column;justify-content:space-around;background-color:var(--main-color);padding:.2rem;gap:.6rem;border:1px solid var(--font-color);border-radius:var(--border-radius);width:fit-content}#iconContainer .messageIcon{padding:0;margin:0}#iconContainer .messageIcon svg{margin:0;padding:0}#iconContainer .messageIcon:hover{cursor:pointer;scale:1.05}#iconContainer .messageIcon:active{scale:1.2}#reactionContainer{position:absolute;display:none;z-index:-2;transition:z-index .1s ease-out 0s;background-color:var(--nav-background-color);border:1px solid var(--font-color);border-radius:var(--border-radius);padding:.25rem}#reactionContainer button{border-color:transparent;font-size:1rem;opacity:.75;background-color:transparent;transition:transform .2s ease,opacity .2s ease,border-color .2s ease}#reactionContainer button:hover{opacity:1;transform:translateY(-.5rem) scale(1.75)}#reactionContainer button:active{scale:1.2}.messageReactions{position:absolute;display:flex;font-size:.6rem;padding:0;margin:0;margin-left:.95rem;margin-bottom:.25rem;left:0;opacity:.85}#messageInputContainer{display:flex;place-content:center;margin:1rem;padding:1rem;background-color:var(--nav-background-color);border-radius:var(--border-radius)}#messageInputContainer #messageInputForm{width:100%;display:flex;flex-direction:row}#messageInputContainer #messageInputForm #messageInput{width:80%}#messageInputContainer #messageInputForm #imageInput{width:50px;opacity:.8;place-self:center}#messageInputContainer #messageInputForm #imageInput:hover{cursor:pointer;scale:1.04;opacity:1}#messageInputContainer #messageInputForm #imagePreview{width:200px;height:200px}.errorButton{color:var(--font-color);border-color:transparent;font-size:1rem}.errorButton:hover{cursor:pointer}.emojiPicker{position:absolute;z-index:5!important}.lds-spinner{color:currentColor;display:inline-block;position:relative;width:80px;height:80px}.lds-spinner div{transform-origin:40px 40px;animation:lds-spinner 1.2s linear infinite}.lds-spinner div:after{content:" ";display:block;position:absolute;top:3.2px;left:36.8px;width:6.4px;height:17.6px;border-radius:20%;background:currentColor}.lds-spinner div,.lds-spinner div:after{box-sizing:border-box}.lds-spinner div:nth-child(1){transform:rotate(0);animation-delay:-1.1s}.lds-spinner div:nth-child(2){transform:rotate(30deg);animation-delay:-1s}.lds-spinner div:nth-child(3){transform:rotate(60deg);animation-delay:-.9s}.lds-spinner div:nth-child(4){transform:rotate(90deg);animation-delay:-.8s}.lds-spinner div:nth-child(5){transform:rotate(120deg);animation-delay:-.7s}.lds-spinner div:nth-child(6){transform:rotate(150deg);animation-delay:-.6s}.lds-spinner div:nth-child(7){transform:rotate(180deg);animation-delay:-.5s}.lds-spinner div:nth-child(8){transform:rotate(210deg);animation-delay:-.4s}.lds-spinner div:nth-child(9){transform:rotate(240deg);animation-delay:-.3s}.lds-spinner div:nth-child(10){transform:rotate(270deg);animation-delay:-.2s}.lds-spinner div:nth-child(11){transform:rotate(300deg);animation-delay:-.1s}.lds-spinner div:nth-child(12){transform:rotate(330deg);animation-delay:0s}@keyframes lds-spinner{0%{opacity:1}to{opacity:0}}.messageFromOtherIcon{opacity:.6;margin-right:.25rem}.messageFromOtherIcon:hover{opacity:1}#requestsPage{height:fit-content;place-items:center;place-content:center;gap:1.5rem}#requestsPage .requestContainer{display:grid;grid-template-columns:1fr;background-color:var(--nav-background-color);border-radius:var(--border-radius);place-items:center;padding:.5rem;width:350px}#requestsPage .requestContainer .requestButtons{grid-column:span 1;display:flex;gap:1rem;background-color:var(--nav-background-color)}#requestsPage .requestContainer .requestButtons button{background-color:var(--font-color);color:var(--main-color);width:100%}#requestsPage .requestContainer .requestButtons button:hover{scale:1.02}#requestsPage .requestContainer .dateSent{opacity:.8}.deleteConversationIcon{opacity:.6;margin-right:.5rem;width:1.5rem}.deleteConversationIcon:hover{opacity:1}.friendContainer{display:flex;flex-direction:column;text-align:center;place-content:center;place-items:center;margin:0;padding:0;gap:1rem}.friendContainer .friend,.friendContainer .blocked{display:grid;list-style:none;place-content:center;place-items:center;width:100%;gap:1rem}.friendContainer .friend button,.friendContainer .blocked button{width:100%}.friendContainer .friend{grid-template-columns:2fr 1fr 1fr}.friendContainer .blocked{grid-template-columns:repeat(2,1fr)}.yourReaction{background-color:color-mix(in srgb,var(--font-color) 20%,transparent)!important;border-radius:var(--border-radius)!important}.selectedConversation,.selectedConversation:hover{background-color:var(--main-color)!important;color:color-mix(in hsl,var(--font-color) 92%,white)!important}.selectedConversation ul,.selectedConversation ul:hover,.selectedConversation:hover ul,.selectedConversation:hover ul:hover{background-color:color-mix(in hsl,var(--nav-background-color) 99%,white)!important}.positiveButton{background-color:var(--positive-color)!important;color:var(--nav-background-color)!important}.negativeButton{background-color:var(--negative-color)!important;color:var(--nav-background-color)!important}.cautionButton{background-color:var(--caution-color)!important;color:var(--nav-background-color)!important}.youButton{background-color:var(--you-color)!important;color:var(--nav-background-color)!important}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--font-color);-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:var(--main-color);-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--positive-color)}input:focus+.slider{box-shadow:0 0 2px var(--positive-color)}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}@media (max-width: 600px){#conversationsPage{display:grid;grid-template-columns:1fr;grid-template-rows:100px 8fr;height:fit-content;padding:0!important}#conversationLists{flex-direction:row!important;width:auto!important;gap:1rem!important;overflow-x:scroll;width:100%!important;height:100%!important;padding:0!important;margin:0!important;place-items:center}#conversationLists #newConversationForm{position:absolute;z-index:5!important;background-color:var(--nav-background-color);top:50%;left:50%;transform:translate(-50%,-50%)}#conversationLists #newConversationButton{margin-left:2rem}#conversationLists #newConversationForm .selectedFriendParticipant{background-color:var(--main-color)!important}#conversationLists #newConversationForm .removeFriendParticipantButton{position:relative!important;top:0!important;right:0!important}#conversationLists button{width:100%;height:50%!important;font-size:.85rem}#conversationLists button ul{height:100%}#currentConversation{height:100%;grid-template-rows:5fr 2fr!important;padding:0!important}#currentConversation #messageInputContainer{height:fit-content}#currentConversation #imagePreview{width:100px!important;height:100px!important}table{font-size:.85rem}table .lastSeen{display:none}table button{font-size:.85rem}}