body{font-family:Abril Fatface,cursive;background-color:beige}.container{position:relative;background-color:fff;border:2px solid;border-radius:10px;width:600px;margin:auto;margin-top:20vh;padding:0 60px 60px;box-sizing:border-box;text-align:center}.container .alert{display:none;position:absolute;width:300px;height:24px;right:150px;top:20px;text-align:center;font-family:Roboto,sans-serif;font-size:12px;box-sizing:border-box;background-color:#cdcdff;border-radius:10px;line-height:1.25rem}.container .alert--danger{display:block;background-color:#ff000025}.container .alert--success{display:block;background-color:#0080003b}.container h2{font-size:32px;margin-bottom:30px;margin-top:60px}.container h2 input{display:flex;text-align:center}.container .input_box input{font-family:Roboto,sans-serif;border:rgba(255,166,0,.681);border-bottom-left-radius:10px;width:300px;height:30px;background-color:#59ff002b}.container .input_box input:focus{background-color:#0080003b;outline:none}.container .input_box .submit_btn{font-family:Abril Fatface,cursive;width:80px;height:30px;border-color:#59ff002b;color:#222020;background-color:#4aa7172b;border-top-right-radius:10px}.container .input_box .submit_btn:hover{cursor:pointer}.container .input_box .submit_btn:active{background-color:#ffa600ae}.container .clear_btn{display:none;margin:auto;font-family:Abril Fatface,cursive;border:0;border-radius:4px;padding:5px 20px;background-color:#ff000025}.container .clear_btn:hover{cursor:pointer}.clear_btn .show-container{visibility:visible}.todo_container{padding:4px 16px;font-family:Roboto,sans-serif;display:block}.left_item{font-size:8px;font-family:Roboto,sans-serif;margin-bottom:10px;color:#7c7272}.todo_form{padding:4px 16px}.todo_list{width:400px;padding:4px 16px}.todo_item{font-family:Roboto,sans-serif;display:flex;justify-content:space-between;width:100%;align-items:center;font-size:14px;padding:2px 4px}.todo_item p:hover{cursor:move}.btn_container button{border:0;background-color:transparent;padding:0 3px;align-items:center}.btn_container button :hover{cursor:pointer}.btn_container .info_btn{color:gray}.btn_container .edit_btn{color:#19bd3a}.btn_container .edit_btn:active,.btn_container .delete_btn{color:#e21f1f}.btn_container .delete_btn:active{color:#19bd3a}.show_container{display:block!important}.overlay{position:fixed;overflow:auto;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);transition:opacity .2s;visibility:hidden;opacity:0}.overlay.light{background:rgba(255,255,255,.5)}.overlay .cancel{position:absolute;width:100%;height:100%;cursor:default}.overlay--target{visibility:visible;opacity:1;overflow:hidden}.overlay .popup{margin:250px auto;padding:28px 20px 20px;background:beige;border:1px solid #666;width:300px;height:100px;box-shadow:0 0 50px #00000080;position:relative}.light .overlay .popup{border-color:#aaa;box-shadow:0 2px 10px #00000040}.overlay .popup h2{text-align:center;margin-top:0;color:#666;font-family:Trebuchet MS,Tahoma,Arial,sans-serif}.overlay .popup .close{position:absolute;width:20px;height:20px;top:20px;right:20px;opacity:.8;transition:all .2s;font-size:24px;font-weight:700;text-decoration:none;color:#666}.overlay .popup .close:hover{opacity:1}.overlay .popup .content{font-family:Trebuchet MS,Tahoma,Arial,sans-serif;max-height:400px;font-size:12px;padding-top:20px;text-align:center}.overlay .popup .content p{margin:0 0 1em}.overlay .popup .content p:last-child{margin:0}