@import"https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box}.selector-for-some-widget{-webkit-box-sizing:content-box;box-sizing:content-box}html{height:100%}body{font-family:Noto Sans TC;margin:0 auto}img{width:100%;vertical-align:middle}.bg-logo{background-image:url(/react_todolist/assets/logo.0b3e7648-0b3e7648.svg);background-size:100%;font-size:3rem;padding:20px 0;width:100%;background-position:center;background-repeat:no-repeat;text-indent:-9999px}.todo-logo{max-width:20%;padding:0}.logo{max-width:20%}@media (max-width: 576px){.bg-logo{font-size:1vw;padding:4vh 0}.todo-logo{max-width:100%}}.vhContainer{height:100vh}.bg-yellow{background-color:#ffd370}.bg-half{background-image:linear-gradient(175deg,#FFD370 60%,#fff 40%)}.conatiner{margin:0 auto;padding:87px 32px}@media (max-width: 576px){.conatiner{padding:18px 32px}}.side{width:386px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (max-width: 576px){.side{max-width:100%;height:40%;display:flex;justify-content:space-between}.side .pic_hidden{display:none}.interactive{display:flex;align-items:center;width:100%;height:60%}.interactive>div{width:100%}.d-m-n{max-height:70%;width:auto;text-align:center}div.smaller{height:8%;width:100%;margin-bottom:5vh}div.bigger{height:92%;width:100%;display:flex;justify-content:center}}nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;padding:24px 32px 0}@media (max-width: 576px){nav{margin-bottom:16px}}nav h1 a{width:243px;height:39px;background:url(https://upload.cc/i1/2022/03/23/8vTzYG.png) no-repeat;display:block;text-indent:101%;overflow:hidden;white-space:nowrap}nav ul{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1rem}nav ul a{text-decoration:none;color:#333}@media (max-width: 576px){nav ul a{margin-left:0}}nav ul a:hover{color:#d87355}nav ul a span{font-weight:700}.todo_nav{display:flex;justify-content:space-between;align-items:center;max-width:100%}.todo_nav ul{width:20%;display:flex;align-items:center;justify-content:space-evenly}.todo_nav ul li:last-child{width:20%;text-align:center;display:flex;justify-content:center;align-items:center;cursor:pointer}@media (max-width: 576px){.todo_nav{display:flex;flex-direction:column;max-width:100%}.todo_nav ul{width:100%;display:flex;justify-content:space-evenly;align-items:center}.logout_btn{border:1px solid gray;border-radius:8px;padding:8px;background-color:#fff;cursor:pointer}}.todo_sm{overflow:hidden;text-overflow:ellipsis;width:70%;text-align:center}.todo_sm span{line-height:1.5}.todo_sm a{cursor:default}@media (max-width: 576px){.todo_sm a:active,.todo_sm a:hover{color:#3c3c3c}}.formControls{margin-left:100px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media (max-width: 576px){.formControls{margin:0;width:100%}}.formControls .formControls_txt{font-size:1.5rem;font-weight:700;margin-bottom:24px}@media (max-width: 576px){.formControls .formControls_txt{font-size:6vw;text-align:center}}.formControls .formControls_label{font-size:.875rem;font-weight:700;margin:16px 0 4px;width:100%}@media (max-width: 576px){.formControls .formControls_label{font-size:5vw;font-weight:700;margin:20px 0 10px}}.formControls .formControls_input{font-weight:400;border:none;border-radius:10px;width:304px;padding:12px 16px;margin:4px 0}.formControls .formControls_input:focus{outline:3px solid #fff}.formControls .formControls_input::-webkit-input-placeholder{color:#9f9a91}.formControls .formControls_input:-ms-input-placeholder{color:#9f9a91}.formControls .formControls_input::-ms-input-placeholder{color:#9f9a91}.formControls .formControls_input::placeholder{color:#9f9a91}@media (max-width: 576px){.formControls .formControls_input{width:100%;font-size:4vw}}.formControls .formControls_btnSubmit{width:128px;height:48px;border:none;border-radius:10px;background:#333333;color:#fff;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;margin:24px 0;font-weight:700;cursor:pointer;text-align:center;font-size:1rem}.formControls a{text-decoration:none}.formControls span{margin:4px 0 16px;color:#d87355;font-size:.875rem}.formControls .formControls_btnLink{display:block;color:#333;font-weight:700;text-decoration:none;text-align:center;cursor:pointer}.formControls .btn_dis{background-color:#aaa;cursor:not-allowed}.homePage{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;width:800px}@media (max-width: 576px){.homePage{display:flex;justify-content:space-between;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0 auto;padding:24px 30px}}.todoListPage{padding:16px 32px}@media (max-width: 576px){.todoListPage{background-image:linear-gradient(175deg,#FFD370 100%,#fff 0%);max-width:100%}}.todoList_Content{width:500px;margin:0 auto 20px}@media (max-width: 576px){.todoList_Content{width:100%}}.inputBox{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;margin-bottom:16px;-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,.15);box-shadow:0 0 15px #00000026}.inputBox input{background:#fff;border:none;border-radius:10px;position:relative;width:100%;height:47px;font-size:1rem;padding-left:16px;padding-right:3.5rem}@media (max-width: 576px){.inputBox input{width:100%}}.inputBox a{display:block;align-items:center;width:40px;height:40px;position:absolute;background:#333333;color:#fff;font-size:20px;text-decoration:none;text-align:center;border-radius:10px;top:4px;right:4px;padding:10px;cursor:pointer}.nothing{width:100%;text-align:center;border:solid 1px gray;border-radius:10px;background-color:#cecece;margin-bottom:10px;padding:40px}.todoList_list{background:#fff;border-radius:10px;-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,.15);box-shadow:0 0 15px #00000026}.todoList_list .todoList_tab{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.todoList_list .todoList_tab li{width:100%}.todoList_list .todoList_tab a{display:block;color:#9f9a91;text-decoration:none;line-height:20px;font-weight:700;text-align:center;padding:16px;border-bottom:2px solid #efefef;cursor:pointer}.todoList_list .todoList_tab .active{color:#333;border-bottom:2px solid #333333}.todoList_list .todoList_items{padding:20px}.todoList_list .todoList_items .todoList_item{margin-bottom:8px}.todoList_item>li>a{cursor:pointer}.todoList_list .todoList_items .todoList_label{width:92%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-bottom:15px;color:#333;line-height:20.27px;cursor:pointer}@media (max-width: 576px){.todoList_list .todoList_items .todoList_label{width:87%}.todoList_list .todoList_items .todoList_label span{width:80%}}.todoList_list .todoList_items .todoList_label span{overflow:hidden;text-overflow:ellipsis;width:90%}.todoList_item li{border-bottom:1px solid #e5e5e5;display:flex;justify-content:space-between;align-items:center}.todoList_list .todoList_items .todoList_input{width:20px;height:20px;border:1px solid #9F9A91;border-radius:5px;margin-right:16px}.todoList_list .todoList_items .todoList_input:checked~span{color:#9f9a91;text-decoration:line-through;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.todoList_list .todoList_items li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:17px}.todoList_list .todoList_items li a{display:block;font-size:20px;color:#333;opacity:0;padding:10px 10px 20px}.todoList_list .todoList_items li:hover a{opacity:1}@media (max-width: 576px){.todoList_list .todoList_items li a{opacity:1}}.todoList_list .todoList_statistics{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.todoList_list .todoList_statistics p{color:#333;font-size:.875rem}.todoList_list .todoList_statistics a{font-size:.875rem}.todoList_list .todoList_statistics a.off{color:#e5e3e0;cursor:not-allowed}.todoList_list .todoList_statistics a.on{color:#3c3c3c;text-decoration:none;cursor:pointer}.todoList_list .todoList_statistics a.on:active{color:#9f9a91}