.dropdownEditTodo.open:after,.dropdownEditTodo.open:before{position:absolute;content:"";top:32px;border-bottom:1px solid #343a40;width:18px;height:10px;z-index:1}.createTodoContent>label>div>input,.createTodoContent>label>div>textarea{display:block;width:250px;margin:5px 25px 15px;border:1px solid #343a40;font-size:17px;padding-left:10px;outline:none}.footerTodoApp,.todoTitle{background-color:#343a40;margin-bottom:0;color:#fff;padding-left:40px;height:8vh;line-height:8vh}*{-webkit-box-sizing:border-box;box-sizing:border-box}body,html{margin:0;font-family:Muli,sans-serif;font-size:18px}ul{margin:0;padding:0;list-style:none}.todoTitle{margin-top:0}main{max-width:1200px;margin:0 auto;min-height:calc(84vh - 20px)}.headOfTodo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:20px 40px 100px}.searchByTittle{position:relative}.searchByTittle:before{position:absolute;content:"🔍";left:5px;top:12px;line-height:14px}.searchByTittle>input{padding:5px 5px 5px 30px;border:1px solid #343a40;height:40px;font-size:20px;outline:none}.dropdownList{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.markOfDoneList,.todosPriority{width:150px;position:relative}.markOfDoneList>button,.todosPriority>button{width:100%;position:relative;height:40px;font-size:20px}.markOfDoneList>button:hover,.todosPriority>button:hover{cursor:pointer}.markOfDoneList>button:before,.todosPriority>button:before{content:"▼";position:absolute;right:10px}.markOfDoneList>ul,.todosPriority>ul{display:none}.markOfDoneList.open>ul,.todosPriority.open>ul{width:150px;border:1px solid #343a40;border-top:none;display:block;position:absolute}.markOfDoneList.open>ul>li,.todosPriority.open>ul>li{padding-left:20px;background-color:#fff}.markOfDoneList.open>ul>li:hover,.todosPriority.open>ul>li:hover{cursor:pointer;background-color:#add8e6}.btnGreateTodo{background-color:#007bff;border:none;width:200px;height:40px;border-radius:10px;outline:none;color:#fff;font-size:20px}.btnGreateTodo:hover{cursor:pointer;background-color:rgba(40,167,69,.8);-webkit-transition:.3s;-o-transition:.3s;transition:.3s}.modalWindow{display:none}.modalWindow.show{display:block;position:fixed;z-index:5;top:0;left:0;bottom:0;right:0;background-color:rgba(0,0,0,.8)}.createTodoContent{padding-top:20px;width:300px;height:450px;border-radius:10px;background-color:#fff;position:absolute;top:50%;left:50%;margin-right:-50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.createTodoContent>label{margin-left:25px;margin-top:10px}.createTodoContent>label>div .emptyTitle{color:red;margin:0;padding-left:25px}.createTodoContent>label>div>input{height:35px}.createTodoContent>label>div>textarea{resize:none;height:70px;padding-top:10px}.createTodoPriority{margin-left:25px;width:250px;text-transform:capitalize}.createTodoPriority>button{width:100%;position:relative;text-transform:capitalize;text-align:left;padding-left:20px;height:30px;font-size:18px}.createTodoPriority>button:hover{cursor:pointer}.createTodoPriority>button:before{position:absolute;content:"▼";top:1px;right:5px}.createTodoPriority>ul{display:none}.createTodoPriority.open>ul{display:block;margin:0 auto 70px 0;border:1px solid #343a40;border-top:none;width:100%}.createTodoPriority.open>ul>li{padding-left:20px}.createTodoPriority.open>ul>li:hover{cursor:pointer;background-color:#007bff}.createTodoPriority>p{margin:5px auto}.btncreateTodoContent{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;position:absolute;bottom:20px;width:100%}.btncreateTodoContent>button{width:110px;height:35px;border-radius:10px;background-color:#007bff;color:#fff;border:none;outline:none}.btncreateTodoContent>button:hover{cursor:pointer;background-color:red;-webkit-transition:.3s;-o-transition:.3s;transition:.3s}.btncreateTodoContent>button.saveTodo:hover{background-color:#28a745}.todoList{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;list-style:none;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:50px;margin-left:40px}.todoItem{display:none;-webkit-animation:doneAnimation 1.2s ease;animation:doneAnimation 1.2s ease}.todoItem.show{display:block;position:relative;border:1px solid #343a40;width:250px;height:300px;margin-bottom:20px;margin-right:30px;word-wrap:break-word}.todoItem.done{background-color:rgba(40,167,69,.8);-webkit-animation:doneAnimation 1.2s ease;animation:doneAnimation 1.2s ease}.todoItem.done button{background-color:rgba(40,167,69,.1)}.todoItem.done:before{position:absolute;content:"✔";top:-5px;right:0;background-color:#fff;height:14px;width:14px;line-height:14px;-webkit-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4);color:green;border:1px solid green}.todoItem>h2{height:50px;font-size:18px}.todoItem>h2,.todoItem>p{padding-left:20px;overflow:auto}.todoItem>p{height:140px}.todoFotter{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;bottom:30px;width:100%;height:28px}.todoPriority{border:3px dashed #343a40;border-radius:10px;padding:15px;line-height:0}.dropdownEditTodo{position:relative;width:40px}.dropdownEditTodo>button{width:100%;background-color:#fff;border:1px solid #000;border-radius:10px;height:36px;outline:none}.dropdownEditTodo>button:hover{cursor:pointer;background-color:rgba(40,167,69,.8);-webkit-transition:.3s;-o-transition:.3s;transition:.3s}.dropdownEditTodo.open>ul{display:block;position:absolute;top:46px;left:-40px;width:80px;border:1px solid #343a40;text-align:center;background-color:#fff;z-index:2}.dropdownEditTodo.open:before{left:20px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.dropdownEditTodo.open:after{left:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.dropdownEditTodo>ul{display:none}.dropdownEditTodo>ul>li:hover{cursor:pointer;background-color:#007bff}.footerTodoApp{margin:0}@-webkit-keyframes doneAnimation{0%{opacity:0}to{opacity:1}}@keyframes doneAnimation{0%{opacity:0}to{opacity:1}}@media (max-width:900px){.headOfTodo{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.headOfTodo .markOfDoneList{margin-top:20px;margin-right:10px}.headOfTodo .todosPriority{margin-top:20px;margin-left:10px}.headOfTodo .btnGreateTodo{margin-top:100px}.todoList{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}