#todo-add-form{margin-top:40px;margin-left:6px;padding:0 30px;position:relative;display:flex;align-items:flex-end}#todo-add-input{font-size:15px;display:block;width:300px;border:none;background:transparent;border-bottom:1px solid #757575;padding:10px 0}#todo-add-input:focus{outline:none}.todoForm-label{color:#696969;font-size:15px;font-weight:700;position:absolute;pointer-events:none;left:30px;top:10px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}#todo-add-input:focus~.todoForm-label,#todo-add-input:valid~.todoForm-label{top:-8px;font-size:12px;color:#5468ff}.bar{position:relative;display:block;padding:0 30px}.bar:before,.bar:after{content:"";height:2px;width:0;bottom:1px;position:absolute;background:#5468ff;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}#todo-add-input:focus~.bar:before,#todo-add-input:focus~.bar:after{width:50%}.highlight{position:absolute;height:60%;width:70px;top:25%;left:10%;pointer-events:none;opacity:.5}#todo-add-input:focus~.highlight{animation:inputHighlight .3s ease;-webkit-animation:inputHighlight .3s ease;-moz-animation:inputHighlight .3s ease}@-webkit-keyframes inputHighlight{0%{background:#5468ff}to{width:0;background:transparent}}@-moz-keyframes inputHighlight{0%{background:#5468ff}to{width:0;background:transparent}}@keyframes inputHighlight{0%{background:#5468ff}to{width:0;background:transparent}}.form-submit-btn{background:transparent;border:none;outline:none;margin-left:20px;height:25px;width:25px;cursor:pointer}.btn-icon-add{height:100%;width:100%;color:#095bfe}.btn-icon-save{height:20px;width:20px;color:#095bfe}#todo-edit-form{position:relative;display:flex;justify-content:space-between;align-items:flex-end;margin:5px,0;height:30px;width:100%}#todo-edit-input{font-size:13px;display:block;width:265px;border:none;background:transparent;border-bottom:1px solid #757575;padding:5px 0;word-break:break-word}#todo-edit-input:focus{outline:none}#todo-edit-input:focus~.bar:before,#todo-edit-input:focus~.bar:after{width:50%}#todo-edit-input:focus~.highlight{animation:inputHighlight .3s ease;-webkit-animation:inputHighlight .3s ease;-moz-animation:inputHighlight .3s ease}.todo-container{display:flex;border-radius:10px;margin:15px 0;background:linear-gradient(90deg,#4279d9 0%,#ffffff 100%);box-shadow:0 2px 6px #0003,0 3px 4px #00000030}.todo-checkbox{align-self:center;margin:0 5px}.todo-text-btn{display:flex;justify-content:space-between;width:100%;padding:2px;margin:5px 0}.todo-text{font-size:13px;font-weight:700;width:270px;word-break:break-word;align-self:center}.todo-btn{display:flex;flex-direction:row;align-items:center}.btn-group{background:transparent;border:none;outline:none;height:20px;width:20px;cursor:pointer}.icon{height:100%;width:100%;color:#095bfe}.completed{text-decoration:line-through black;color:gray}.todoList-container{margin:30px 0;padding:5px;width:85%;height:300px;overflow-y:scroll}.app-container{display:flex;flex-direction:column;align-items:center;background:linear-gradient(90deg,#a5b9db 0%,#ffffff 100%);border-radius:10px;box-shadow:0 4px 8px #0003,0 6px 20px #00000030}.app-img-container{margin-top:30px;border:2px solid #095bfe;background-size:cover;border-radius:50%;width:100px;height:100px;box-shadow:0 2px 6px #0003,0 3px 4px #00000030}.app-img{height:100%;width:100%;border-radius:100%}*,:after,:before{padding:0;margin:0;box-sizing:border-box}html,body{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI" "Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;justify-content:center;align-items:center;background:linear-gradient(90deg,#213156 0%,#182848 100%)}