ul.card-wrapper{margin:10px;display:grid;gap:10px;grid-template-columns:1fr;list-style:none}ul.card-wrapper>li{min-width:0;width:100%}.card{display:flex;flex-flow:column nowrap;border-radius:10px;overflow:hidden}.card .card-content{display:flex;background-color:transparent;width:100%;height:100%;border:none;color:var(--color);flex-flow:row nowrap;gap:20px;justify-content:space-between;padding:10px}.card .card-content>div{display:flex;flex-flow:column nowrap;align-items:baseline;justify-content:space-evenly;gap:10px;flex:1;min-width:0}.card .card-content h2{font-size:1rem;text-align:left;white-space:nowrap;text-overflow:ellipsis;width:100%;overflow:hidden;font-family:Hanken Grotesk,sans-serif}.card .card-content p{color:#ffffffa6;text-overflow:ellipsis;overflow:hidden;text-align:left;max-height:36px}.card .card-content>svg{display:flex;width:30px;justify-content:center;align-items:center;fill:var(--color)}@supports (display: -webkit-box) or (line-clamp: 2){.card .card-content p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;word-break:break-word}}.card>.card-options{display:none}.card>.card-options.active{display:block}.card>.card-options>ul{display:flex;flex-flow:row nowrap;gap:1px;list-style:none;width:100%}.card>.card-options li{display:flex;flex:1;justify-content:center;align-items:center;width:40px;background-color:transparent;border:none}.card>.card-options li>button{background-color:transparent;font-weight:600;color:var(--color);border:none;padding:10px;width:100%;height:100%}.card>.card-options li:last-child>button{color:#f85149}.card>.card-options li>button:hover{background-color:#ffffff0d}.badge{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;border:1px solid var(--light-gray);color:var(--gray);border-radius:6px;background-color:#3f3f3f20;padding:2px 7px;font-size:.8rem}.badge.details{background-color:#3e3e53;border:none;color:var(--highlight-color);border-radius:6px;padding:2px 7px;font-size:.8rem}button.add{background-color:#39ff14;border:none;border-radius:5px;padding:5px;width:40px;height:40px}button.add>svg{width:100%;height:100%}dialog.form-modal{margin-bottom:0!important;color:var(--color);margin:auto;padding:12px;background-color:var(--black-3);min-width:100vw;border-width:2px 2px 0px 2px;border-radius:20px 20px 0 0}form.modal-content{display:flex;flex-flow:column nowrap;gap:20px;position:relative}dialog h2{font-family:Hanken Grotesk,sans-serif;margin-bottom:5px;font-size:1.2rem}form.modal-content>button.close{position:absolute;right:0;top:0;padding:0;background-color:var(--red);border:none;width:25px;height:25px;border-radius:5px}form.modal-content>button.close>svg{color:var(--color);width:100%;height:100%}form.modal-content>ul.color-options{list-style-type:none;display:flex;justify-content:space-between;width:100%;max-width:250px}form.modal-content>ul.color-options input{opacity:0;visibility:hidden}form.modal-content>ul.color-options button{background-color:transparent;border:none}form.modal-content>ul.color-options label{width:30px;height:20px;cursor:pointer;border:1px solid var(--color)}form.modal-content textarea{height:100px;white-space-collapse:break-spaces;resize:none}form.modal-content input[type=text],form.modal-content textarea{padding:10px;border-radius:5px;width:100%;background-color:var(--black-4);border:1px solid var(--input-border-color);color:var(--color);outline:none}form.modal-content input:focus{outline:none}label{display:flex;flex-direction:column;align-items:flex-start}label>span.text-length{align-self:flex-end;margin-top:5px;font-weight:boldhn;font-size:.75rem;color:var(--gray)}label>span.text-error{width:100%;text-align:center;font-weight:700;color:var(--red)}label.switch{display:flex;align-items:center;cursor:pointer;flex-flow:row nowrap;gap:10px}label.switch .slider{position:relative;width:40px;height:20px;background-color:var(--light-gray);border-radius:10px;transition:background-color .25s}label.switch .slider:after{content:"";position:absolute;top:0;left:0;width:16px;height:16px;background-color:var(--color);border-radius:50%;transform:translate(2px,2px);transition:transform .25s}label.switch input[type=checkbox]:checked+.slider{background-color:var(--green)}label.switch input[type=checkbox]:checked+.slider:after{transform:translate(22px,2px)}label.switch span{display:inline-block}form.modal-content>button{border:none;max-width:300px;width:100%;border-radius:10px;margin:auto;color:var(--color);font-weight:700;padding:10px 5px}@media not (prefers-reduced-motion:reduce){nav ul:after{transition:right .3s,left .3s}div#root header nav ul>li:before{transition:height .2s ease-in-out}header.block-details>label>.progress-bar>div{transition:width 1s}button.pulse{position:relative;overflow:hidden}button.pulse:after{content:"";position:absolute;background:radial-gradient(circle,transparent 40%,color-mix(in oklab,currentColor 30%,transparent 0%) 70%,transparent 70%);inset:0;animation:2.5s linear infinite pulse-color}@keyframes pulse-color{0%{transform:scale(.1);opacity:1}to{transform:scale(2);opacity:0}}}header.block-details{display:flex;align-items:center;gap:15px;padding:10px}header.block-details>div{display:flex;align-self:start;align-items:center;flex-flow:row nowrap;max-width:100%;min-width:0;gap:15px}header.block-details>div>h1{padding:0;overflow:hidden;flex:1;min-width:0;margin:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:1.3rem}header.block-details>div>button{padding:3px;border:none;flex-shrink:0;background-color:var(--black-3);fill:var(--color);border-radius:5px;width:25px;height:25px}header.block-details>p{color:#c9c9c9;width:100%;text-overflow:ellipsis;overflow:hidden}@supports (display: -webkit-box) or (line-clamp: 2){header.block-details>p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;word-break:break-word}}header.block-details>label{display:flex;align-self:start;flex-flow:row nowrap;align-items:center;gap:5px;color:var(--color)}header.block-details>label>.progress-bar{width:220px;background-color:var(--light-gray);overflow:hidden;border-radius:10px;height:10px}header.block-details>label>.progress-bar>div{height:100%}main button.btn-group{align-self:flex-start;background-color:transparent;border:none;font-weight:700;color:var(--color)}ul.tasks-wrapper{display:grid;grid-template-columns:1fr;gap:10px;list-style:none}li.task-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:5px;max-width:460px;min-width:0;width:100%;margin:auto;background-color:var(--black-3)}div.task-details{display:flex;flex-flow:column nowrap;overflow:hidden;gap:5px;flex:1;min-width:0}div.task-details>div{align-items:center;text-align:center}div.task-details>h2{font-size:1rem;text-align:left;white-space:nowrap;text-overflow:ellipsis;width:100%;overflow:hidden;font-family:Hanken Grotesk,sans-serif}li.task-item>input[type=checkbox]{accent-color:var(--highlight-color);width:17px;height:17px}li.task-item>button.btn-option{width:30px;height:30px;padding:3px;flex-shrink:0;background-color:#eee;border-radius:5px;fill:var(--black-1);border:none}li.task-item>button.btn-option:hover{background-color:#d6d6d6}li.task-item>button.btn-option>svg{width:100%;height:100%}li.task-item>button.btn-delete{background-color:#e32525;fill:var(--color)}li.task-item>button.btn-delete:hover{background-color:#c71a1a}li.done{background-color:#172b1e}li.done>input[type=checkbox]:checked{accent-color:#47CF73}li.done>.task-details>h2{text-decoration:line-through;color:#47cf73}div.date-time{display:flex;flex-flow:row nowrap;gap:10px}div.date-time>input{padding:5px;color-scheme:dark;border-radius:5px;width:100%;background-color:var(--black-4);border:1px solid var(--input-border-color);color:var(--color);outline:none}dialog.alert-box{margin:auto;border:none;max-width:360px;background-color:transparent}dialog.alert-box>div{display:flex;flex-flow:column nowrap;margin:10px;border:2px solid #404E63;border-radius:10px;gap:16px;padding:20px;color:var(--color);background-color:var(--black-3)}dialog.alert-box div.content{display:flex;justify-content:space-between;min-width:0;gap:12px;width:100%}dialog.alert-box div.content>svg.status-icon{height:36px;width:36px;padding:8px;border-radius:50%;flex:0 0 auto}dialog.alert-box svg.status-icon.delete,dialog.alert-box svg.status-icon.error{background-color:#ff64671a}dialog.alert-box svg.status-icon.warning{background-color:#fff0661a}dialog.alert-box svg.status-icon.info{background-color:#00b8db1a}@supports (color: color-mix(in lab,red,red)){dialog.alert-box svg.status-icon.delete,dialog.alert-box svg.status-icon.error{background-color:color-mix(in oklab,#ff6467 10%,transparent)}dialog.alert-box svg.status-icon.warning{background-color:color-mix(in oklab,#FFF066 10%,transparent)}dialog.alert-box svg.status-icon.info{background-color:color-mix(in oklab,#00b8db 10%,transparent)}}dialog.alert-box div.content>button.close{background-color:transparent;border:none;height:30px;width:30px;padding:5px;flex:0 0 auto}dialog.alert-box div.content>button.close svg{height:100%;width:100%}dialog.alert-box div.options{display:flex;flex-flow:column nowrap;gap:10px}dialog.alert-box div.options>button{border:none;color:var(--color);background-color:transparent;width:100%;padding:10px 20px;border-radius:10px}div:has(>section.filter-wrapper){width:100%;max-width:680px;margin-inline:auto}section.filter-wrapper{font-family:Hanken Grotesk,sans-serif;display:flex;align-items:center;flex-flow:row wrap;gap:5px}section.filter-wrapper h3{font-size:.9rem;color:var(--color)}section.filter-wrapper .color-option{padding:4px 6px;border-radius:4px;cursor:pointer}div.search-input{display:flex;justify-self:center;flex-flow:row nowrap;align-items:center;gap:10px;margin-top:10px;margin-inline:auto;padding:0 10px;height:35px;width:100%;max-width:560px}div.search-input svg{fill:var(--color)}div.search-input>div{display:flex;flex-flow:row nowrap;align-items:center;height:100%;background-color:var(--black-3);border:1px solid var(--input-border-color);border-radius:5px;width:100%}div.search-input>div>svg.search-icon{flex-shrink:0;margin-inline:10px;width:20px;height:20px}div.search-input>div>button.clear-icon{flex-shrink:0;background-color:transparent;border:none;width:35px;height:100%}div.search-input>div>button.clear-icon>svg{width:20px;height:20px;margin:0;padding:0}div.search-input>div>input{flex:1;height:100%;background-color:transparent;border:none;border-radius:5px;color:var(--color);font-family:Hanken Grotesk,sans-serif;font-size:.9rem;transition:border-color .2s ease-in-out}div.search-input>div>input:focus{outline:none;border-color:var(--color)}div.search-input>div>input::placeholder{color:#bdbdbd}div.search-input>button.filter-button{position:relative;background-color:var(--black-3);border:1px solid var(--input-border-color);padding:5px;border-radius:5px;width:40px;height:100%;font-family:Hanken Grotesk,sans-serif;font-size:.9rem}button.filter-button>span.filter-count{position:absolute;top:-10px;right:-10px;width:20px;height:20px;font-weight:700;border:1px solid var(--highlight-color);border-radius:50%;background-color:color-mix(var(--highlight-color) 55%,#000000);color:var(--color)}@media screen and (min-width:660px){ul.card-wrapper{grid-template-columns:repeat(2,1fr)}dialog.form-modal{margin-bottom:auto!important;min-width:650px;border-width:2px;border-radius:20px}dialog.alert-box{max-width:420px}dialog.alert-box>div{padding:24px;gap:25px}dialog.alert-box div.content{gap:16px}dialog.alert-box div.options{flex-flow:row nowrap;justify-content:space-between}dialog.alert-box div.options>button{width:fit-content}}@media screen and (min-width:800px){nav ul:after{content:none}nav li:has(a.active){anchor-name:none}ul.tasks-wrapper{grid-template-columns:repeat(2,1fr)}div#root>header{flex-flow:row nowrap;justify-content:space-between}div#root>header p{text-align:center}div#root>header h1{margin:5px 10px;width:fit-content}div#root>header nav{border:none;width:fit-content}div#root>header nav ul{gap:0}div#root>header nav>ul>li{position:relative;background-color:transparent;z-index:0}div#root>header nav>ul>li:before{content:"";position:absolute;display:block;bottom:0;left:0;height:0%;width:100%;background-color:var(--black-2);border-radius:50% 50% 0 0;z-index:-1}div#root>header nav>ul>li:has(a.active){color:var(--color)}div#root>header nav>ul>li:has(a.active):before{height:100%}div#root>header nav a.active{border:none}header.block-details>label{align-self:center}}@media screen and (min-width:1024px){ul.card-wrapper{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width:1100px){ul.tasks-wrapper{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width:1440px){ul.card-wrapper{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width:1584px){ul.tasks-wrapper{grid-template-columns:repeat(4,1fr)}}