#list{background-color:var(--depth-1);height:100%;padding:0 4px;padding-top:8px}#list>header{height:48px;padding:0 4px}#list>header button{width:100%;height:100%;color:#fff;background-color:var(--blue);border:0;outline:0;cursor:pointer;font-weight:700;text-transform:uppercase;border-radius:12px;box-shadow:0 3px 8px rgba(0,0,0,.24)}#list>header button:hover{transition:.2s;background-color:var(--blue-light)}#list>header button:active{transition:0s;background-color:var(--blue-dark)}#list>header button span{font-size:16px}#list hr{margin-top:16px;border:1px solid #41414b}#list>main{height:calc(100% - 66px);overflow-y:auto;padding:0 4px;padding-top:16px}#list>main .group{cursor:pointer;background-color:var(--groups);margin-bottom:16px;padding:0 16px;height:48px;display:flex;flex-direction:row;align-items:center;border-radius:12px;box-shadow:0 10px 36px 0 rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.06)}#list>main .group:hover{background-color:var(--groups-hovered)}#list>main .group.selected{background-color:var(--blue)}#list>main .group.selected div:last-child h1{opacity:1}#list>main .group div:first-child{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;widows:44px}#list>main .group div:first-child input{display:none;pointer-events:none}#list>main .group div:first-child input~label{display:block;width:28px;height:28px;border:3px solid #646464;border-radius:25%;display:flex;justify-content:center;align-items:center;font-size:20px;color:transparent;transition:.5s;margin-right:16px;pointer-events:none}#list>main .group div:first-child input:checked~label{color:var(--blue-dark);background-color:#f0f0f0;border:4px solid #f0f0f0}#list>main .group div:last-child{display:flex;justify-content:space-between;align-items:center;width:calc(100% - 44px)}#list>main .group div:last-child .handle{cursor:move;background:transparent;color:#78788c;outline:0;border:0;font-size:24px}#list>main .group div:last-child h1{font-size:16px;opacity:.8}#todo .todo{display:flex;flex-direction:column;background-color:rgba(230,230,250,.075);margin-bottom:16px;border-radius:8px;padding:8px 16px}#todo .todo.dragging{background-color:rgba(230,230,250,.2)}#todo .todo>div:first-of-type{display:flex;align-items:center}#todo .todo>div:first-of-type h1{font-size:18px}#todo .todo>div:first-of-type>div:first-of-type{width:40px}#todo .todo>div:first-of-type>div:first-of-type input{display:none}#todo .todo>div:first-of-type>div:last-of-type{width:calc(100% - 40px);display:flex;justify-content:space-between;align-items:center}#todo .todo>div:first-of-type>div:last-of-type .handle{cursor:move;background:transparent;color:#78788c;outline:0;border:0;font-size:24px}#todo .todo>div:first-of-type>div:last-of-type input{height:36px;display:block;background:#50505a;border:2px solid #78788c;width:768px;padding:0 8px;border-radius:8px;font-size:18px;font-weight:700;outline:0}#todo .todo>div:last-of-type:not(div:first-of-type){margin-top:10px}#todo .todo>div:last-of-type:not(div:first-of-type) button{background:transparent;outline:0;border:0;padding:4px 16px;cursor:pointer;font-weight:700}#todo .todo>div:last-of-type:not(div:first-of-type) button:hover{color:var(--blue)}#todo .todo>div:last-of-type:not(div:first-of-type) button p,#todo .todo>div:last-of-type:not(div:first-of-type) button span{color:inherit}#todo .todo>div:last-of-type:not(div:first-of-type) button span{font-size:18px}#todo .todo>div:last-of-type:not(div:first-of-type) button p{opacity:.8}#todo .todo>div:last-of-type:not(div:first-of-type) button:not(button:last-of-type){border-right:2px solid #64646e}#todo .todo input~label{width:28px;height:28px;border:3px solid #646464;border-radius:25%;display:flex;justify-content:center;align-items:center;font-size:20px;color:transparent;transition:.3s;margin-right:16px;cursor:pointer}#todo .todo input:checked~label{color:#fff;background-color:var(--blue);border:4px solid var(--blue)}#todo #add-todo{background:none;border:0;outline:0;width:100%;cursor:pointer;text-align:left;font-size:16px;border-radius:8px;padding:4px 16px;color:#fff;font-weight:700;text-transform:uppercase;border:2px dashed #646478;transition:.3s}#todo #add-todo:hover{border:2px dashed #9696aa;color:var(--blue-light)}#todo #add-todo span{color:inherit;font-size:24px;vertical-align:-2px;padding-right:16px}#note{background-color:rgba(0,0,0,.5);z-index:1000;height:100%;width:100%;position:absolute;top:0;left:0;justify-content:center}#note,#note>div{display:flex;align-items:center}#note>div{height:70%;width:90%;max-width:1024px;background-color:var(--depth-4);border-radius:24px;padding:16px;position:relative;flex-direction:column;justify-content:space-between}#note>div input,#note>div textarea{width:100%;background-color:var(--depth-3);outline:0;border:2px solid var(--depth-2);border-radius:16px;padding:4px 8px}#note>div input:focus,#note>div textarea:focus{border:2px solid #a0a0b4}#note>div input{font-size:28px;font-weight:600}#note>div textarea{margin-top:16px;font-size:18px;resize:none;height:70%;font-weight:500;padding-top:8px}#note>div button{background:#50505a;border:0;outline:0;font-weight:700;font-size:28px;padding:4px 16px;border-radius:16px;margin-top:8px;cursor:pointer}#note>div button:hover{background:var(--blue)}#note>div button:active{background:var(--blue-dark)}#notes li{background-color:rgba(230,230,250,.15);width:120px;height:180px;border-radius:16px;cursor:pointer;vertical-align:middle;transition:.3s;padding:0 8px;display:inline-block}#notes li button{background:var(--blue);outline:0;border:0;padding:4px 8px;margin-top:8px;font-size:20px;border-radius:8px;cursor:pointer;box-shadow:1.95px 1.95px 2.6px rgba(0,0,0,.15)}#notes li button:hover{background:var(--blue-light)}#notes li button:active{background:var(--blue-dark)}#notes li#addNote{background:transparent;border:4px dashed #646478;transition:.3s}#notes li#addNote h1{font-size:32px}#notes li#addNote h1,#notes li#addNote h2{transition:.5s}#notes li#addNote:hover{border:4px dashed #9696aa}#notes li#addNote:hover h1,#notes li#addNote:hover h2{color:var(--blue)}#notes li:not(#addNote):hover{transform:scale(1.05);background-color:rgba(230,230,250,.2)}#notes li>div{width:100%;height:100%;text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:center}#notes li:not(li:last-of-type){margin-right:16px}#notes li h1,#notes li h2{font-size:20px}#display{background:var(--depth-2);height:100%;padding:8px 24px}#display header{display:flex;align-items:center;justify-content:space-between;height:64px}#display header h1{font-size:40px}#display header input{height:56px;display:block;background:var(--depth-4);border:3px solid #505064;width:100%;max-width:512px;padding:0 8px;border-radius:16px;font-size:36px;font-weight:700;outline:0}#display header input:focus{border:3px solid #8c8ca0}#display header input:invalid{border:3px solid #8c5064!important}#display header button{background-color:var(--blue);border:0;outline:0;font-weight:700;font-size:15px;padding:8px 8px;border-radius:8px;cursor:pointer;box-shadow:0 8px 24px rgba(17,17,26,.1),0 16px 56px rgba(17,17,26,.1),0 24px 80px rgba(17,17,26,.1)}#display header button:not(button:last-of-type){margin-right:16px}#display header button:hover{transition:.2s;background-color:var(--blue-light)}#display header button:active{transition:0s;background-color:var(--blue-dark)}#display nav{margin-top:16px;border-bottom:2px solid rgba(180,180,200,.3);height:48px}#display nav button{background:transparent;opacity:.82;border:0;outline:0;cursor:pointer;margin-right:16px;font-size:20px;padding:8px 4px;font-weight:600;position:relative;top:1px;transition:border .2s}#display nav button.displaying{opacity:.97;font-weight:700;border-bottom:4px solid var(--blue-light)}#display main{padding-top:16px;height:calc(100% - 128px);overflow-y:auto}#display main ul{list-style-type:none;padding:0 8px}@media screen and (max-width:1048px){#display header{flex-direction:column;align-items:unset;margin-bottom:32px}#display header button{margin-top:8px}#display header input{font-size:28px}#display header h1{font-size:32px}}@media screen and (max-width:868px){#display header input{font-size:24px}#display header h1{font-size:28px}}#noDisplay button{width:100%;height:100%;cursor:pointer;background:rgba(230,230,250,.07);transition:background .4s;outline:0;border:2px dashed #5a5a64}#noDisplay button:hover{background:rgba(230,230,250,.1)}#noDisplay button:hover h1,#noDisplay button:hover h2{opacity:.6}#noDisplay button h1{font-size:80px}#noDisplay button h2{font-size:32px}#noDisplay button h1,#noDisplay button h2{opacity:.4;transition:opacity .4s}#view{width:100%;height:72px;background:var(--depth-3);display:flex;align-items:center}#view button{background:transparent;outline:0;border:0;cursor:pointer;width:calc(50% - 2px);height:100%}#view button h1{font-size:32px}#view button h2{font-size:16px}#view button.viewing *{color:var(--blue)}#view .line{height:80%;background:#505064;width:4px;display:block;border-radius:16px}:root{--groups:#282832;--groups-hovered:#2d2d37;--blue-light:#00beff;--blue:#00a0ff;--blue-dark:#0082ff;--depth-1:#1e1e28;--depth-2:#282832;--depth-3:#32323c;--depth-4:#3c3c46}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#4b4b55;border-radius:32px;-webkit-transition:.3s;transition:.3s}::-webkit-scrollbar-thumb:hover{background:#55555f}*{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:0;box-sizing:border-box;color:#fff}#app,body,html{height:100%;background-color:var(--depth-1)}#app>header{background-color:var(--depth-3);padding:0 4%;display:flex;justify-content:space-between;align-items:center;height:72px}#app>header h1{font-size:36px}#app>header h4{font-style:italic}#app>header h4 a{color:var(--blue);text-decoration:none;transition:.2s}#app>header h4 a:hover{color:var(--blue-light);text-decoration:underline}#app>main{height:calc(100% - 72px);display:flex;flex-direction:row}#app>main #list{width:400px;border-right:1px solid #41414b}#app>main #display,#app>main #noDisplay{width:calc(100% - 400px);border-left:1px solid #41414b}path,svg{color:inherit}@media screen and (max-width:1048px){#app>main #list{width:350px}#app>main #display,#app>main #noDisplay{width:calc(100% - 350px)}}@media screen and (min-width:768px){#display,#list,#noDisplay{width:100%;border:0;display:block!important}}@media screen and (max-width:768px){#app>main{height:calc(100% - 144px)}#app>main #display,#app>main #list,#app>main #noDisplay{width:100%;border:0}#app>main #display,#app>main #noDisplay{display:none}}