@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");#whole-container{background-image:radial-gradient(at 50% 110%,pink 0,transparent 100%),radial-gradient(at 0 30%,hsla(189,100%,56%,1) 0,transparent 40%);background-size:cover;background-position:50%;background-repeat:no-repeat}.checklist-maincontainer{font-family:Nunito Sans,sans-serif}.working-container{padding:20px;display:block;border-radius:8px;margin-bottom:55rem}.centered-container{margin-top:120px;margin-bottom:50px}.top-container{display:flex;border-bottom:1px solid #ddd}.side-heading{width:25%}.side-heading h3{font-family:Merriweather,serif;font-size:24px;line-height:40px;font-weight:700}.right-heading{display:flex;flex-direction:row;justify-content:space-between;font-size:14px;color:#555;width:75%}.download-option{display:flex;flex-direction:row;cursor:pointer;font-size:17px}.download-option h4{margin-left:5px;font-size:17px}.option-section{display:flex;margin-top:12px}.print-option{display:flex;flex-direction:row;font-size:17px;margin-left:10px;cursor:pointer}.print-option h4{margin-left:5px;font-size:17px}.search-here{margin-bottom:15px}.search-here h3{font-size:18px}.down-main-container{display:flex;padding:20px 10px}.down-main-container .left-side{width:25%;padding-right:15px;border-right:1px solid #ddd}.down-main-container .left-side h3{font-size:18px;margin-bottom:10px}.down-main-container .left-side ul{list-style-type:none;padding:0}.down-main-container .left-side ul li{margin-bottom:8px;font-size:16px;color:#333}.todo-list{width:75%;padding-left:15px}.todo-list h2{font-size:22px;margin-bottom:15px;border-bottom:1px solid #ddd;padding-bottom:5px}.todo-list .add-task-btn{padding:10px 15px;font-size:24px;border:none;background-color:#007bff;color:white;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.todo-list .add-task-btn:hover{background-color:#0056b3}.todo-list ul{list-style-type:none;padding-left:0}.todo-list ul li.task-item{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;border-radius:5px;border:1px solid #ddd;margin-bottom:10px;font-size:16px;background-color:#f7f7f7}.todo-list ul li.task-item.completed{text-decoration:line-through;color:#888}.todo-list ul li.task-item .complete-task-btn{background-color:#28a745;color:white;border:none;padding:5px 10px;border-radius:5px;cursor:pointer;margin-right:5px}.todo-list ul li.task-item .complete-task-btn:hover{background-color:#218838}.todo-list ul li.task-item .delete-task-btn{background-color:#dc3545;color:white;border:none;padding:5px 10px;border-radius:5px;cursor:pointer}.todo-list ul li.task-item .delete-task-btn:hover{background-color:#c82333}.view-task-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2);width:80%;max-width:600px;z-index:1000;padding:20px;box-sizing:border-box;overflow-y:auto}.view-task-content{display:flex;flex-direction:column;gap:5px}.task-header{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.mark-complete-btn{background-color:#e6f7e9;border:1px solid #34c759;color:#34c759;padding:8px 15px;border-radius:25px;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:5px}.mark-complete-btn i{font-size:18px}.task-title{font-size:22px;font-weight:700;margin-bottom:10px}.task-description{font-size:16px;margin-bottom:20px}.task-meta{display:flex;gap:15px;font-size:14px;color:#888}.task-meta i{margin-right:5px}.task-note{margin-top:20px;padding:10px;border:1px solid #ddd;border-radius:5px;display:flex;align-items:center;color:#555;cursor:pointer;font-size:14px;gap:5px}.close-header{display:flex;justify-content:flex-end}.close-header .close-btn{display:flex;font-size:30px;cursor:pointer;color:#888}.loading-bar{background-color:#e0e0e0;border-radius:25px;overflow:hidden;position:relative;height:20px;margin-bottom:10px;width:130%}.loading-bar-fill{background-color:#4caf50;height:100%;text-align:center;color:white;white-space:nowrap;transition:width .4s ease-in-out;line-height:20px;border-radius:25px 0 0 25px}.remove-task-btn{background-color:#e74c3c;color:white;border:none;border-radius:25px;padding:8px 15px;font-size:14px;cursor:pointer;transition:background-color .3s ease,transform .2s ease}.remove-task-btn:hover{background-color:#c0392b}.remove-task-btn:active{transform:scale(.95)}.remove-task-btn i{margin-right:5px;font-size:16px}.left-side .category-section{margin-top:30px}.selected-category{background-color:#f0f0f0;cursor:pointer;padding:5px 10px;border-radius:15px;transition:background-color .3s ease,color .3s ease}.selected-category:hover{background-color:#d9d9d9;color:#333}.selected-category.selected{background-color:#007bff;color:#fff}#category-value{cursor:pointer}.selected-category-display{display:flex;align-items:center;font-weight:700;margin-bottom:10px;border:1px solid #d9d9d9;border-radius:28px;padding:5px;box-sizing:border-box;width:fit-content}.selected-category-display span{margin-right:8px;font-size:14px}.close-icon{cursor:pointer;color:#ff0000;font-size:16px}.selected-category{font-weight:700;color:#007bff}@media (min-width:577px) and (max-width:768px){.top-container{flex-direction:column}.right-heading,.side-heading{width:100%;text-align:center}.down-main-container{flex-direction:row}.down-main-container .left-side,.todo-list{width:100%;padding:0;border:none}.todo-list .add-task-btn{font-size:22px;padding:10px}.task-modal{width:100%}.view-task-modal{width:80%}.loading-bar{width:100%}.centered-container{margin-top:10%;margin-bottom:5%}}@media (min-width:769px) and (max-width:992px){.checklist-maincontainer{padding:15px}.side-heading{width:30%}.right-heading{width:70%}.down-main-container .left-side{width:30%}.todo-list{width:70%}.task-modal{width:80%}.view-task-modal{width:70%}.loading-bar{width:100%}}@media (min-width:993px) and (max-width:1200px){.checklist-maincontainer{padding:20px}.side-heading{width:25%}.right-heading{width:75%}.down-main-container .left-side{width:25%}.todo-list{width:75%}.task-modal{width:70%}.view-task-modal{width:60%}.loading-bar{width:100%}}@media (max-width:577px){.checklist-maincontainer{padding:10px}.top-container{flex-direction:column}.right-heading,.side-heading{width:100%;text-align:center}.right-heading{padding:15px 10px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);margin-bottom:15px;display:flex;flex-direction:column}.right-heading .progress-bar-container{display:flex;align-items:center;margin-bottom:10px}.right-heading .progress-bar-container .progress-bar{width:80%;height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden;margin-right:10px}.right-heading .progress-bar-container .progress-bar-inner{width:14%;height:100%;background-color:#4caf50}.right-heading .task-summary{font-size:16px;font-weight:600}.right-heading .filter-container{display:flex;justify-content:space-between;margin-top:10px}.right-heading .filter-container .filter-item{padding:5px 10px;border:1px solid #ddd;border-radius:8px;font-size:14px;cursor:pointer}.right-heading .filter-container .filter-item.active{border-color:red;color:red}.option-section{display:none}.down-main-container{flex-direction:column}.down-main-container .left-side{width:100%;padding:10px;background-color:#f7f7f7;border-radius:8px;margin-bottom:15px}.left-side h3{font-size:18px;margin-bottom:10px}.left-side .category-container{display:flex;justify-content:space-between;flex-wrap:wrap}.left-side .category-item{flex:1;padding:10px;text-align:center;background-color:#fff;border:1px solid #ddd;border-radius:8px;margin:5px;font-size:14px;cursor:pointer}.left-side .category-item.active{border-color:red;color:red}.todo-list{width:100%;padding:0;border:none}.todo-list .add-task-btn{font-size:20px;padding:8px}.task-modal{width:100%}.view-task-modal{width:90%}.loading-bar{width:100%}.status-container{display:flex;justify-content:space-between;padding:10px 0;font-size:14px}.status-container .status-item{flex:1;text-align:center;margin:0 5px}.search-container{margin-top:10px;display:flex;justify-content:center}.search-container input[type=search]{width:90%;padding:10px;font-size:16px;border:1px solid #ddd;border-radius:8px}.search-container button{display:none}.category-section{padding:10px;text-align:center}.category-section h3{font-size:14px;margin-bottom:10px;color:#333}.category-buttons{display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:center;gap:8px;padding-bottom:10px}.category-button{background-color:#fff;border:1px solid #ddd;border-radius:20px;padding:6px 12px;font-size:12px;color:#333;cursor:pointer;white-space:nowrap;transition:all .3s ease}.category-button:hover{background-color:#f7f7f7}.selected-category{background-color:#f1e8e7;color:#fff;border-color:#e74c3c}.todo-list ul li.task-item{font-size:14px}.status-section{display:none}.category-section h3{font-weight:700}.centered-container{margin-top:10%;margin-bottom:5%}}.task-modal{position:fixed;top:0;right:0;width:400px;height:100%;background:rgba(255,255,255,.2);backdrop-filter:blur(10px);box-shadow:-2px 0 15px rgba(0,0,0,.2);border-left:1px solid rgba(255,255,255,.3);z-index:1000;transition:transform .3s ease-in-out;background:linear-gradient(45deg,rgba(249,231,254,.2),rgba(29,211,211,.2))}.task-modal-content{padding:20px;display:flex;flex-direction:column;height:100%}.task-modal-content h2{font-size:22px;margin-bottom:20px;color:#090909}.task-modal-content .modal-input,.task-modal-content .modal-textarea{margin-bottom:15px;padding:10px;border:1px solid rgba(231,21,21,.4);background:#fff;border-radius:4px;font-size:16px;color:#121111}.task-modal-content .modal-textarea{resize:none}.task-modal-content .create-task-btn{padding:10px 15px;font-size:16px;border:none;background-color:rgba(0,123,255,.6);color:rgb(255,255,255);border-radius:5px;cursor:pointer;transition:background-color .3s ease}.task-modal-content .create-task-btn:hover{background-color:rgba(0,86,179,.6)}.task-modal-content .close-btn{align-self:flex-end;font-size:30px;cursor:pointer;color:#fff}.task-modal-content .ending-date,.task-modal-content .starting-date{font-size:16px;margin-left:3px;font-weight:500;color:#181515}.add-task-container{display:flex;align-items:center;margin-bottom:20px;border:1px solid #ddd;border-radius:25px;padding:5px 10px;background-color:#fff}.add-task-container input{flex:1;border:none;outline:none;font-size:16px;padding:10px;border-radius:25px}.add-task-container button{border:none;background-color:transparent;color:#007bff;font-size:20px;cursor:pointer}.add-task-container button:hover{color:#0056b3}.add-task-container button i{pointer-events:none}.status-section ul{list-style-type:none;padding:0}.status-section li{display:flex;align-items:center;margin-bottom:10px}.status-section li:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:10px}.status-section li.pending:before{background-color:rgb(216,25,25)}.status-section li.done:before{background-color:rgb(36,215,36)}