:root{--background-clr:#eee;--task-clr:#fff;--btn-clr:#b4b3b3;--hover-clr:#ddd;--hover-clr-2:#555;--border-radius:0.3rem;--sidebar-width:280px;--toggle-offset:15px}body{background-color:var(--background-clr);color:#333;font-family:Open Sans,sans-serif;height:100vh;margin:0;width:100%}li{list-style:none}input[type=checkbox].check-box,input[type=checkbox].sub-check{accent-color:var(--btn-clr);cursor:pointer}.sidebar{background-color:var(--task-clr);box-sizing:border-box;flex-shrink:0;height:100%;left:0;overflow-y:auto;padding:0 15px;position:fixed;top:0;transform:translateX(0);transition:transform .3s ease-in-out;width:var(--sidebar-width)}.sidebar.hidden{transform:translateX(-100%)}.sidebar.active-mobile{transform:translateX(0)}.title{align-items:center;display:flex;justify-content:space-between;user-select:none}.title h1{margin:10px 0}.sidebar h3{align-items:center;display:flex;justify-content:space-between;user-select:none}#sidebar-toggle{background:none;border:none;border-radius:var(--border-radius);cursor:pointer;display:flex;left:calc(var(--sidebar-width) - 46px);padding:5px;position:fixed;top:17px;transition:left .3s ease-in-out,transform .3s ease-in-out,background-color .25s ease;z-index:1002}.sidebar.hidden+#sidebar-toggle{left:var(--toggle-offset)}#new-project{background:none;background-color:var(--task-clr);border:none;border-radius:var(--border-radius);cursor:pointer;font-size:20px;transform:translateY(10%);transition:background-color .25s ease,transform .2s}#new-project:hover,#sidebar-toggle:hover{background-color:var(--hover-clr)}#new-project:active{transform:scale(.95)}.task-area{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;height:100%;margin-left:var(--sidebar-width);padding:40px 50px;transition:margin-left .3s ease-in-out;width:auto}.sidebar.hidden~.task-area{margin-left:0}.project{align-items:center;display:flex;flex-direction:column;min-height:fit-content;width:100%}.project-tab{border-radius:var(--border-radius);display:flex;font-size:14px;min-height:29px;padding:1px;user-select:none}.project-name{margin:5px}.project-menu-wrapper{margin-left:auto}.project-menu-btn{background-color:transparent;border:none;color:var(--task-clr);cursor:pointer}.edit-project-name{background-color:var(--btn-clr);border-color:hsla(0,0%,100%,0);border-radius:var(--border-radius);color:var(--task-clr);font-family:inherit;font-size:14px;outline:none;padding:3px;width:80%}.edit-project-name:focus-visible{outline:none}.greeting{margin-top:40px;text-align:center}.project-input{display:flex;gap:5px;height:25px;width:clamp(100px,90%,350px)}.project-task-list{display:flex;flex-direction:column;gap:5px;margin-top:25px;width:100%}.selected-project{background-color:var(--btn-clr);color:var(--task-clr)}.task-input{border:.1px solid rgba(0,0,0,.253);border-radius:var(--border-radius);flex-grow:1;min-width:100px;padding:5px}.add-task-button{background-color:var(--btn-clr);border:none;border-radius:var(--border-radius);color:var(--task-clr);cursor:pointer;min-width:70px;transition:transform .2s,background-color .25s ease}.add-task-button:hover{background-color:var(--hover-clr-2)}.add-task-button:active{transform:scale(.95)}.task{background-color:var(--task-clr);border-radius:var(--border-radius);display:flex;flex-direction:column;padding:5px}.sub-task,.task-info{align-items:center;display:flex;gap:5px;position:relative}.check-box{cursor:pointer}.task-name{flex:1}.project-menu-wrapper,.task-menu-wrapper{align-items:center;display:flex;position:relative}.task-menu-btn{background:none;border:none;cursor:pointer;font-size:18px;padding:4px}.project-menu,.task-menu{background-color:var(--task-clr);border-radius:var(--border-radius);box-shadow:0 2px 8px rgba(0,0,0,.3);display:none;margin:0;padding:5px;position:absolute;right:0;top:100%;z-index:10}.project-menu li,.task-menu li{color:#000;cursor:pointer;padding:6px 12px;white-space:nowrap}.project-menu li:hover,.task-menu li:hover{background-color:var(--hover-clr);border-radius:var(--border-radius);transition:background-color .25s ease}.subtask-arrow{cursor:pointer;display:inline-block;font-size:12px;margin-left:2px;transition:transform .2s ease-in-out;user-select:none}.is-expanded .subtask-arrow{transform:rotate(90deg)}.sub-task-list{display:block!important;max-height:0;overflow:hidden}.sub-task-list .sub-task{margin-left:30px}.task-edit{background-color:var(--task-clr);border:none;border-radius:var(--border-radius);box-shadow:0 4px 12px rgba(0,0,0,.25);display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr;max-height:315px;overflow-y:auto;padding:0}.dialog-left{background-color:var(--background-clr);gap:3px}.dialog-left,.dialog-right{display:flex;flex-direction:column;overflow-y:auto;padding:16px}.dialog-right{gap:30px}.task-edit p{margin:0}.dialog-name{align-items:center;display:flex;font-size:28px}.note{background-color:var(--background-clr);border:none;box-sizing:border-box;min-height:20px;overflow-y:hidden;resize:none;width:100%}.note:focus-visible{outline:none}.dialog-sub-tasks{align-items:start;flex-direction:column}.date-field,.dialog-sub-tasks,.priority,.time-field{display:flex;flex-direction:column;gap:5px}.date-field,.priority,.time-field{position:relative}.date-field input,.priority select,.time-field input{border:1.5px solid var(--btn-clr);border-radius:var(--border-radius);height:20px;padding:1px 5px}.priority select{background-color:var(--task-clr);height:24px}.date-field:after,.priority:after,.time-field:after{background-color:var(--btn-clr);bottom:-15px;content:"";height:1px;left:0;position:absolute;width:100%}.save-buttons{align-items:end;display:flex;gap:10px;height:40px;justify-content:space-between;width:100%}.save-buttons button{background-color:var(--btn-clr);border:none;border-radius:var(--border-radius);color:var(--task-clr);cursor:pointer;height:24px}.dialog-sub-tasks button{background-color:var(--background-clr);border:none;height:24px;margin-bottom:10px;user-select:none}.dialog-sub-tasks button:hover{background-color:var(--hover-clr);border-radius:var(--border-radius);transition:background-color .25s ease}.dialog-sub-tasks .sub-task{margin-left:10px}input[type=date],input[type=time]{appearance:none;-webkit-appearance:none;background-color:var(--task-clr);border:1px solid var(--btn-clr);border-radius:var(--border-radius);box-sizing:border-box;font-family:inherit;min-height:24px;padding:8px;width:100%}.dialog-right .date-field,.dialog-right .time-field{display:flex;flex-direction:column;width:100%}.empty-state{align-items:center;animation:fadeIn .6s ease-out;display:flex;flex-direction:column;height:80%;justify-content:center;padding:20px;text-align:center}.empty-state img{margin-bottom:2rem;opacity:.8;width:clamp(200px,40vw,400px)}.empty-state h2{color:#333;font-size:1.8rem;margin-bottom:.5rem}.empty-state p{color:#666;font-size:1.1rem;margin-bottom:1.5rem}.empty-state button{background-color:var(--btn-clr);border:none;border-radius:var(--border-radius);color:var(--task-clr);cursor:pointer;font-weight:700;padding:10px 20px;transition:transform .2s,background-color .25s ease}.empty-state button:hover{background-color:var(--hover-clr-2);transform:translateY(-2px)}.empty-state button:active{transform:scale(.95)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}#sidebar-overlay{background-color:rgba(0,0,0,.5);bottom:0;display:none;height:100vh;left:0;opacity:0;position:fixed;right:0;top:0;transition:opacity .3s ease;width:100vw;z-index:999}body.mobile-sidebar-open #sidebar-overlay{display:block;opacity:1}body.mobile-sidebar-open #sidebar-toggle{left:calc(var(--sidebar-width) - 46px)}@media (max-width:768px){.sidebar{transform:translateX(-100%);z-index:1001}#sidebar-toggle{left:var(--toggle-offset)}.task-area{margin-left:0!important}}@media (max-width:675px){.task-edit{display:flex;width:90%}.dialog-left{flex-grow:1}.save-buttons{justify-content:start}}@media (max-width:475px){input[type=checkbox].check-box,input[type=checkbox].sub-check{height:18px;width:18px}.task-edit{display:flex;flex-direction:column;height:100%;max-height:none;max-width:none;width:100%}.dialog-left{flex-grow:0}.dialog-left,.dialog-sub-tasks button,.note{background-color:var(--task-clr)}.dialog-right{flex-shrink:0;justify-content:center}.project-input{width:100%}input[type=date],input[type=time]{min-height:40px}.priority select{height:40px}}