@import url(https://fonts.googleapis.com/css?family=Montserrat:400,400i,700);
body{color:#00f}
html{line-height:1.4;font-size:15px;color:#444;height:100%}body{font-family:Montserrat,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}a,aside,div,footer,h1,h2,h3,h4,h5,h6,input,label,p,select{margin:0;padding:0}a{text-decoration:none}li,ul{list-style-type:none;margin:0;padding:0}input{font-family:Montserrat,sans-serif}::-moz-focus-inner,::-moz-focus-outer{border:0;padding:0}button:active{margin:0;padding:0}#iconNotContent{display:block;margin:0 auto;width:100px;height:100px}#bgSite{width:100%;height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;padding-top:70px;background-size:100% 100%;background-position:left left;background-repeat:no-repeat}body{min-height:100vh;overflow-y:scroll}
#mainWrap{position:absolute;top:0;left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#mainWrap,#wrapTodoList{width:100%;background-color:none}#wrapTodoList{padding:0;border-radius:3px;position:relative}#wrapTodoList .todoApp__topBlock{position:fixed;z-index:100;width:100%;-webkit-box-shadow:0 0 7px #777;box-shadow:0 0 7px #777}#wrapTodoList .todoApp__searchAndFilter{background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:40px;padding:0 20px 50px}#wrapTodoList .todoApp__maskAdd{width:60px;height:40px;background-color:grey;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff;font-size:30px;font-weight:700;background-color:#00abdc;margin-right:10px;border-radius:3px;cursor:pointer;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}#wrapTodoList .todoApp__maskAdd:hover{-webkit-box-shadow:0 0 2px #00abdc;box-shadow:0 0 2px #00abdc;background-color:#00d344}#wrapTodoList .todoApp__maskAdd img{width:25px;height:25px}#wrapTodoList .todoApp__SearchAndAdd{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:0 20px}#wrapTodoList .todoApp__filter{width:330px}#wrapTodoList .todoApp__iconSetting{width:40px;height:40px;background-color:none;position:fixed;left:20px;top:123px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;cursor:pointer;margin:0;padding:0;border-radius:10px;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s}#wrapTodoList .todoApp__iconSetting img{width:40px;height:40px;opacity:.7;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s}#wrapTodoList .todoApp__iconSetting:hover img{opacity:1}#wrapTodoList .todoApp__maskWrapSetting{background-color:none;width:100%;height:100vh;top:0;left:0;position:fixed;z-index:100;display:none}#wrapTodoList .todoApp__setting{width:700px;-webkit-box-shadow:0 0 10px #444;box-shadow:0 0 10px #444;position:fixed;left:-700px;top:100px;overflow:hidden;z-index:200}#wrapTodoList .todoApp__wrapSetting{width:100%;min-height:400px;background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}#wrapTodoList .todoApp__wrapSetting-work{position:relative;width:640px;padding:20px}#wrapTodoList .todoApp__wrapSetting-title{font-size:16px;color:#777}#wrapTodoList .todoApp__settingBg{padding:10px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}#wrapTodoList .todoApp__settingBg-block{margin:0 15px 15px 0;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #ccc;cursor:pointer;opacity:.8;-webkit-transition:.2s;-o-transition:.2s;transition:.2s}#wrapTodoList .todoApp__settingBg-block:hover{opacity:1}#wrapTodoList .todoApp__settingBg-block img{width:100px;height:54px}#wrapTodoList .todoApp__title{background-color:#fff;padding:0 20px}#wrapTodoList .todoApp__title span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#wrapTodoList .todoApp__title span h1{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:25px;font-weight:400;color:#00abdc}#wrapTodoList .todoApp__title span h1 span{font-size:16px;color:#777;padding-left:10px}#wrapTodoList .todoApp__title span p{display:block;color:#434343}#wrapTodoList .todoApp__search{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:40px}#wrapTodoList .todoApp__search input{width:100%;height:40px;background-color:#fff;font-size:16px;border:1px solid #d3d3d3;border-radius:3px;padding:0 20px;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s;color:#434343;outline:none}#wrapTodoList .todoApp__filter--but,#wrapTodoList .todoApp__filter--but button,#wrapTodoList .todoApp__search input{display:-webkit-box;display:-ms-flexbox;display:flex}#wrapTodoList .todoApp__filter--but button{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:40px;text-align:center;background-color:#515151;border:none;width:100px;margin-left:10px;border-radius:3px;cursor:pointer;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s;color:#fff}#wrapTodoList .todoApp__filter--but button:hover{opacity:.8}#wrapTodoList .todoApp__filter--but .todoApp__filter--butAct{background-color:#00abdc;color:#fff}#wrapTodoList .todoApp__filter--but .todoApp__filter--butAct:hover{opacity:1}#wrapTodoList .todoApp__wrapList{background-color:none;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;top:100px;padding-bottom:100px}#wrapTodoList .todoApp__list{width:860px;margin-top:30px;min-height:100px;background-color:#fff;padding:30px;border-radius:3px}#wrapTodoList .todoApp__list li{background-color:#fff;border-radius:3px;border:1px solid #d3d3d3;margin-bottom:12px;height:40px;padding:0 0 0 15px;color:#434343;font-size:17px}#wrapTodoList .todoApp__list-wrap,#wrapTodoList .todoApp__list li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}#wrapTodoList .todoApp__list-wrap{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}#wrapTodoList .todoApp__list-task{display:block}#wrapTodoList .todoApp__list-taskDone{text-decoration:line-through;color:rgba(34,6,6,.84)}#wrapTodoList .todoApp__list-important{font-weight:700;color:#00abdc}#wrapTodoList .todoApp__list-buts{display:block}#wrapTodoList .todoApp__list-buts button{border:none;width:50px;height:40px;cursor:pointer}#wrapTodoList .todoApp__list-buts button:hover{opacity:.8}#wrapTodoList .todoApp__list-buts-important{background-color:#00abdc}#wrapTodoList .todoApp__list-buts-dontImportant{background-color:#515151}#wrapTodoList .todoApp__list-buts-delite{background-color:#fd1b1f}#wrapTodoList .todoApp .fa-exclamation,#wrapTodoList .todoApp .fa-trash-o{color:#fff}#wrapTodoList .todoApp__nullList{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:80%;margin:0 auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#wrapTodoList .todoApp__nullList p{font-size:18px;color:#444}#wrapTodoList .todoApp__nullList--img span{margin-right:30px}#wrapTodoList .todoApp__nullList--img span,#wrapTodoList .todoApp__nullList--img span img{width:60px;height:60px;background-color:#fff}#wrapTodoList .todoApp__addTask form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:40px;border-radius:3px;margin:0}#wrapTodoList .todoApp__addTask form input{display:block;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:40px;border:1px solid #d3d3d3;padding:0 20px;font-size:16px;background-color:#fff;outline:none}#wrapTodoList .todoApp__addTask form button{display:block;width:100px;height:40px;border:1px solid #d3d3d3;border-left:none;font-size:16px;color:#fff;cursor:pointer;background-color:#00d344}#wrapTodoList .todoApp__addTask form button:hover{opacity:.8}.todoApp__inputSizeTask{width:100%}.todoApp__inputSizeTask input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:25px;background:#d3d3d3;outline:none;opacity:.7;-webkit-transition:.2s;-webkit-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s;margin-top:10px}.todoApp__inputSizeTask input:hover{opacity:1}.todoApp__inputSizeTask input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;background:#00abdc;cursor:pointer;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s}.todoApp__inputSizeTask input::-webkit-slider-thumb:hover{background-color:#00d344}.todoApp__inputSizeTask input::-moz-range-thumb{width:25px;height:25px;background:#00abdc;cursor:pointer;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s}.todoApp__inputSizeTask input::-moz-range-thumb:hover{background-color:#00d344}