*{box-sizing:border-box;padding:0}:root{color-scheme:dark;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#221d30;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-height:100vh;transition:background-color .5s ease-in-out}@keyframes whiten{to{color:#aaa}}#root{width:auto;margin-inline:auto}.LoginDialog{min-width:300px;min-height:min(320px,100vw);max-width:100vw;background:unset;color:var(--InitBG)}.LoginDialog :is(h2){display:block;text-align:left;animation:whiten .4s .5s forwards}.LoginDialog .LoginInput{position:relative;text-align:left;margin-top:2rem}.LoginDialog .LoginInput:focus-within,.LoginDialog .LoginInput:hover{--InitBG: #aaa}.LoginDialog .LoginInput>label{display:block;text-align:left;color:var(--InitBG);width:100%;padding-left:1rem;text-transform:uppercase;transition:all .4s}.LoginDialog .LoginInput>input{text-align:left;width:100%;border:2px solid var(--InitBG);min-width:0px;transition:all .4s}.LoginDialog input{background-color:unset;border:0;outline:none;font-size:1.2rem;height:2.5rem;padding-inline:.5rem;justify-content:end;border:#000 solid 1px;border-radius:4px;text-align:center;color:#bbb}.LoginDialog :is(button){cursor:pointer;width:100%;color:var(--InitBG);margin-top:3.6rem;height:2.5rem;font-size:1.2rem;background-color:unset;border:2px solid var(--InitBG);border-radius:3px;transition:all .4s}.LoginDialog :is(button):focus,.LoginDialog :is(button):focus-visible,.LoginDialog :is(button):hover{border-color:#aaa;color:#aaa;outline:none}.TaskContainer{display:flex;flex-direction:column}.TaskItemButtons{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-top:1rem;border-radius:4px;background-color:#222}.TaskItemButtons.active{background-color:#515736}.TaskItemButtons>button{padding:.5rem;width:100%;height:100%;border:none;background-color:unset;color:#aaa;cursor:pointer}.TaskItemButtons>button:hover{color:#fff;background-color:#333}.TaskItem{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-top:1rem;padding:.5rem;border-radius:4px;background-color:#222}.TaskItem>button{margin-left:.5rem;border:none;background-color:unset;color:#aaa;cursor:pointer}.TaskItem>button:hover{color:#fff}.TaskInput{display:flex;flex-direction:row;margin-top:1rem;border-radius:4px;border:#000 solid 1px;background-color:#2a2a2a}.TaskInput>*{border-radius:0}.TaskInput>input{flex:100%;color:#bbb;border:0;background-color:unset;text-align:left;min-width:0px!important;outline:none;font-size:1.2rem;height:2.5rem;padding-inline:.5rem;justify-content:end}.TaskInput>button{padding-inline:.5rem;background-color:#222;opacity:0;transition:opacity .2s;text-wrap:nowrap;margin-left:.5rem;border:none;color:#aaa;cursor:pointer}.TaskInput>button:hover{color:#fff}.PageViewer{display:grid;grid-template-columns:auto 1fr;grid-template-rows:100%;flex-direction:row;height:100vh;width:100vw;position:relative;max-width:100vw;top:0;left:0}.Page{flex:auto;container:Page;position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;margin:auto;overflow:auto;padding-bottom:calc(100lvh - 100svh + 1rem)}.SideBar{--funnyWidth: 0px;--stateWidth: 66px;position:absolute;left:0;display:flex;flex-direction:column;align-items:center;width:calc(var(--funnyWidth) + var(--stateWidth));top:2rem;height:calc(100% - 2rem);border-top-right-radius:10px;box-shadow:-2px 0 3px #252424 inset;background-color:#292929;background-image:linear-gradient(125deg,#252424,#363636);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:left .2s,width .2s,top .2s,height .2s}.SideBar>:first-child{margin-top:.5rem;width:100%;border-bottom:#0003 solid 1px}.SideBarTopButtons{z-index:2;position:absolute;height:auto;width:66px;text-align:left;display:flex;transition:transform .2s}.SideBarContainer{z-index:1;position:relative;height:100%;width:max-content;width:66px;transition:width .2s}.SideBarBlocker{position:absolute;width:0vw;height:100vh;-webkit-backdrop-filter:saturate(.2);backdrop-filter:saturate(.2);background-color:#0000;transition:backdrop-filter .2s,background-color .2s}@media screen and (min-width: 600px){:is(.SideBarContainer-Extended,.SideBarContainer-Open) .BarExpand{width:10rem}:is(.SideBarContainer-Extended,.SideBarContainer-Open) .SideBarTopButtons{transform:translate(-25%)}.SideBarContainer-Extended{width:300px}.SideBar-Extended{--stateWidth: 100%;top:0;height:100%}.SideBarTopButtons{transform:translate(-50%)}}@media screen and (max-width: 600px){.SideBarContainer-Closed{width:20px}.SideBarContainer-Closed .BarExpand{transform:translate(-100%,-200%)}.SideBar-Closed{left:-60px;--stateWidth: 66px}.SideBarContainer-Extended{width:66px}.SideBarContainer-Extended .SideBarBlocker{width:100vw;height:100vh;position:absolute;top:0;left:0;background-color:#80808011;-webkit-backdrop-filter:saturate(.2);backdrop-filter:saturate(.2)}.SideBar-Extended{top:0;height:100%;right:unset;width:300px;box-shadow:0 0 5px 1px #000}}.SideBarTopButtons button{cursor:pointer;margin:.25rem;height:1.5rem;width:1.5rem;border-radius:1rem;border:none;background-color:#a04646;transition:filter .2s,box-shadow .2s,transform .2s,width .2s}.SideBarTopButtons button.BarExpand{background-color:#2d812d}.SideBarTopButtons button:hover{box-shadow:0 0 2px 1px #fff2 inset,0 0 2px 2px #0002;transform:scale(1.1);filter:brightness(1.1)}.SideBarTopButtons button:active{box-shadow:0 0 2px 1px #0006 inset,0 0 1px 1px #fff2;box-sizing:0px 0px;transform:scale(.9);filter:brightness(.9)}.SvgButton{--size: 45px;cursor:pointer;width:var(--size);height:var(--size);display:flex;align-items:center;justify-content:center;margin-top:1rem;font-size:1.6rem;background-color:unset;background-color:inherit;border-radius:10px;border:1px solid white;transition:all .4s}.SvgButton>img{width:100%}.SvgButton:focus,.SvgButton:focus-visible,.SvgButton:hover{background-color:#252525;color:#aaa;outline:none}.SvgButton.active{background-color:#fff;color:#131313}.QuickFullScreen{position:absolute;width:100%;height:100%;z-index:1000;inset:0;display:inline;pointer-events:none}.QuickContainer{position:absolute;display:grid;grid-template-columns:1fr auto;grid-column-gap:.5rem;bottom:.4rem;right:.4rem}.QuickContainer>*{align-self:end}.QuickButtonStop{margin-left:auto;width:1.5rem;height:1.5rem;line-height:.75rem;font-size:2rem;transform:rotate(-20deg);margin-bottom:.75rem;background-color:#a04646;border-radius:100px;transition:transform .2s linear}.QuickButtonStop.inactive{transform:rotate(-20deg) scale(0) translate(-20 -20)}.QyickJobGroup{display:grid;grid-auto-rows:1fr;grid-row-gap:.2rem;min-width:10rem;max-width:30ch}.QyickJobGroup>*{align-self:stretch;border:solid 1px #000;background-color:#46a04a;border-radius:100px;padding:.2rem;padding-inline:1rem;text-wrap:nowrap;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.QuickButton{--size: 40px;cursor:pointer;width:var(--size);height:var(--size);background-color:#94a046;border-radius:100%;font-size:calc(var(--size) * .85);line-height:1em;transition:all .4s;position:relative}.QuickButton>img{width:100%}.Hline{width:100%;height:1px;background-color:#aaa;margin-top:.5rem;margin-bottom:.5rem}.ToWhoLikeItem{display:flex;flex-direction:column;align-items:center;justify-content:space-between;margin-top:.5rem;font-size:2em;padding:.5rem;border-radius:4px;background-color:#222}.ToWhoLikeItem>span{color:#aaa;font-size:2rem;flex-grow:1;text-align:left}.ToWhoLikeItem .EmojiButtons{display:flex;flex-direction:row;align-items:center;font-size:2rem;justify-content:space-between;margin-top:.5rem;width:100%}.ToWhoLikeItem .EmojiButtons>button{padding:.5rem;width:100%;font-size:1em;border:none;background-color:unset;color:#aaa;cursor:pointer}.ToWhoLikeItem .EmojiButtons>button:hover{color:#fff;background-color:#333}.EmojiDrawer{position:absolute;bottom:0;width:100%;max-height:100%;height:25%;display:flex;flex-direction:column;overflow:hidden;align-items:stretch;background-color:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:solid 1px rgba(255,255,255,.63);border-radius:15px 15px 0 0;border-bottom:0px}.EmojiDrawer>.EmojiDrawerHeader{flex:auto;width:100%;color:#000;display:flex;line-height:1em;font-size:15px;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem;background-color:#d4d4d4;border-bottom:solid 1px rgba(255,255,255,.63)}.EmojiDrawer>.EmojiDrawerBody{flex:1fr;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;background-color:#242424}.EmojiDrawerTabs{display:none;flex-direction:row;align-items:center;justify-content:space-between;width:100%;padding:.5rem;background-color:#242424;border-bottom:solid 1px rgba(255,255,255,.63)}.EmojiDrawerTabs>button{cursor:pointer;width:100%;height:4rem;background-color:unset;color:#000;border:none;font-size:4rem;text-align:center;transition:all .2s}.EmojiDrawerTabs>button:hover{color:#333;background-color:#eee}.EmojiDrawerTabs>button.active{color:#fff;background-color:#333}.EmojiButtons{flex:1fr;flex-direction:row;align-items:center;height:100%;justify-content:space-between;flex-wrap:wrap;width:100%;padding:.5rem;overflow:auto}.EmojiButtons>button{cursor:pointer;width:3rem;height:3rem;background-color:unset;color:#aaa;border:none;line-height:100%;font-size:2.2rem;text-align:center}.EmojiButtons>button:hover{color:#fff;background-color:#333}.FolderPage,.FolderMain{display:flex;background-color:#000}:is(.FolderPage,.FolderMain) .Header{flex:0 0 auto;text-align:center;width:100%;padding:1rem;font-size:1.5rem;font-weight:600;border-bottom:solid 1px #000}:is(.FolderPage,.FolderMain) .TopNav{display:flex;flex-direction:row;align-items:center;width:100%;color:#fff;gap:.5rem;padding:.5rem 1rem;background-color:#000}:is(.FolderPage,.FolderMain) .TopNav>button{display:flex;cursor:pointer;background-color:unset;border:none;font-size:1.2rem;padding:.2rem}:is(.FolderPage,.FolderMain) .TopNav>button:hover{color:#fff;background-color:#222}:is(.FolderPage,.FolderMain) .FolderList{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));flex-wrap:wrap;width:100%;gap:5px;padding-inline:2rem}:is(.FolderPage,.FolderMain) .FolderList .FolderItem{flex:auto;min-width:100px;max-width:250px;display:block}:is(.FolderPage,.FolderMain) .FolderList .FolderItem .Icon{width:100%;aspect-ratio:1 / 1;object-fit:cover;border-radius:10px;background-color:#222;overflow:hidden}:is(.FolderPage,.FolderMain) .FolderList .FolderItem .Icon>img{width:100%;height:100%;object-fit:cover;border-radius:10px}:is(.FolderPage,.FolderMain) .FolderList .FolderItem .Name{font-size:.6rem}.Popup{position:fixed;inset:0;width:100vw;height:100vh;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.Popup .Content{background-color:#222a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:10px;min-width:300px;min-height:200px;max-width:90vw;max-height:90vh;display:flex;flex-direction:column}.Popup .Content .Header{position:relative;font-size:1.2rem;font-weight:600;line-height:1rem}.Popup .Content .Header :is(button){cursor:pointer;background-color:unset;border:none;font-size:1.2rem;float:right;position:absolute;right:1rem;top:1rem}.Popup .Content .Header :is(button):hover{color:#fff;background-color:#222}.Popup .Content .Body{flex:1fr;overflow:auto;padding:.4rem}.Popup .Content .Body>label{display:block;text-align:left;color:var(--InitBG);width:100%;padding-left:1rem;text-transform:uppercase;transition:all .4s}.Popup .Content .Body>input{text-align:left;width:100%;border:2px solid var(--InitBG);min-width:0px;transition:all .4s}.Popup .Content .Footer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.Popup .Content .Footer>button{cursor:pointer;height:2.5rem;font-size:1rem;background-color:unset;border:2px solid var(--InitBG);border-radius:3px;padding-inline:1rem;transition:all .4s}.Popup .Content .Footer>button:focus,.Popup .Content .Footer>button:focus-visible,.Popup .Content .Footer>button:hover{border-color:#aaa;color:#aaa;outline:none}.FileUploadForm,.CreateFolderForm{display:flex;flex-direction:column;gap:.5rem;padding:1rem;color:#fff}:is(.FileUploadForm,.CreateFolderForm)>input{background-color:#222a;border:solid 1px #000;border-radius:5px;color:#fff;padding:.5rem;outline:none}:is(.FileUploadForm,.CreateFolderForm) .Buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}:is(.FileUploadForm,.CreateFolderForm) .Buttons>button{cursor:pointer;height:2.5rem;font-size:1rem;background-color:unset;border:2px solid var(--InitBG);border-radius:3px;padding-inline:1rem;transition:all .4s}:is(.FileUploadForm,.CreateFolderForm) .Buttons>button:focus,:is(.FileUploadForm,.CreateFolderForm) .Buttons>button:focus-visible,:is(.FileUploadForm,.CreateFolderForm) .Buttons>button:hover{border-color:#aaa;color:#aaa;outline:none}.MessageContainer{position:absolute;top:1rem;width:100%;left:0;display:flex;flex-direction:column;z-index:1000}@keyframes popIn{to{scale:1;opacity:1}}@keyframes popOut{to{scale:0;opacity:0;margin-top:0;height:0px;padding:0}}.message{animation:popIn .5s forwards;color:#eee;opacity:0;scale:0;padding:.5rem;border-radius:.5rem;font-size:.9rem;width:fit-content;margin:auto;margin-top:.5rem}.message>button{margin-left:.5rem;background-color:transparent;border:none;padding:2px;color:#eee;cursor:pointer}.message>button:hover{color:#ccc}.info-message{background:#6e6c44}.error-message{background:#532e2e}.warning-message{background:#804c22}.closing-message{opacity:1;scale:1;height:0px;animation:popOut .5s forwards}
