@import"https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Orbitron:wght@400..900&display=swap";:root{--bg-color: #f9f9fb;--primary-color: #667eea;--secondary-color: #764ba2;--accent-color: #f6ad55;--background-color: #f9f9fb;--header-bg: #ffffff;--sidebar-bg: #ffffff;--text-color: #000;--link-color: #667eea;--add: rgb(9, 153, 9);--delete: rgb(241, 39, 39);--progress-color: #764ba2;--meta-color: #888;--backdrop: rgb(231, 231, 241);--card-bg: #fff;--border-radius: .5rem;--input-bg: #fffefe;--input-border: 1px solid #ccc;--transition-speed: .3s;--shadow: 0 2px 8px rgba(0,0,0,.1);--gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) }[data-theme=dark]{--bg-color: linear-gradient(135deg, #0b1220, #111827, #4c1d95, #0b1220, #0b1220, #1e40af, #0b1220);--primary-color: #667eea;--secondary-color: #764ba2;--accent-color: #f6ad55;--header-bg: #ffffff;--sidebar-bg: #000;--text-color: #fff;--link-color: #667eea;--add: rgb(9, 153, 9);--delete: rgb(241, 39, 39);--progress-color: #764ba2;--backdrop: rgb(11, 11, 14);--meta-color: #888;--card-bg: #000;--border-radius: .5rem;--input-bg: #0f0f0f;--input-border: 1px solid #ccc;--transition-speed: .3s;--shadow: 0 2px 2px rgba(233, 233, 233, .1);--gradient: linear-gradient(130deg, #8b5cf6, #111827, #111827, #4f46e5)}*{box-sizing:border-box}global html,global body{margin:0;padding:0;font-family:Inter,sans-serif;background:var(--bg-color);color:var(--text-color)}global a{text-decoration:none;color:var(--text-color)}global button{cursor:pointer;font-family:inherit}body{font-family:Mulish,sans-serif;font-optical-sizing:auto;font-style:normal;background:var(--bg-color)}h1,h2,h3,h4,h5,h6{padding:0;margin:0;color:var(--text-color)}ul{list-style:none;padding:0;margin:0}a{text-decoration:none;color:var(--text-color)}input,select,textarea{border:var(--input-border);color:var(--text-color);background:var(--input-bg)}.btn{color:var(--text-color);background:var(--backdrop);border-radius:5px;border:none;cursor:pointer}.btn:hover{background:var(--gradient)}.btn:active{scale:.9}.add{background:var(--add)}.delete{background:var(--delete)}.due{color:#e63946}.overdue,.high{color:red}.medium{color:#ff1e00}.low{color:#ff4500}.verylow{color:green}.scrollable::-webkit-scrollbar{width:10px;height:20px}.scrollable::-webkit-scrollbar-track{background:#ffffff0d;border-radius:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.scrollable::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#667eea,#764ba2);border-radius:8px;border:3px solid rgba(255,255,255,.1);cursor:pointer}.scrollable::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#8b5cf6,#4f46e5)}.scrollable::-webkit-scrollbar-button{background:transparent}.scrollable::-webkit-scrollbar-corner{background:transparent}.app-container{width:100%;height:100%;display:flex;flex-direction:column;padding:5px;overflow:hidden}.app-header{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding:1rem 2rem;background:var(--gradient);box-shadow:var(--shadow);border-radius:var(--border-radius) var(--border-radius) 0 0}.app-header .title{font-size:1.8rem;font-weight:700}.app-header ul li{cursor:pointer}.app-header ul li a{text-decoration:none}.app-header ul li button{width:100%;height:30px;background:transparent!important}.app-header ul .progress{font-weight:700;font-size:17px}.app-header .media-mode{width:100%;height:100%}.app-header .desktop-mode{flex-basis:70%}.app-header .desktop-mode ul{width:100%;height:inherit;display:flex;justify-content:space-evenly;align-items:center;flex-basis:60%;list-style:none}.app-header .mobile-mode{display:none}.app-header .mobile-mode ul{width:100%;height:100%;display:flex;justify-content:space-evenly;align-items:center;flex-direction:column;list-style:none;padding:0;margin:0;border-bottom-left-radius:inherit;z-index:999}.app-header .menu-btn-container{display:none}.show-mobile{right:0%!important;transition:right .5s ease!important}@media screen and (max-width:770px){.app-header .desktop-mode{display:none}.app-header .mobile-mode{position:absolute;top:100%;right:-100%;width:200px;height:300px;display:flex;background:var(--gradient);border-bottom-left-radius:7px;z-index:7;transition:right .5s ease}.app-header .mobile-mode ul li{background:var(--backdrop);width:100%;height:30px;display:flex;justify-content:center;align-items:center}.app-header .mobile-mode ul li a{width:100%;height:100%;background:transparent;display:flex;justify-content:center;align-items:center}.app-header .menu-btn-container{display:flex}.app-header .menu-btn-container button{cursor:pointer;-webkit-user-select:none;user-select:none;background:transparent;border:none;outline:none}}.page-content-overlay{width:100%;height:100%;position:absolute;left:-100%;top:10.9%;background:#0000001c;border:none;outline:none;-webkit-user-select:none;user-select:none;cursor:pointer;z-index:3;transition:all .5s ease}.slide-right{left:0%;transition:all .5s ease}.page-content{width:100%;height:100%;display:flex;justify-content:space-between;align-items:flex-start;color:var(--text-color)}.sidebar{position:relative;height:87vh;display:flex;flex-basis:8%;justify-content:space-evenly;align-items:left;flex-direction:column;padding:1.5rem 1rem;color:var(--text-color);background:var(--sidebar-bg);box-shadow:var(--shadow);font-weight:600;transition:flex-basis .5s ease}.sidebar h4{display:flex;justify-content:center;align-items:center;margin-bottom:15px;text-align:center;gap:10px;font-weight:700!important;cursor:pointer}.sidebar .openedSidebar{justify-content:flex-start}.sidebar h4 span{display:flex;justify-content:center;align-items:center}.side-menu-btn-container{position:absolute;left:13px;top:10px;width:25px;height:25px}.side-menu-btn{width:100%;height:100%;color:var(--text-color);cursor:pointer;background:transparent;border:none;outline:none;transition:rotate .5s ease}.sb-section{width:100%;gap:20px;transition:display .5s ease}.sidebar .sb-menu{font-weight:600;padding:.5rem 0;color:var(--text-color);transition:color var(--transition-speed);font-weight:lighter}.sidebar .sb-menu ul{display:flex;justify-content:space-evenly;flex-direction:column;gap:10px;transition:all .5s ease-in-out}.sidebar .sb-menu ul li a:hover{color:var(--accent-color)}.sidebar .categories{padding:.5rem 0}.sidebar .categories button{background:transparent;border:none;padding:.3rem 0;font-size:.95rem;color:var(--text-color);transition:color var(--transition-speed);cursor:pointer}.sidebar .categories button:hover{color:var(--primary-color);font-weight:700}.sidebar .meta{font-size:.85rem;margin-top:20px;color:var(--meta-color)}.move{flex-basis:22%;transition:flex-basis .5s ease}.rotateBtn{rotate:-180deg;transition:rotate .5s ease}@media screen and (max-width:900px){.sidebar{display:none}.sb-section{width:100%}.sb-section ul{width:100%;display:flex;justify-content:flex-start;align-items:center;flex-direction:row}.sidebar .sb-menu ul{flex-direction:row;justify-content:flex-start;gap:15px}.sidebar .categories ul{gap:15px}}.matrix-container{height:90vh;display:flex;flex-direction:column;flex-basis:100%;padding-left:20px;z-index:1;transition:flex-basis .5s ease}.matrix-container h2{margin:0}.matrix-container-header{width:100%;height:35px;display:flex;justify-content:space-between;align-items:center}.matrix-container-title{display:flex;justify-content:space-between;align-items:center}.matrix-container-header button{width:150px;height:30px;display:flex;justify-content:center;align-items:center;font-weight:700;margin-bottom:10px;background:var(--backdrop)}.matrix-grid{width:100%;height:91%;display:grid;grid-template-columns:repeat(2,1fr);row-gap:19px;overflow:hidden;justify-items:center;background:var(--backdrop);padding:5px;overflow-y:scroll}.quadrant{display:flex;justify-content:space-evenly;align-items:flex-start;flex-direction:column;min-height:250px;gap:3px;padding:.5rem;cursor:pointer;background:var(--gradient);border-radius:var(--border-radius);box-shadow:var(--shadow)}.quadrant-header{width:100%;height:35px;display:flex;justify-content:space-between;align-items:center}.quadrant-header button{width:25px;height:25px;display:flex;justify-content:center;align-items:center;font-weight:700;border-radius:100%;font-size:15px;background:var(--backdrop)}.quadrant .list-container{max-width:300px;height:100%;display:flex;display:inline;overflow:hidden}.quadrant .list-container .list{max-width:300px;height:100%;overflow:hidden}.quadrant h3{margin-top:0;font-size:1.1rem}@media screen and (max-width:749px){.matrix-container{padding-left:0;flex-basis:100%}.matrix-grid{grid-template-columns:2fr}}@media screen and (max-width:420px){.matrix-container-header{font-size:10px}}.slider-wrapper{width:300px;height:100%;position:relative;display:flex;align-items:center}.slider{width:100%;height:100%;display:flex;gap:var(--gap, 16px);overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}.slider::-webkit-scrollbar{display:none}.nav-btn{position:absolute;top:38%;width:2rem;height:2rem;display:flex;justify-content:center;align-items:center;place-items:center;border-radius:50%;border:none;font-size:100%;line-height:1rem;cursor:pointer;color:var(--text-color);background:var(--card-bg);box-shadow:var(--shadow);transition:background .2s;z-index:2;-webkit-user-select:none;user-select:none}.nav-btn:hover{color:var(--card-bg);background:var(--text-color)}.empty-tasks{min-width:100%!important;height:100%!important;min-height:90%!important;display:flex;justify-content:center;align-items:center;background:#fff;font-weight:700}.nav-btn:hover{background:#fff}.left{left:1px}.right{right:1px}.task-card{position:relative;min-width:100%!important;height:100%!important;min-height:90%!important;display:flex;flex-direction:column;justify-content:space-between;background:var(--card-bg);padding:1rem;border-radius:var(--border-radius);box-shadow:var(--shadow);-webkit-user-select:none;user-select:none;transition:transform var(--transition-speed),box-shadow var(--transition-speed)}.loading-container{text-align:center;justify-content:center;align-items:center;font-weight:700}.task-card:hover{box-shadow:0 4px 12px #00000026 inset}.task-head{display:flex;justify-content:flex-start;align-items:center;gap:.5rem;height:10%;flex-basis:20%}.task-head .check-box{cursor:pointer;width:20px;height:20px;border-color:transparent}.task-card .check-box:checked{background-color:var(--gradient);border-color:transparent}.task-card .task-head .check-box:active{background:var(--gradient)}.task-card .flags{position:absolute;top:-7px;right:5px;width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:100%;transition:all .5s ease}.task-card .flags p{font-size:8px;color:#e63946;text-align:center}.task-card .flags .overdue{color:red}@keyframes dueAnimation{0%{scale:1.1}25%{scale:1.2}50%{scale:1.3}75%{scale:1.2}to{scale:1.1}}.task-card .task-desc{height:20%;width:100%;display:flex;justify-content:center;align-items:center;text-align:center;font-size:17px;margin-top:4;margin-bottom:4;color:var(--text-color)}.task-card .due-date{display:flex;justify-content:center;align-items:center;font-size:.85rem;height:20%}.task-card .priority{display:flex;justify-content:space-evenly;font-size:.85rem;height:20%}.task-card .actions{display:flex;justify-content:space-evenly}.task-card .actions button{width:30px;height:30px;border-radius:100%;font-size:15px;font-weight:700;background:var(--backdrop)}.task-card .actions button:hover{background:var(--gradient)}.modal h3{display:flex;justify-content:center;align-items:center;margin-bottom:5px}form{font-weight:700}.form-row{margin-bottom:5px}.input-container{position:relative;margin-top:5px}label{margin-bottom:10px}.input-container .due-date,.input-container .due-time{cursor:pointer}.input-container select{position:relative;width:100%;height:50px;cursor:pointer;color:var(--text);border-radius:var(--border-radius)}.input-container select option{color:var(--text-color)}input{height:50px;border:2px solid #ccc;border-radius:6px;width:100%;color:var(--text);padding:10px}input:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 0 2px #3b82f633}textarea{max-width:100%;min-width:100%;min-height:100px;border-radius:6px;padding:10px}.form-buttons-container{width:100%;height:30px;display:flex;gap:8px;justify-content:space-evenly;margin-top:20px}.form-buttons-container button{width:120px;height:30px;font-weight:700}.valid{border-color:#22c55e;box-shadow:0 0 0 2px #22c55e26}.error{border-color:#e63946;box-shadow:0 0 0 2px #e6394626}.error-text{color:#e63946;font-size:12px;margin-top:3px}.valid-message{position:absolute;top:0%;right:0%;width:50px;height:50px;display:flex;justify-content:center;align-items:center;color:#22c55e}.enabled{opacity:1;cursor:pointer}.disabled{opacity:.5;cursor:none}.tasks-page-wrapper{width:100%;height:90vh;margin-left:10px;overflow-y:hidden}.tasks-page-header{width:100%;height:35px;display:flex;justify-content:space-between;align-items:center;padding-left:8px}.tasks-page-header .right-side{width:60%;height:35px;display:flex;justify-content:space-between;align-items:center;padding-left:8px}.tasks-page-header h3{flex-basis:50%}.tasks-page-header button{height:30px;font-weight:700}.tasks-page-body{width:100%;height:91%;overflow:hidden;justify-items:center;overflow-y:scroll}.tasks-page-body-container{display:flex;flex-direction:column;flex-basis:90vw;width:auto;height:100%;margin-left:10px;z-index:1;overflow-y:hidden}.tasks-page-body-container .deleteAllTasks{display:flex;width:30px;height:29px}.tasks-page-body-container .deleteAllTasks button{width:100%;height:100%;text-align:center}.tasks-page-body-container .find{position:relative;width:100%;height:10%;display:flex;justify-content:space-between;align-items:center}.tasks-page-body-container .find .searchbar{width:60%;height:30px;display:flex;justify-content:space-between;align-items:center}.tasks-page-body-container .find .searchbar input{width:100%;height:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--link-color);outline:none;margin-left:5px;padding-left:10px}.find-by-buttons{width:40%;display:flex;justify-content:space-evenly;align-items:center}.find-by-buttons button{height:30px;width:90%;cursor:pointer}.tasks-page-body-container .find .find-by{position:absolute;top:115%;width:100%;height:100px;display:flex;justify-content:space-evenly;align-items:center;background:var(--gradient);border-radius:5px;z-index:2}.find-by-section{display:flex;justify-content:center;align-items:flex-start;flex-direction:column;gap:10px;margin:10px;flex-basis:33%}.reset-filters{position:absolute;right:2%;top:3%;height:30px}.reset-filters button{height:100%;width:100%;cursor:pointer}.tasks-page-body-container .find .find-by .filter{flex-basis:50%}.tasks-page-body-container .find .find-by input{width:15px;height:15px;cursor:pointer}.tasks-page-body-container .find .find-by select{width:100%;height:30px;cursor:pointer;border-radius:5px}.tasks-page-body-container .tasks-list{display:grid;grid-template-columns:repeat(3,1fr);width:100%;height:92%;gap:10px;padding:10px;border-radius:10px;z-index:1;overflow-y:scroll;background:var(--backdrop)}.tasks-page-body-container .tasks-list .task-card{height:250px!important}.tasks-page-body-container .tasks-list .task-card button{height:30px;width:30px}@media screen and (max-width:770px){.tasks-page-container{margin-left:0}.tasks-page-body-container .tasks-list{grid-template-columns:1fr 1fr}.tasks-page-body-container .find .find-by{height:auto;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px}.find-by-section{width:100%}.minize-head{display:none}.right-side{flex-basis:74%}.right-side h4{flex-basis:70%}.tasks-page-header button{width:100px}}@media screen and (max-width:500px){.tasks-page-body-container .tasks-list{grid-template-columns:1fr}}.task-singlepage-container{width:100%;height:auto;padding:10px 5px 5px;margin-top:15px;border-radius:6px;background:var(--backdrop);overflow:hidden;overflow-y:hidden}.task-singlepage-header{position:relative;width:100%;height:35px;display:flex;justify-content:space-between;align-items:center;gap:5px;padding-left:8px}.task-singlepage-header .title-completion{width:70%;display:flex;justify-content:flex-start;align-items:center;gap:10px}.task-singlepage-header .check-box{cursor:pointer;width:20px;height:20px;border-color:transparent}.task-singlepage-header .due-flag{width:20%}.task-singlepage-header .flags p{font-size:13px;color:#e63946;text-align:center}.task-singlepage-header .actions{width:30%;display:flex;justify-content:space-evenly;align-items:center;text-align:center}.task-singlepage-header .actions button{width:30px;height:30px;display:flex;justify-content:space-between;align-items:center;text-align:center;border-radius:100%}.action-menu-btn,.actions.mobile{display:none}.task-singlepage-body{width:100%;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;gap:10px;margin-top:30px;padding-left:8px}.task-singlepage-body .multi-property{width:100%;display:grid;grid-template-columns:1fr 1fr;justify-content:space-evenly;align-items:center}.task-singlepage-body .multi-property .task-property{width:50%}.task-singlepage-body .task-property .task-desc{max-width:100%;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;overflow:hidden}@media screen and (max-width:550px){.task-singlepage-header{gap:10px}.actions.desktop{display:none}.action-menu-btn,.actions.mobile{display:flex}.action-menu-btn{width:30px;height:30px}.actions.mobile{position:absolute;top:130%;left:110%;width:auto;justify-content:space-between;align-items:flex-start;gap:5px;flex-direction:column;transition:all .5s ease;z-index:9999}.actions.mobile.slide-left{left:89%;transition:all .5s ease}.task-singlepage-header .actions button{width:40px;height:40px;background:var(--meta-color);display:flex;justify-content:center;align-items:center}.task-singlepage-header .actions button:hover{background:var(--gradient)}}.settings-page-container{width:100%;height:90vh;padding-left:10px;overflow-y:hidden}.settings-page-header{width:100%;height:35px;display:flex;justify-content:space-between;align-items:center;padding-left:0}.settings-page-body{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-items:center;overflow:hidden;overflow-y:scroll}.settings-page-body .setting-section{width:300px;display:flex;flex-direction:column;align-items:center;justify-items:center;gap:10px;margin-bottom:20px}.settings-page-body button{width:100px;height:30px;padding:.5rem 1rem;border-radius:var(--border-radius);border:none;background:var(--backdrop);color:#fff}.not-found-page-container{width:100%;height:90vh;padding-left:10px;overflow-y:hidden;text-align:center;padding:4rem 1rem}.task-singlepage-container.not-found-page-container{width:87vw;height:auto;padding:5px;margin-top:15px;overflow:hidden;overflow-y:hidden}.not-found-page-container h1{font-size:6rem;margin-bottom:1rem}.not-found-page-container h2{font-size:2rem;margin-bottom:1rem}a button,.task-singlepage-container.not-found-page-container button{padding:.75rem 1.5rem;border-radius:.5rem;text-decoration:none;transition:background .2s}
