header{height:70px;z-index:100}header,header h1{position:relative;width:100%}header h1{max-width:800px;margin:0 auto;line-height:70px;text-align:center;color:#fff}header h1 a.t-btn{position:absolute;right:10px;top:22px;width:30px;height:26px;cursor:pointer}header h1 span,header h1 span:after,header h1 span:before{position:absolute;left:0;width:30px;height:4px;content:"";background:#fff}header h1 span{top:11px}header h1 span:before{top:0;transform:translateY(-7px);transition:all .3s}header h1 span:after{transform:translateY(7px);transition:all .3s}.footer{position:fixed;bottom:0;width:100%;height:50px;line-height:50px;background:#f8f8f8;text-align:center;font-size:14px;border-top:1px solid #ddd}.footer,.footer a{color:#666}.event-add{position:relative;padding:30px 90px 30px 0;font-size:16px}.event-add .n-input{width:100%;height:40px;padding:7px 10px;line-height:26px;border:1px solid #c0ccda;border-radius:4px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);box-sizing:border-box;font-size:inherit}.event-add .n-input:focus{outline:none}.event-add .add-btn{position:absolute;right:0;top:30px;width:80px;height:40px;line-height:26px;color:#fff}.event-all{position:absolute;left:0;top:70px;right:0;bottom:0;transform:translateX(-100%);transition:transform .5s;overflow-Y:scroll;background:#fff}.event-all.event-all-show{transform:translateX(0)}.event-all::-webkit-scrollbar{width:0}.event-all .table-box{width:100%;max-width:1000px;margin:20px auto 70px}.event-all .table-box .event-table{width:100%;padding:0;border-left:1px solid #eee;border-top:1px solid #eee;border-spacing:0}.event-all .table-box .event-table td,.event-all .table-box .event-table th{position:relative;height:40px;min-width:0;padding:5px 10px;box-sizing:border-box;text-overflow:ellipsis;vertical-align:middle;border-right:1px solid #eee;border-bottom:1px solid #eee}.event-all .table-box .event-table button{padding:3px 7px;font-size:12px;color:#fff;border:0;margin:0 3px 3px 0}.event-all .table-box .event-table button.del-btn{background:#f57067!important}.event-all .table-box .edit-input{position:fixed;top:0;width:100%;max-width:1000px;margin:auto;height:60px;padding:10px 100px 10px 10px;box-sizing:border-box;z-index:10;transform:translateY(-260px);transition:transform .3s;background:#f3f3f3;border:1px solid #eee;border-radius:4px}.event-all .table-box .edit-input.edit-input-show{transform:translateY(0)}.event-all .table-box .edit-input input{float:left;width:100%;height:40px;padding:5px 10px;box-sizing:border-box;border:1px solid #ddd}.event-all .table-box .edit-input button{position:absolute;right:10px;width:80px;height:40px;color:#fff;border:0}.event-all .table-box .screen-box{position:relative;padding:0 0 10px 95px;height:35px}.event-all .table-box .screen-box .div-select{position:absolute;left:0;top:0;width:85px;height:35px;padding:0 10px;box-sizing:border-box;border:1px solid #eee;font-size:12px;color:#999;cursor:pointer}.event-all .table-box .screen-box .div-select:after{position:absolute;right:6px;top:12px;width:6px;height:6px;content:"";border-right:1px solid #999;border-bottom:1px solid #999;transform:rotate(45deg)}.event-all .table-box .screen-box .div-select.active .div-select-body{height:122px;border:1px solid #eee;box-shadow:0 0 1px #ddd}.event-all .table-box .screen-box .div-value{line-height:35px}.event-all .table-box .screen-box .div-select-body{position:absolute;left:0;top:38px;width:85px;height:0;padding-left:10px;line-height:30px;box-sizing:border-box;overflow:hidden;z-index:10;box-shadow:none;border:none;border-radius:3px;background:#fff;transition:all .3s}.event-all .table-box .screen-box .div-search{width:100%;height:35px;line-height:25px;padding:5px 10px;box-sizing:border-box;border:1px solid #eee;font-size:12px;font-family:Arial,Microsoft YaHei;color:#999}.event-content .event-tab{position:relative;height:44px;line-height:44px;padding-left:20px;border-bottom:1px solid #fff;box-sizing:border-box;color:#fff;cursor:pointer}.event-content .event-tab span{position:absolute;right:20px;top:15px;width:10px;height:10px;content:"";border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(135deg);transition:transform .3s}.event-content .event-tab span.close-span{transform:rotate(45deg)}.event-content .event-box{list-style:none;overflow:hidden;border-left:1px solid #eee;border-right:1px solid #eee;transition:height .3s}.event-content .event-box .event-list{position:relative;min-height:44px;line-height:25px;padding:10px 100px 10px 50px;box-sizing:border-box;border-bottom:1px solid #eee;color:#373e40}.event-content .event-box .event-list input[type=checkbox]{position:absolute;left:15px;top:12px;width:20px;height:20px}.event-content .event-box .event-list .cancel-btn{position:absolute;right:10px;top:7px;width:50px;height:30px;line-height:30px;padding:0;background:#fff;border:1px solid #c0ccda;color:#666;font-size:12px}.event-content .event-box .event-list .event-time{position:absolute;right:10px;top:0;line-height:44px;font-size:12px;color:#aaa}.event-content .event-box .event-list .event-delete{text-decoration:line-through;color:#999}.event-tools{position:fixed;top:0;left:0;bottom:0;width:250px;padding:100px 20px 30px;box-sizing:border-box;transform:translateX(-250px);transition:transform .3s;text-align:center;background:rgba(0,0,0,.5);font-size:16px;z-index:9}.event-tools.show-event-tools{transform:translateX(0)}.event-tools .tools-sidebar>li{line-height:60px}.event-tools .tools-btn{width:100px;height:40px;line-height:26px;color:#fff;transition:background .3s ease-in}.event-tools pre{white-space:pre-wrap;font-size:14px;font-family:arial,microsoft yahei;line-height:20px}.dialog{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;background:rgba(0,0,0,.4);z-index:999}.dialog .dialog-wrapper{position:absolute;left:50%;top:20%;width:100%;max-width:400px;transform:translateX(-50%);background:#fff;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.3);box-sizing:border-box;-webkit-animation:dialog .5s;animation:dialog .5s}.dialog .dialog-header{padding:20px 20px 0}.dialog .dialog-content{padding:30px 20px;color:#475669;font-size:18px;text-align:center}.dialog .dialog-content p{font-size:14px;margin-top:10px}.dialog .dialog-btns{padding:10px 20px 15px;text-align:right}.dialog .dialog-btns button{font-size:14px}.dialog .dialog-btns .cancel-btn{width:50px;background:#fff;border:1px solid #c0ccda;color:#1f2d3d}.dialog .dialog-btns .sure-btn{width:50px;margin-left:5px;color:#fff;transition:background .3s ease-in}@-webkit-keyframes dialog{0%{top:15%}}@keyframes dialog{0%{top:15%}}.theme-box{position:fixed;left:0;top:0;bottom:0;width:230px;padding:100px 20px 30px;box-sizing:border-box;transform:translateX(-250px);transition:transform .3s;background:#f8f8f8;z-index:9}.theme-box.theme-box-show{transform:translateX(0)}.theme-box::-webkit-scrollbar{width:0}.theme-box .theme{width:100%;padding:0 10px;max-width:800px;margin:auto;box-sizing:border-box}.theme-box .theme-title{margin:0 0 20px;font-size:20px}.theme-box .theme-list{position:relative;width:70px;height:36px;line-height:36px;padding-left:36px;border:1px solid #aaa;border-radius:3px;cursor:pointer;margin-bottom:10px;background:#fff}.theme-box .theme-list.theme-list-active{border:1px solid #e94545}.theme-box .theme-list span{position:absolute;left:8px;top:8px;width:20px;height:20px}.blue header{background:#00b0f0}.blue .event-tools .tools-btn{border:1px solid #00b0f0;background:#00b0f0}.blue .event-tools .tools-btn:hover{background:#08aae5}.blue .event-add .n-input:focus{border-color:#00b0f0}.blue .event-add .add-btn{border:1px solid #00b0f0;background:#00b0f0}.blue .event-add .add-btn:hover{background:#08aae5}.blue .event-content .event-tab{background:#00b0f0}.blue .event-content .event-box .event-list .cancel-btn:hover{border:1px solid #00b0f0;color:#00b0f0}.blue .event-all .table-box .edit-input button,.blue .event-all .table-box .event-table button{background:#00b0f0}.blue .dialog .dialog-btns .sure-btn{border:1px solid #00b0f0;background:#00b0f0}.blue .dialog .dialog-btns .sure-btn:hover{background:#08aae5}.green header{background:#00d1b2}.green .event-tools .tools-btn{border:1px solid #00d1b2;background:#00d1b2}.green .event-tools .tools-btn:hover{background:#18c2a9}.green .event-add .n-input:focus{border-color:#00d1b2}.green .event-add .add-btn{border:1px solid #00d1b2;background:#00d1b2}.green .event-add .add-btn:hover{background:#18c2a9}.green .event-content .event-tab{background:#00d1b2}.green .event-content .event-box .event-list .cancel-btn:hover{border:1px solid #00d1b2;color:#00d1b2}.green .event-all .table-box .edit-input button,.green .event-all .table-box .event-table button{background:#00d1b2}.green .dialog .dialog-btns .sure-btn{border:1px solid #00d1b2;background:#00d1b2}.green .dialog .dialog-btns .sure-btn:hover{background:#18c2a9}.orange header{background:#f4b976}.orange .event-tools .tools-btn{border:1px solid #f4b976;background:#f4b976}.orange .event-tools .tools-btn:hover{background:#e9ae6a}.orange .event-add .n-input:focus{border-color:#f4b976}.orange .event-add .add-btn{border:1px solid #f4b976;background:#f4b976}.orange .event-add .add-btn:hover{background:#e9ae6a}.orange .event-content .event-tab{background:#f4b976}.orange .event-content .event-box .event-list .cancel-btn:hover{border:1px solid #f4b976;color:#f4b976}.orange .event-all .table-box .edit-input button,.orange .event-all .table-box .event-table button{background:#f4b976}.orange .dialog .dialog-btns .sure-btn{border:1px solid #f4b976;background:#f4b976}.orange .dialog .dialog-btns .sure-btn:hover{background:#e9ae6a}.pink header{background:#f39894}.pink .event-tools .tools-btn{border:1px solid #f39894;background:#f39894}.pink .event-tools .tools-btn:hover{background:#d77672}.pink .event-add .n-input:focus{border-color:#f39894}.pink .event-add .add-btn{border:1px solid #f39894;background:#f39894}.pink .event-add .add-btn:hover{background:#d77672}.pink .event-content .event-tab{background:#f39894}.pink .event-content .event-box .event-list .cancel-btn:hover{border:1px solid #f39894;color:#f39894}.pink .event-all .table-box .edit-input button,.pink .event-all .table-box .event-table button{background:#f39894}.pink .dialog .dialog-btns .sure-btn{border:1px solid #f39894;background:#f39894}.pink .dialog .dialog-btns .sure-btn:hover{background:#d77672}.cyan header{background:#26b6be}.cyan .event-tools .tools-btn{border:1px solid #26b6be;background:#26b6be}.cyan .event-tools .tools-btn:hover{background:#1facb4}.cyan .event-add .n-input:focus{border-color:#26b6be}.cyan .event-add .add-btn{border:1px solid #26b6be;background:#26b6be}.cyan .event-add .add-btn:hover{background:#1facb4}.cyan .event-content .event-tab{background:#26b6be}.cyan .event-content .event-box .event-list .cancel-btn:hover{border:1px solid #26b6be;color:#26b6be}.cyan .event-all .table-box .edit-input button,.cyan .event-all .table-box .event-table button{background:#26b6be}.cyan .dialog .dialog-btns .sure-btn{border:1px solid #26b6be;background:#26b6be}.cyan .dialog .dialog-btns .sure-btn:hover{background:#1facb4}#notepad{font-size:16px;font-family:Helvetica Neue,Helvetica,microsoft yahei,arial,STHeiTi,sans-serif}#notepad .container{width:100%;padding:0 10px;max-width:800px;margin:auto;box-sizing:border-box}#notepad .container.hide{display:none}#notepad .dialog-enter-active,#notepad .dialog-leave-active{transition:opacity .3s}#notepad .dialog-enter,#notepad .dialog-leave-to{opacity:0}input,li,p,ul{margin:0;padding:0}button,input{-webkit-tap-highlight-color:transparent}input[type=text]{-webkit-appearance:none}button{padding:7px 0;outline:none;text-align:center;border-radius:4px;box-sizing:border-box;font-size:inherit;font-family:inherit;cursor:pointer}::-webkit-scrollbar{width:0}ul{list-style:none}