.addtodo{background-color:#ededed;padding:30px;width:520px;height:170px;border-radius:6px;position:relative}.addtodo--input{width:456px;height:55px;border-radius:5px;border:none;padding:20px 0 20px 30px;margin-top:30px}.addtodo--input:focus{outline:none}.addtodo--btn{width:45px;height:40px;background:#00B3DB;border:none;border-radius:5px;color:#fff;font-size:16px;font-weight:700;position:absolute;right:45px;top:92px;cursor:pointer;transition:all .4s;pointer-events:none;opacity:.4}.addtodo--btn.active{pointer-events:all;opacity:1}.item{width:95%;background-color:#fff;padding:20px 36px;border-radius:6px;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.item:first-child{margin-top:22px}.item--checkbox{width:66px;height:33px;border:none}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{display:none}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ececec;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#00b3db;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#00b3db12}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.item--message{color:#5f9ea0;margin-top:50px;font-weight:400;text-align:center}.item--title{overflow-wrap:break-word}.todo--list-item{display:inline-block;margin-right:10px}.todo--list-enter-active,.todo--list-leave-active{transition:all .4s ease}.todo--list-enter-from,.todo--list-leave-to{opacity:0;transform:translate(-130px)}.todo--list-move{transition:transform .4s ease}.mytodos{width:640px;min-height:270px;max-height:600px;background-color:#ededed;border-radius:6px;position:relative;padding:33px 33px 10px}.mytodos--title--search{display:flex;justify-content:space-between;align-items:end}.mytodos--input{border-radius:5px;border:none;padding:13px 0 13px 30px;width:160px;height:40px;font-size:16px}.mytodos--input:focus{outline:none}.mytodos--nav{margin-top:30px}.mytodos--nav span{font-size:15px}.mytodos--nav button{border:none;cursor:pointer;font-size:15px;padding:0 5px;transition:.3s all}.mytodos--nav button:hover{font-weight:700;color:#00b3db}.todo--items{max-height:450px;width:608px;overflow:auto}.todo--items::-webkit-scrollbar{width:4px}.todo--items::-webkit-scrollbar-track{border-radius:40%}.todo--items::-webkit-scrollbar-thumb{background-color:#00b3db;border-radius:40px}.footer{width:100%;height:50px;background:linear-gradient(0deg,rgba(237,237,237,.7) 40%,rgba(255,255,255,0) 90%);position:absolute;bottom:0;right:0;pointer-events:none}*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif;font-size:20px}h1{cursor:default;max-width:430px}.header--blue{width:100%;background:#00B3DB;height:75px}.main{padding-top:50px;display:flex;justify-content:center;align-items:center}.main--title{font-size:45px}.main--content{width:1200px}.main--components{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:60px}@media (max-width: 1215px){.main--content{width:640px;margin:0 15px 5px}.main--components{justify-content:center}.addtodo{width:640px;margin-bottom:20px}}@media (max-width: 700px){.header--blue{height:55px}.main{padding-top:40px}.main--title{font-size:30px}.main--components{margin-top:30px}.main--content,.addtodo{width:345px}.addtodo{padding:25px}.addtodo--input{width:300px}.addtodo--btn{right:30px;top:86px}.addtodo--input{padding-left:20px;font-size:16px}.mytodos{width:345px;padding:40px 15px 0;height:485px}.mytodos--input{width:100%;margin-top:30px}.mytodos--nav{display:none}.todo--items{max-height:335px;margin-top:15px;width:105%}.item{padding:30px 25px}.item--title{font-size:14px;max-width:200px}.mytodos--title--search{display:block}}