.form_row{display:flex;flex-direction:column;margin-top:10px;gap:5px}.error{color:#b12424}.login_container{width:80%;margin:auto;min-width:300px}.nav_login{list-style:none;display:flex}.nav_login li{cursor:pointer;padding:10px;background-color:#191919}.nav_login li:first-child{border-radius:10px 0 0 0}.nav_login li:nth-child(2){border-radius:0 10px 0 0}.nav_login li.active{background-color:#535353}.form_container{background-color:#242424;border-radius:0 10px 10px 10px;padding:10px;height:400px;width:100%;margin:auto;position:relative;display:flex;justify-content:center;align-items:center}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease;position:absolute}.fade-enter-from,.fade-leave-to{opacity:0}.container_form,.container_signUp{width:50%;min-width:250px;height:calc(100% - 20px);display:flex;flex-direction:column;justify-content:center}.form_row input{padding:5px;border-radius:5px;outline:none;border:none}.form_row button,.title_login{margin-bottom:10px}.form_row button{padding:5px;border-radius:5px;outline:none;border:none;background-color:var(--blue);font-size:16px;width:50%;cursor:pointer;margin-top:10px}.container_todo{width:100%;background-color:#242424;padding:10px;border-radius:0 0 10px 10px}.newTodo_container{display:flex}.newTodo_field{padding:10px 10px 10px 0;font-size:20px;outline:none;background:transparent;border:none;color:#f1f1f1;width:calc(100% - 34px)}.field_group{display:flex;align-items:center;margin:10px 0 10px 0}.field_group input{margin-right:10px}.field_group input:checked{margin-right:10px!important}.filters{width:100%;display:flex;justify-content:space-between;align-content:center;margin:20px 0 0}.filters a{color:#f1f1f1;background-color:#191919;text-decoration:none;display:inline-block;transition:all .3s;padding:10px;flex:1 1 0;text-align:center}.filters a.active{background-color:#535353}.filters a:first-child{border-top-left-radius:10px}.filters a:nth-child(3){border-top-right-radius:10px}.todos_list{list-style:none;padding:20px 0 0;background-color:#191919;border-radius:0 0 10px 10px;margin-bottom:10px}.todos_list li{padding:10px;display:flex;align-items:center;gap:10px;position:relative}.delete_todo{position:absolute;right:10px;color:grey}.todos_list li span{display:inline-block;width:-webkit-max-content;width:-moz-max-content;width:max-content;position:relative}.todos_list li span:before{content:"";width:100%;height:4px;position:absolute;top:calc(50% - 1px);background-color:#191919;transform:scaleX(0);transform-origin:left;transition:transform .3s}.todos_list li span.completed{opacity:.5}.todos_list li span.completed:before{transform:scaleX(1);transition:transform .3s}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;border-radius:4px;height:24px;width:24px;background:transparent;border:1px solid grey;transition:all .3s;position:relative;z-index:12;overflow:hidden}input[type=checkbox]:before{font-family:FontAwesome;content:"\e876";display:block;color:grey;font-size:25px;position:absolute;top:-4px;width:auto;overflow:hidden;transition:all .2s ease;z-index:9}input[type=checkbox]:after{content:"";position:absolute;display:block;width:100%;height:100%;background:#242424;z-index:10;transition:all .1s}.todos_list input[type=checkbox]:after{background-color:#191919}input[type=checkbox]:checked{background:transparent;margin:0;position:relative;overflow:hidden}input[type=checkbox]:checked:before{font-family:FontAwesome;content:"\f00c";display:block;color:grey;font-size:25px;position:absolute;top:-4px;width:auto;overflow:hidden;z-index:9}input[type=checkbox]:checked:after{content:"";position:absolute;display:block;width:100%;height:100%;background:#333;z-index:10;transform:translateX(110%)}.edit{width:calc(100% - 80px);position:absolute;padding:5px;margin-left:34px;background:#202020;border:none;outline:none;color:#f1f1f1;font-size:25px;display:none;border:1px solid #f1f1f1;transition:all .3s}.editing .edit{display:block}:root{--blue:#00a2d4}*,:after,:before{margin:0;padding:0;box-sizing:border-box}body,html{overflow-x:hidden}body{background:#303030;color:#f1f1f1;font-family:Helvetica,sans-serif;padding-bottom:100px}header{margin:50px 0 50px;display:grid;grid-template-columns:repeat(3,1fr)}h1,header{width:100%}h1{text-align:center;grid-column:2/3;font-size:clamp(45px,7vw,80px)}.btn{border:none;width:30px;height:30px;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer}.btn.btn-1{background-color:#00a2d4}.btn.btn-1 span{color:#f1f1f1}.userName-logout{padding-right:10px;width:100%;grid-column:3/4}.userName-logout p{width:100%;line-height:50px;display:flex;justify-content:flex-end;gap:10px;align-items:center;font-size:20px;text-transform:capitalize}.userName .initiale{display:inline-block;width:40px;height:40px;border-radius:50%;background-color:var(--blue);line-height:40px;text-align:center;font-size:30px;text-transform:uppercase}.logout{cursor:pointer}.list_title{position:relative;background-color:#242424;padding:10px 10px 0 10px;border-radius:10px 10px 0 0;font-size:25px}.list_title a{position:absolute;right:10px;color:grey}.todoList_container{width:100%;display:flex;justify-content:space-evenly;gap:25px;row-gap:50px;flex-wrap:wrap}.todoList_item{width:clamp(320px,90%,500px)}.addTodoList_container{display:flex;align-items:center;justify-content:center;margin:50px 0 50px}.newTodoList_field{display:block;padding:10px 10px 10px 0;font-size:20px;outline:none;background:transparent;border:none;color:#f1f1f1;width:clamp(300px,50%,500px);border-bottom:1px solid grey}.fadeModal-enter-active,.fadeModal-leave-active{transition:opacity .3s ease}.fadeModal-enter-from,.fadeModal-leave-to{opacity:0}@media screen and (max-width:730px){header{grid-template-columns:repeat(1,1fr);row-gap:50px}.userName-logout,h1{grid-column:1/2}}