.todo-list-item{align-items:center;box-sizing:border-box;display:flex;justify-content:space-between;margin-bottom:10px;min-height:43px;padding:10px}.todo-list-item:nth-child(3n+1){background-color:rgba(0,255,255,.3);border:1px solid aqua}.todo-list-item:nth-child(3n+2){background-color:rgba(255,0,140,.3);border:1px solid #ff008c}.todo-list-item:nth-child(3n+3){background-color:rgba(155,90,219,.3);border:1px solid #9b5adb}.todo-list-item.completed{opacity:.2}@media(max-width:576px){.todo-list-item{height:84px}}.todo-list-item-text{color:#fff;font-family:Roboto,sans-serif;font-weight:100;letter-spacing:1px;line-height:1.2;margin-right:20px;overflow-wrap:break-word;text-transform:uppercase;width:70%}@media(max-width:576px){.todo-list-item-text{font-size:14px;width:85%}}.todo-list-item-btns{display:flex;justify-content:space-between;width:30%}@media(max-width:576px){.todo-list-item-btns{align-items:flex-end;flex-direction:column;width:15%}}.todo-list-item .todo-list-cancel-btn,.todo-list-item .todo-list-edit-btn,.todo-list-item .todo-list-remove-btn,.todo-list-item .todo-list-toggle-btn,.todo-list-item .todo-list-update-btn{background-color:transparent;border:none;color:#fff;cursor:pointer;font-family:Roboto,sans-serif;font-size:12px;font-weight:100;padding:0;text-transform:uppercase}.todo-list-item .todo-list-cancel-btn:after,.todo-list-item .todo-list-edit-btn:after,.todo-list-item .todo-list-remove-btn:after,.todo-list-item .todo-list-toggle-btn:after,.todo-list-item .todo-list-update-btn:after{background-color:transparent;content:"";display:block;height:1px;transition:all .3s;width:100%}@media(max-width:576px){.todo-list-item .todo-list-cancel-btn:after,.todo-list-item .todo-list-edit-btn:after,.todo-list-item .todo-list-remove-btn:after,.todo-list-item .todo-list-toggle-btn:after,.todo-list-item .todo-list-update-btn:after{content:unset}}.todo-list-item .todo-list-cancel-btn:hover:after,.todo-list-item .todo-list-edit-btn:hover:after,.todo-list-item .todo-list-remove-btn:hover:after,.todo-list-item .todo-list-toggle-btn:hover:after,.todo-list-item .todo-list-update-btn:hover:after{background-color:#fff;content:"";display:block;height:1px;width:100%}@media(max-width:576px){.todo-list-item .todo-list-cancel-btn:hover:after,.todo-list-item .todo-list-edit-btn:hover:after,.todo-list-item .todo-list-remove-btn:hover:after,.todo-list-item .todo-list-toggle-btn:hover:after,.todo-list-item .todo-list-update-btn:hover:after{content:unset}.todo-list-item .todo-list-cancel-btn:hover,.todo-list-item .todo-list-edit-btn:hover,.todo-list-item .todo-list-remove-btn:hover,.todo-list-item .todo-list-toggle-btn:hover,.todo-list-item .todo-list-update-btn:hover{font-weight:500}.todo-list-item .todo-list-edit-btn,.todo-list-item .todo-list-toggle-btn,.todo-list-item .todo-list-update-btn{margin-bottom:10px}}.todo-list-item .todo-list-edit-form{align-items:center;display:flex;width:100%}.todo-list-item .todo-list-edit-form .todo-list-edit-input{background-color:transparent;border:none;border-radius:0;color:#fff;font-family:Roboto,sans-serif;font-size:16px;font-weight:100;letter-spacing:1px;outline:none;padding:0;text-transform:uppercase;width:70%}@media(max-width:576px){.todo-list-item .todo-list-edit-form .todo-list-edit-input{width:85%}}.todo-list-item .todo-list-edit-form .todo-list-edit-input::-webkit-input-placeholder{color:#bebebe}.todo-list-item .todo-list-edit-form .todo-list-edit-input:-ms-input-placeholder{color:#bebebe}.todo-list-item .todo-list-edit-form .todo-list-edit-input::placeholder{color:#bebebe}.todo-list-item .todo-list-edit-form .todo-list-edit-btns{display:flex;justify-content:space-between;width:30%}@media(max-width:576px){.todo-list-item .todo-list-edit-form .todo-list-edit-btns{align-items:flex-end;flex-direction:column;width:15%}}.todo-list{height:100%}.todo-list-form{display:flex;justify-content:center;margin-bottom:40px}@media(max-width:576px){.todo-list-form{align-items:center;flex-direction:column;justify-content:unset}}.todo-list-form .todo-list-text-input{background-color:transparent;border:1px solid #7fffd4;border-radius:0;box-sizing:border-box;color:#fff;font-family:Roboto,sans-serif;font-size:16px;font-weight:100;letter-spacing:1px;margin-right:12px;outline:none;padding:10px;text-transform:uppercase;width:60%}@media(max-width:576px){.todo-list-form .todo-list-text-input{margin-bottom:10px;margin-right:0;width:100%}}.todo-list-form .todo-list-add-btn{background-color:transparent;border:1px solid #7fffd4;color:#fff;cursor:pointer;font-family:Roboto,sans-serif;font-size:16px;font-weight:100;padding:10px 20px;text-transform:uppercase;transition:all .3s}.todo-list-form .todo-list-add-btn:hover{background-color:#7fffd4;color:#000}@media(max-width:576px){.todo-list-form .todo-list-add-btn{width:100%}}.todo-list-header{font-family:Kanit,sans-serif;font-size:40px;font-weight:700}.todo-counter-text,.todo-list-header{color:#fff;margin-bottom:40px;text-align:center;text-transform:uppercase}.todo-counter-text{font-family:Roboto,sans-serif;font-size:16px;font-weight:100;letter-spacing:1px}.todo-counter-text span{font-weight:700}.app{display:flex;flex-direction:column;height:650px;width:550px}@media(max-width:576px){.app{height:100%;width:100%}}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:#111;line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}#root{align-items:center;box-sizing:border-box;display:flex;height:100vh;justify-content:center;padding:40px 10px 20px}@media(max-width:576px){#root{align-items:unset;box-sizing:unset;display:block;height:unset;justify-content:unset}}
/*# sourceMappingURL=main.c4758e4f.css.map*/