@import"https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap";@import"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css";.task-card{display:flex;vertical-align:top;align-items:flex-start;border:1px solid transparent;border-bottom:1px solid #ccc;padding:.5rem;margin-bottom:.5rem;gap:1rem;cursor:pointer;transition:all .3s ease}.task-card.deleting{animation:fadeOut .3s forwards}.task-card .card-icon{color:var(--primary-color, #034EA2);font-size:12px;height:24px;width:24px;padding:.2rem;font-weight:600;text-transform:uppercase;box-sizing:border-box;position:relative;text-align:center;border:1px solid var(--primary-color, #034EA2);border-radius:50%}.task-card .card-content:hover .card-footer .task-actions{opacity:1}.task-card .card-content{display:flex;flex-direction:column;flex:1}.task-card:hover{background-color:#f7f7f7;border-color:transparent}.task-card .card-content .card-header{display:flex;justify-content:space-between;vertical-align:top;align-items:flex-start;gap:1rem}.task-card .card-content .card-header .title{font-weight:600;font-size:14px}.task-card .card-content .card-header .status{font-size:12px}.task-card .card-content p{font-weight:400;font-size:12px;color:#231f20;margin:6px 0}.task-card .card-content .card-footer{display:flex;justify-content:space-between}.task-card .card-content .card-footer span{font-size:10px;color:#767676}.task-card .card-content .card-footer .task-actions{align-self:flex-end;opacity:0;transition:opacity .3s ease}.task-card .card-content .card-footer button{border:0px;background:transparent;cursor:pointer;margin-left:8px}.status .bi-circle-fill{font-size:8px;vertical-align:middle;margin-right:.25rem}.pending .status .bi-circle-fill{color:#d0d0d0}.completed .status .bi-circle-fill{color:#368a04}.in-progress .status .bi-circle-fill{color:#ffb03c}.completed .bi-clock:before{content:""}.in-progress .bi-clock:before{content:""}.accordion-container{padding:8px;overflow:hidden}.accordion-header{display:flex;padding:8px;border-radius:3px;font-size:12px;background:#f3f6f9;justify-content:space-between;cursor:pointer}.accordian-trigger-btn{transition:transform .2s ease;color:#034ea2}.open .accordian-trigger-btn{transform:rotate(180deg)}.accordian-item{margin-bottom:8px;overflow:hidden}.accordion-content{opacity:0;max-height:0px;transition:max-height .3s ease,opacity .3s ease}.accordion-content.open{opacity:1}.task-list{list-style:none;padding:0;margin-top:8px}.task-count{font-weight:700}.search-bar-container{width:100%;padding:.5rem;box-sizing:border-box;position:relative}.search-bar-container input{min-width:100%;box-sizing:border-box;padding:.5rem 2rem;font-size:12px;transition:all .2s ease-in-out}.search-bar-container .bi-search{position:absolute;left:1rem;color:var(--primary-color, #034EA2);font-size:12px;top:50%;transform:translateY(-50%)}.search-bar-container .bi-x{position:absolute;right:1rem;opacity:0;color:var(--primary-color, #034EA2);font-size:12px;top:50%;transform:translateY(-50%);cursor:pointer;transition:opacity .2s ease-in-out}@keyframes slide-up{0%{transform:translateY(50%) translate(-50%);opacity:0}to{transform:translateY(0) translate(-50%);opacity:1}}.slide-up{animation:slide-up 1s ease-out forwards}.toast{position:absolute;bottom:20px;left:48%;font-size:14px;margin:0 auto;padding:8px 16px;border-radius:3px;transform:translate(-50%);background-color:#333;color:#fff;box-shadow:0 2px 10px #0000004d;z-index:1000;width:max-content;max-width:100%}.toast.success{color:#fff;background-color:var(--success-color, #368A04)}.toast.error{background-color:var(--error-color, #E32A34);color:#fff}.toast-container{width:412px;display:block;position:relative}.select-dropdown{opacity:0;max-height:0;visibility:hidden;list-style:none;overflow:hidden;transition:opacity .2s ease-out,transform .25s cubic-bezier(.4,0,.2,1),max-height .3s ease-in-out,visibility .3s;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #DDDDDD;border-radius:3px;box-shadow:0 10px 15px -3px #0000001a;margin-top:4px;padding:8px;max-width:100%;z-index:50;font-size:12px}.select-container{position:relative;width:100%}.select-btn.btn{width:100%;text-align:left;background:#fff;font-size:12px;padding:.5rem 1rem;border-radius:3px;border:1px solid #DDDDDD;outline-color:var(--primary-color, #034EA2);outline-width:1px}.select-btn .bi:last-child{float:right;color:#034ea2}.select-dropdown.is-open{opacity:1;max-height:300px;visibility:visible;transform:translateY(0) scale(1)}.select-option{padding:.5rem 1rem;cursor:pointer;border-radius:3px;transition:background-color .2s ease-in-out}.select-option:hover{background-color:#f7f7f7}:root{--primary-color: #034EA2;--primary-color-hover: #034289;--success-color: #368A04;--error-color: #E32A34;--pending-color: #D0D0D0}body{min-height:100vh;min-height:100dvh;margin:0;padding:0;font-family:Jost,sans-serif;display:flex;justify-content:center;align-items:center}.container{position:relative;width:412px;height:650px;padding:0;border-radius:8px;overflow-y:auto;box-shadow:#64646f33 0 7px 29px;display:flex;flex-direction:column}.content{padding-top:48px;padding-left:24px;padding-right:24px}@media screen and (max-width:486px){.container{width:100%;height:100vh;height:100dvh;border-radius:0}#root{width:100%;height:100%}}header{background:var(--primary-color, blue);color:#fff;padding:1rem 18px;text-transform:uppercase}.input-group{display:flex;justify-content:space-between;margin:8px}input,textarea,select{flex:1;padding:8px;border-radius:3px;border:1px solid #DDD;transition:all .3s ease;font-family:Jost,sans-serif}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary-color, blue)}.btn{padding:.5rem 2rem;border-radius:5px;font-size:14px;text-decoration:none;transition:all .3s ease}.btn-primary{background:var(--primary-color, blue);color:#fff;border:none;cursor:pointer}.btn-primary:hover{background:var(--primary-color-hover, #034289)}.btn-outline-primary{border:1px solid var(--primary-color, blue);color:var(--primary-color, blue)}.btn-outline-primary:hover{background:var(--primary-color-hover, #034289);color:#fff}.p-2{padding:1rem}.text-primary{color:var(--primary-color, blue)}.text-white{color:#fff}.text-red{color:#e32a34}.pointer{cursor:pointer}.mr-2{margin-right:1rem}.mt-2{margin-top:1rem}.mr-1{margin-right:.5rem}#add-task-btn{position:absolute;font-size:24px;bottom:20px;left:85%;width:50px;height:50px;border-radius:50%;padding:0;flex-shrink:0}.bi-circle-fill.in_progress{color:#ffb03c}.bi-circle-fill.completed{color:#368a04}.bi-circle-fill.pending{color:#d0d0d0}@keyframes fadeOut{0%{transform:translate(0) scale(1);opacity:1;max-height:initial}75%{max-height:initial}to{transform:translate(120%) scale(0);opacity:0;max-height:0}}@keyframes fade-in{0%{opacity:0}}@keyframes fade-out{to{opacity:0}}@keyframes slide-from-down{0%{transform:translateY(40px)}}@keyframes slide-to-down{to{transform:translateY(-40px)}}@keyframes slide-from-right{0%{transform:translate(40px)}}@keyframes slide-to-left{to{transform:translate(-40px)}}::view-transition-old(content){animation:90ms cubic-bezier(.4,0,1,1) both fade-out,.3s cubic-bezier(.4,0,.2,1) both slide-to-left}::view-transition-new(content){animation:.21s cubic-bezier(0,0,.2,1) 90ms both fade-in,.3s cubic-bezier(.4,0,.2,1) both slide-from-right}::view-transition-old(list){animation:90ms cubic-bezier(.4,0,1,1) both fade-out,.3s cubic-bezier(.4,0,.2,1) both slide-to-down}::view-transition-new(list){animation:.21s cubic-bezier(0,0,.2,1) 90ms both fade-in,.3s cubic-bezier(.4,0,.2,1) both slide-from-down}