@charset "UTF-8";html,body{height:100%}*,*:after,*:before{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--primary-font);line-height:var(--text-line-height);background-color:var(--bg-app)}.header{width:100%;display:flex;align-items:center;background-color:var(--bg-surface);grid-column:span 2;z-index:2}.header .logo__container{width:18rem;height:100%;display:flex;align-items:center;border-right:1.5px solid var(--bg-surface-alt);padding:0 2rem;border-bottom:1.5px solid var(--bg-surface-alt)}@media(max-width:768px){.header .logo__container{width:fit-content}}.header .content__container{display:flex;padding:0 2rem;height:100%;width:85%;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1.5px solid var(--bg-surface-alt)}.header .content__container .content__heading{color:var(--text-heading);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-xl);line-height:var(--primary-lheight-xl);font-family:var(--primary-font)}.header .options__container{position:relative}.header .options__container .options__btn{cursor:pointer;background-color:transparent;border:none;padding:.5rem}.content__add-btn{color:var(--primary-white);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-m);line-height:var(--primary-lheight-m);padding:.8rem 1.5rem;border-radius:50rem;border:none;font-family:var(--primary-font);color:var(--action-text);background-color:var(--action-primary);cursor:pointer;min-height:2.5rem;transition:.3s ease}.content__add-btn:hover{background-color:var(--action-primary-hover)}.content__add-btn{margin-left:auto}@media(max-width:768px){.content__add-btn{padding:.3rem 1.5rem}}.content__add-btn .icon{display:none}@media(max-width:768px){.content__add-btn .text{display:none}.content__add-btn .icon{display:block}}.options{position:absolute;top:50px;right:0;background-color:var(--bg-surface);width:192px;padding:1.5rem;border-radius:8px;box-shadow:1px 8px 8px 3px #303f5f18;z-index:4}.options .options__list{list-style:none;display:flex;align-items:start;flex-direction:column;gap:1rem}.options .options__list .option__item{width:100%}.options .options__list .option__item .option__btn{background-color:transparent;border:none;color:var(--text-secondary);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-body-l);line-height:var(--primary-lheight-body-l);font-family:var(--primary-font);font-weight:var(--primary-weight-medium);width:100%;text-align:left;cursor:pointer;padding:.2rem;transition:.3s ease}.options .options__list .option__item .option__btn:hover{transform:scale(1.05);color:var(--action-primary-hover)}.options .options__list .option__item .delete__btn{color:var(--action-danger)}.options .options__list .option__item .delete__btn:hover{color:var(--action-danger-hover)}.list{list-style:none;width:100%;display:flex;flex-direction:column;gap:.5rem;transition:.3s ease}.list-hide{transform:translate(-20rem)}.list__item{padding:1rem 2rem;display:flex;gap:1rem;align-items:center;cursor:pointer;color:var(--text-secondary);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-m);line-height:var(--primary-lheight-m);font-family:var(--primary-font);width:95%;position:relative;transition:.3s ease}.list__item:hover{letter-spacing:.07rem;color:var(--action-nav-hover)}.list__item:after{content:"";background-color:var(--action-primary);border-top-right-radius:10rem;border-bottom-right-radius:10rem;position:absolute;left:0;top:0;height:100%;width:0;transition:.4s ease;z-index:-1}.list .active{color:var(--bg-surface);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-m);line-height:var(--primary-lheight-m);font-family:var(--primary-font);z-index:1;color:var(--action-text)}.list .active:hover{letter-spacing:0rem}.list .active:after{width:100%}.list .list__create{color:var(--action-primary);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-m);line-height:var(--primary-lheight-m);font-family:var(--primary-font)}.list .list__create:hover{letter-spacing:.07rem;color:var(--action-nav-hover)}.themeToggler{margin-top:auto;padding:0rem 2rem}.themeToggler__container{background-color:var(--bg-app);height:2.5rem;border-radius:6px;width:100%;display:flex;justify-content:space-evenly;align-items:center;border:none}.toggle-placeholder{width:50px;height:22px;border-radius:9999px;background-color:var(--action-primary);position:relative;cursor:pointer;transition:.3s ease}.toggle-placeholder:hover{background-color:var(--action-primary-hover)}.toggle-placeholder:after{width:16px;height:16px;content:"";background-color:#fff;border-radius:50%;position:absolute;top:3px;left:3px;transition:.3s}.toggle-placeholder.toggle-dark:after{transform:translate(28px)}.mobileDrop__wrapper .mobileNav__btn{background-color:transparent;border:none;height:2rem;width:2rem}.test{background-color:var(--bg-overlay);position:absolute;height:calc(100vh - 6.0625rem);width:100vw;top:6rem;left:0;padding:1rem 5rem}.test .nav__container{display:flex;flex-direction:column;gap:1rem;min-width:264px;padding:2rem 0rem;border-radius:8px;background-color:var(--bg-surface)}.navbar{display:flex;gap:2rem;flex-direction:column;padding:2rem 0;border-right:1.5px solid var(--border-default);background-color:var(--bg-surface);grid-column:span 1;height:calc(100vh - 6.0625rem);transition:.8s ease}.navbar__hidden{opacity:.5;transform:translate(-20rem);transition:.8s ease}.navbar__heading{color:var(--text-secondary);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-s);line-height:var(--primary-lheight-s);font-family:var(--primary-font);padding:0 2rem}@media(max-width:768px){.navbar{display:none}}.nav__toggle{padding:0rem 2rem}.nav__toggle-container{display:flex;gap:1rem;align-items:center;cursor:pointer;width:fit-content}.nav__toggle-text{color:var(--text-secondary);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-m);line-height:var(--primary-lheight-m);font-family:var(--primary-font)}.nav__toggle-text:hover{color:var(--action-primary)}.nav-toggle-show{background-color:var(--action-primary);border:none;padding:1.2rem;position:absolute;border-top-right-radius:20rem;border-bottom-right-radius:20rem;bottom:3%;transition:.4s ease-out;cursor:pointer;width:4rem}.nav-toggle-show:hover{width:6rem}.nav-toggle-show-hide{transform:translate(-100%)}.app-layout{display:grid;grid-template-columns:18rem 1fr;grid-template-rows:6.0625rem 1fr;height:100vh;transition:.5s ease}.app-layout-hidden{grid-template-columns:0 1fr}@media(max-width:768px){.app-layout{grid-template-columns:1fr}}.content{width:100%;height:100%;overflow-x:auto;overflow-y:hidden}.overlay{position:absolute;height:100%;width:100%;background-color:var(--bg-overlay);display:flex;justify-content:center;align-items:center;z-index:2}.overlay__wrapper{background-color:var(--bg-surface);border-radius:6px;position:relative;padding:3em 2rem}.overlay__wrapper .close-btn{position:absolute;top:0rem;right:0rem;border:none;cursor:pointer;border-top-right-radius:5px;border-bottom-left-radius:6px;width:2.5rem;height:2.5rem;background-color:var(--action-primary);box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px}.overlay__wrapper .close-btn svg{color:#fff}.overlay__wrapper .close-btn{transition:.3s ease-out}.overlay__wrapper .close-btn:hover{background-color:var(--action-primary-hover);width:2.8rem;height:2.8rem}.overlay .overlay__description{color:var(--text-muted);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-body-l);line-height:var(--primary-lheight-body-l);font-family:var(--primary-font);font-weight:var(--primary-weight-medium)}.overlay .overlay__header{display:flex;justify-content:space-between;gap:1rem;color:var(--text-primary);align-items:center}.overlay .overlay__header .options__btn{background:transparent;border:none;background-color:none;cursor:pointer;padding:.5rem}.overlay__container{height:fit-content;width:450px;display:flex;flex-direction:column;gap:1rem}@media(max-width:768px){.overlay__container{width:343px}}.overlay__container .overlay__input{height:2.5rem}.overlay__container .overlay__textarea{min-height:8rem}.overlay__container .overlay__label{color:var(--text-muted);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-body-m);line-height:var(--primary-lheight-body-m);font-family:var(--primary-font)}.overlay__container .overlay__subtask-count{color:var(--text-dim);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-body-m);line-height:var(--primary-lheight-body-m);font-family:var(--primary-font)}.overlay__container textarea{min-height:3rem}.overlay__container input,.overlay__container textarea{font-family:var(--primary-font);padding:1rem;resize:none;border-radius:6px;border:1px solid var(--grey-slate-dim);font-weight:var(--primary-weight-medium)}.overlay__container input::placeholder,.overlay__container textarea::placeholder{color:var(--grey-slate-dim);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-body-l);line-height:var(--primary-lheight-body-l);font-family:var(--primary-font);font-weight:var(--primary-weight-medium)}.overlay__container input,.overlay__container textarea{background-color:transparent;color:var(--text-primary)}.overlay__container .subTasks{display:flex;flex-direction:column;gap:1rem;width:100%}.overlay__container .subTasks .subTask{display:flex;height:2.5rem;width:100%}.overlay__container .subTasks .subTask .subTask__input{width:90%}.overlay__container .subTasks .subTask .subTask__button{width:10%;background:transparent;border:none;cursor:pointer}.overlay__container .subTasks .subTask .subTask__button svg{color:var(--text-secondary)}.overlay__container .overlay__button{color:var(--primary-white);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-m);line-height:var(--primary-lheight-m);padding:.8rem 1.5rem;border-radius:50rem;border:none;font-family:var(--primary-font);color:var(--bg-surface);background-color:var(--action-primary);cursor:pointer;min-height:2.5rem;transition:.3s ease}.overlay__container .overlay__button:hover{background-color:var(--action-primary-hover)}.overlay__container .overlay__button-column{color:var(--primary-white);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-m);line-height:var(--primary-lheight-m);padding:.8rem 1.5rem;border-radius:50rem;border:none;font-family:var(--primary-font);color:var(--action-primary);background-color:var(--action-secondarybtn);cursor:pointer;min-height:2.5rem;transition:.3s ease}.overlay__container .overlay__button-column:hover{background-color:var(--action-primary-hover)}.overlay__container .overlay__delete-header{color:var(--action-danger);font-size:var(--primary-size-l);line-height:var(--primary-lheight-l);font-family:var(--primary-font);font-weight:var(--primary-weight-bold)}.overlay__container .overlay__delete-text{color:var(--text-muted);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-body-l);font-family:var(--primary-font);font-weight:var(--primary-weight-medium);margin:.4rem 0;line-height:var(--primary-lheight-body-l)}.overlay__container .overlay__delete-btns{display:flex;gap:1rem}.overlay__container .overlay__delete-btns .overlay__button-delete{color:var(--primary-white);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-m);line-height:var(--primary-lheight-m);padding:.8rem 1.5rem;border-radius:50rem;border:none;font-family:var(--primary-font);color:var(--action-text);background-color:var(--action-danger);cursor:pointer;min-height:2.5rem;transition:.3s ease}.overlay__container .overlay__delete-btns .overlay__button-delete:hover{background-color:var(--action-danger-hover)}.overlay__container .overlay__delete-btns .overlay__button-delete{width:50%}.overlay__container .overlay__delete-btns .overlay__button-cancel{color:var(--primary-white);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-m);line-height:var(--primary-lheight-m);padding:.8rem 1.5rem;border-radius:50rem;border:none;font-family:var(--primary-font);color:var(--action-primary);background-color:var(--action-secondarybtn);cursor:pointer;min-height:2.5rem;transition:.3s ease}.overlay__container .overlay__delete-btns .overlay__button-cancel:hover{background-color:var(--action-primary-hover)}.overlay__container .overlay__delete-btns .overlay__button-cancel{width:50%}.overlay__container .checkbox__wrapper{display:flex;flex-direction:column;gap:1rem}.overlay__container .checkbox__container{display:flex;padding:1rem;gap:1rem;background-color:var(--bg-app);border-radius:4px;cursor:pointer;align-items:center}.overlay__container .checkbox__container:hover{background-color:var(--action-primary-muted)}.overlay__container .checkbox__container input[type=checkbox]{accent-color:var(--action-primary);min-width:20px;min-height:20px;cursor:pointer}.overlay__container .checkbox__container .checkbox__label{cursor:pointer;color:var(--text-dim);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-body-m);line-height:var(--primary-lheight-body-m);font-family:var(--primary-font)}.overlay__container .checkbox__container .checkbox__label.checked{color:var(--text-muted);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-body-m);line-height:var(--primary-lheight-body-m);font-family:var(--primary-font);text-decoration:line-through}.dropdown{width:100%;position:relative}.dropdown .dropbtn{font-family:var(--primary-font);padding:1rem;resize:none;border-radius:6px;border:1px solid var(--grey-slate-dim);font-weight:var(--primary-weight-medium)}.dropdown .dropbtn::placeholder{color:var(--grey-slate-dim);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-body-l);line-height:var(--primary-lheight-body-l);font-family:var(--primary-font);font-weight:var(--primary-weight-medium)}.dropdown .dropbtn{background-color:transparent;color:var(--text-primary);width:100%;text-align:left;font-family:var(--primary-font);display:flex;justify-content:space-between;align-items:center;cursor:pointer}.dropdown .dropdown-content{position:absolute;width:100%;display:flex;flex-direction:column;gap:1rem;text-align:start;background-color:var(--bg-surface);padding:1rem 0;border-radius:8px;margin-top:1rem;overflow-y:auto;overflow-x:hidden;max-height:20vh;box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px}.dropdown .dropdown-content .drop__option{padding:.8rem;text-align:left;background-color:transparent;color:var(--text-secondary);font-family:var(--primary-font);cursor:pointer;border:none;transition:.3s ease}.dropdown .dropdown-content .drop__option:hover{transform:scale(1.01);color:var(--action-primary-hover)}.overlay__options{top:15%}.column__container{display:grid;grid-auto-flow:column;grid-auto-columns:20rem;overflow-x:auto;overflow-y:hidden;height:calc(100vh - 6.0625rem);padding:1.5rem 1rem;gap:1rem}.column__container .column__add-btn{width:17.5rem;background-color:var(--action-secondary);border:none;color:var(--text-secondary);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-xl);line-height:var(--primary-lheight-xl);font-family:var(--primary-font);border-radius:8px;cursor:pointer;transition:.3s ease}.column__container .column__add-btn:hover{letter-spacing:.3rem;transform:scale(1.03);color:var(--text-primary);background-color:var(--text-muted)}.empty{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1rem;height:100%}.empty__text{color:var(--text-secondary);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-l);line-height:var(--primary-lheight-l);font-family:var(--primary-font)}@media(max-width:768px){.empty__text{width:70%;text-align:center}}.empty__btn{color:var(--primary-white);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-m);line-height:var(--primary-lheight-m);padding:.8rem 1.5rem;border-radius:50rem;border:none;font-family:var(--primary-font);color:var(--action-text);background-color:var(--action-primary);cursor:pointer;min-height:2.5rem;transition:.3s ease}.empty__btn:hover{background-color:var(--action-primary-hover)}:root{--primary-blue: #635fc7;--primary-blue-dim: #625fc71c;--button-blue: #edf2fb;--primary-purple: #a8a4ff;--primary-black: #000112;--primary-black-dim: #0808088c;--primary-black-50: #08080842;--grey-ink: #2b2c37;--grey-charcoal: #20212c;--grey-steel: #3e3f4e;--grey-slate: #828fa3;--grey-slate-dim: #828fa37a;--grey-mist: #e4ebfa;--grey-cloud: #f4f7fd;--primary-white: #ffffff;--primary-red: #ea5555;--primary-salmon: #ff9898;--primary-font: "Plus Jakarta Sans", sans-serif;--primary-size-xl: 1.5rem;--primary-size-l: 1.125rem;--primary-size-m: .9375rem;--primary-size-s: .75rem;--primary-size-body-l: .8125rem;--primary-size-body-m: .75rem;--primary-lheight-xl: 1.25;--primary-lheight-l: 1.28;--primary-lheight-m: 1.25;--primary-lheight-s: 1.2;--primary-lheight-body-l: 1.4;--primary-lheight-body-m: 1.25;--primary-letterspacing: 2.4px;--primary-weight-bold: 700;--primary-weight-medium: 500}[data-theme=light]{--bg-app: var(--grey-cloud);--bg-surface: var(--primary-white);--bg-surface-alt: var(--grey-mist);--bg-overlay: var(--primary-black-50);--text-primary: var(--grey-ink);--text-secondary: var(--grey-slate);--text-muted: var(--grey-slate-dim);--text-inverse: var(--primary-white);--text-heading: var(--primary-black);--text-dim: var(--grey-slate-dim);--border-default: var(--grey-mist);--border-muted: var(--grey-slate-dim);--action-primary: var(--primary-blue);--action-primary-hover: var(--primary-purple);--action-primary-muted: var(--primary-blue-dim);--action-secondary: var(--button-blue);--action-text: var(--primary-white);--action-nav-hover: var(--primary-purple);--action-secondarybtn: var(--button-blue);--action-danger: var(--primary-red);--action-danger-hover: var(--primary-salmon);--focus-ring: var(--primary-blue)}[data-theme=dark]{--bg-app: var(--grey-charcoal);--bg-surface: var(--grey-ink);--bg-surface-alt: var(--grey-steel);--bg-overlay: var(--primary-black-dim);--text-primary: var(--primary-white);--text-secondary: var(--grey-slate);--text-muted: var(--grey-slate-dim);--text-dim: var(--primary-white);--text-inverse: var(--primary-black);--text-heading: var(--primary-white);--border-default: var(--grey-steel);--border-muted: var(--primary-black-50);--action-primary: var(--primary-blue);--action-primary-hover: var(--primary-purple);--action-primary-muted: var(--primary-blue-dim);--action-secondary: var(--grey-ink);--action-text: var(--primary-white);--action-nav-hover: var(--primary-white);--action-secondarybtn: var(--primary-white);--action-danger: var(--primary-red);--action-danger-hover: var(--primary-salmon);--focus-ring: var(--primary-purple)}.column{display:flex;flex-direction:column;height:85vh}.column__heading{color:var(--text-secondary);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-m);line-height:var(--primary-lheight-m);font-family:var(--primary-font);display:flex;align-items:center;gap:1rem}.column__heading-color{width:12px;height:12px;background-color:#49c4e5;content:"";margin-left:2rem;border-radius:50%}.column ul{overflow-y:auto;list-style:none;margin:0;display:flex;flex-direction:column;gap:1.5rem;margin-top:1rem;height:100%;align-items:center;padding:1rem 0}.column ul::-webkit-scrollbar{width:8px;background:transparent}.column ul::-webkit-scrollbar-track{background:transparent}.column ul::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:10px}.column ul::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.column ul li{cursor:pointer;background-color:var(--bg-surface);padding:1.5rem;border-radius:8px;color:var(--text-heading);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-m);line-height:var(--primary-lheight-m);font-family:var(--primary-font);box-shadow:1px 8px 8px #303f5f18;width:17.5rem;display:flex;flex-direction:column;gap:.5rem;transition:.3s ease;min-height:fit-content}.column ul li .subtasks{color:var(--text-secondary);font-weight:var(--primary-weight-bold);font-size:var(--primary-size-body-m);line-height:var(--primary-lheight-body-m);font-family:var(--primary-font)}.column ul li:hover{box-shadow:1px 8px 8px #5f6a8169}