.badge{border:2px solid transparent;border-radius:50%;cursor:pointer;display:inline-block;height:16px;width:16px}.badge.active{border:2px solid #525252}.badge-green{background-color:#42b883}.badge-red{background-color:#ff6464}.badge-lime{background-color:#b6e6bd}.badge-grey{background-color:#c9d1d3}.badge-blue{background-color:#64c4ed}.badge-pink{background-color:#fbc}.badge-purple{background-color:#c355f5}.badge-black{background-color:#110133}@-webkit-keyframes out{0%{overflow:visible;-webkit-transform:scale(100%);transform:scale(100%)}to{overflow:hidden;-webkit-transform:scale(0);transform:scale(0)}}@keyframes out{0%{overflow:visible;-webkit-transform:scale(100%);transform:scale(100%)}to{overflow:hidden;-webkit-transform:scale(0);transform:scale(0)}}@-webkit-keyframes in{0%{overflow:hidden;-webkit-transform:scale(0);transform:scale(0)}to{overflow:visible;-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes in{0%{overflow:hidden;-webkit-transform:scale(0);transform:scale(0)}to{overflow:visible;-webkit-transform:scale(100%);transform:scale(100%)}}.add-popup{-webkit-animation:out 1s;animation:out 1s;background:#fff;border-radius:10px;bottom:20%;box-shadow:0 6px 10px rgba(0,0,0,.05);height:128px;left:4%;margin:15px 0 0 28px;overflow:hidden;padding:18px;position:absolute;-webkit-transform:scale(0);transform:scale(0);width:235px;z-index:1}.add-popup.open{-webkit-animation:in 1s;animation:in 1s;overflow:visible;-webkit-transform:scale(100%);transform:scale(100%)}.add-popup__input{box-sizing:border-box}.add-popup__list{cursor:pointer;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-around;padding:13px 0}.add-popup__button{height:37px;width:100%}.add-popup__button:disabled{opacity:.4}.add-popup__remove{background-color:transparent;border:none;cursor:pointer;outline:none;position:absolute;right:-10px;top:-10px}.add-popup__remove svg{height:20px;width:20px}.tasks{margin-left:30px;width:39em}.tasks h3{color:#96a8af}.tasks h3,.tasks__title{align-items:baseline;border-bottom:1px solid #f2f2f2;display:flex;font-family:Montserrat;font-size:32px;font-weight:700;line-height:39px;margin:0 auto;padding-bottom:20px}.tasks__title{color:#64c4ed}.tasks__title img{cursor:pointer;height:15px;margin-left:15px;opacity:0;transition:all .6s ease;width:15px}.tasks__title:hover img{color:#000;opacity:1}.tasks__list{margin:30px auto}.tasks__list .through{text-decoration:line-through}.tasks__list li{align-items:center;display:flex;width:100%}.tasks__list li .checkbox{display:flex;flex-direction:row;margin-right:15px}.tasks__list li .checkbox input{display:none}.tasks__list li .checkbox input:checked+label{background-color:#4dd599;border:#4dd599}.tasks__list li .checkbox input:checked+label:hover svg{opacity:1}.tasks__list li .checkbox input:checked+label:hover svg path{stroke:#fff}.tasks__list li .checkbox label{align-items:center;background-color:transparent;border:2px solid #e8e8e8;border-radius:30px;box-sizing:border-box;cursor:pointer;display:flex;height:20px;justify-content:center;transition:all .7s ease;width:20px}.tasks__list li .checkbox label svg{left:.5px;position:relative}.tasks__list li .checkbox:hover label{background-color:#f2f2f2;border-color:transparent}.tasks__list li .checkbox:hover label svg path{stroke:#b3b3b3}.tasks__plus-block{cursor:pointer;display:flex;margin-top:25px;opacity:.3;transition:opacity .7s ease-in-out}.tasks__plus-block:hover{opacity:.8}.tasks__input{border:none;cursor:default;max-width:100vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tasks__image-edit{cursor:pointer;height:14px;margin-left:auto;margin-right:10px;opacity:.3;transition:opacity .7s ease-in-out;width:14px}.tasks__image-edit:hover{opacity:.8}.tasks__image-delete{cursor:pointer;height:21px;opacity:.3;transition:opacity .7s ease-in-out;width:21px}.tasks__image-delete:hover{opacity:.8}.tasks__image-plus{height:19px;width:19px}.tasks__text{font-family:Lato;font-size:16px;font-weight:500;line-height:19px}.tasks__popup{display:flex;flex-direction:column}.tasks__popup-input{border:1px solid #efefef;margin:0 0 16px;padding:9px 0 8px 14px}.tasks__popup-input::-webkit-input-placeholder{color:#c7c7c7;font-family:Lato;font-size:14px}.tasks__popup-input::placeholder{color:#c7c7c7;font-family:Lato;font-size:14px}.tasks__popup-add{cursor:pointer;font-family:Lato;font-size:14px;height:34px;line-height:17px;margin-right:10px;width:145px}.tasks__popup-add:disabled{background:#9c9c9c;cursor:not-allowed}.tasks__popup-add:disabled:hover{background:#9c9c9c}.tasks__popup-cancel{background-color:#f4f6f8;border:none;border-radius:4px;color:#9c9c9c;cursor:pointer;font-family:Lato;font-size:14px;height:34px;line-height:17px;transition:background .7s ease;width:90px}.tasks__popup-cancel:hover{background:#e8ecf0}@media screen and (max-width:990px){.tasks{width:29em}}@media screen and (max-width:820px){.tasks{width:19em}}@media screen and (max-width:640px){.tasks{margin:0;width:14em}.tasks__title{font-size:22px;font-weight:700;line-height:29px;padding-bottom:15px}}.todo{grid-column-gap:60px;align-items:center;-webkit-column-gap:60px;column-gap:60px;display:grid;grid-template-columns:fit-content(30%) fit-content(60%)}.todo__list{padding-left:20px}.todo__list-header{color:#64c4ed;font-family:"cursive";font-size:30px;margin:0 auto 30px 15px;text-shadow:2px 2px 2px}.todo__list li{align-items:center;cursor:pointer;display:flex;flex-direction:row;flex-wrap:nowrap;margin-bottom:10px;padding-left:12px}.todo__list li:hover .todo__list-delete{opacity:.4;transition:opacity .6s ease}.todo__list li.active{background-color:#fff}.todo__list li .todo__list-delete{height:20px;margin:0 auto 0 0;opacity:0;width:20px}.todo__list li .todo__list-delete:hover{opacity:1}.todo__list li i{margin-right:10px}.todo__list li i.badge{display:inline-block;height:8px;width:8px}.todo__list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:125px}.todo__list li:last-child{color:#a99494;margin-top:40px}.todo__list li:last-child:hover{color:#000}.todo__list li:last-child:hover path{stroke:#000;transition:all .7s ease}@media screen and (max-width:640px){.todo{-webkit-column-gap:30px;column-gap:30px}.todo__list{padding-left:0}.todo li i{margin-right:4px}}@media screen and (max-width:440px){.todo{-webkit-column-gap:10px;column-gap:10px}.todo__list{padding-left:0}.todo li i{margin-right:4px}.todo li span{width:100px}}*{font-family:Roboto,-apple-system,system-ui,sans-serif;list-style:none;margin:0;outline:none;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.todo-app{border:1px solid #f1f1f1;border-radius:10px;box-shadow:10px 7px 10px #f4f6f8;font-size:16px;height:calc(100vh - 100px);left:50%;overflow:auto;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:calc(100vw - 40px)}.todo-app__sidebar{background-color:#f4f6f8;border-right:1px solid #fff1f1;height:100%;padding:60px 20px;width:200px}.todo-app li{margin:0;padding:5px;transition:all .7s ease}.todo-app li:hover{background-color:hsla(0,0%,100%,.5)}.todo-app .field{background:#fff;border:1px solid #efefef;border-radius:4px;padding:8px 12px;width:100%}.todo-app .field:focus{border-color:#c9c4c4}.todo-app .field::-webkit-input-placeholder{color:#c9c4c4}.todo-app .field::placeholder{color:#c9c4c4}.todo-app .button{background:#4dd599;border:none;border-radius:4px;color:#fff;cursor:pointer;outline:none;transition:all .5s ease}.todo-app .button:hover{background:#2ec180}.todo-app .button:active{background:#249865}@media screen and (max-width:740px){.todo-app__sidebar{font-size:12px;margin:0;padding:30px 5px;width:160px}.todo-app li{padding:2px}}@media screen and (max-width:390px){.todo-app__sidebar{width:140px}}
/*# sourceMappingURL=main.c378e8f5.css.map*/