@import"https://fonts.googleapis.com/css2?family=Poppins&display=swap";:root{--body-text-color: whitesmoke;--body-background-color: rgb(36, 36, 36);--border-color: rgb(46, 46, 46);--add-button: white;--add-button-hover: limegreen;--delete-button: lightcoral;--delete-button-hover: brown;--checked-border-color: #007aff;--checked-background-color-before: whitesmoke;--checked-background-color-after: #2c3e50;--clean-all-color: #ffd43b;--primary-bg-color: #2c3e5038;--primary-border-color: transparent;--glow-color1: rgba(255, 255, 255, .5);--glow-color2: rgba(255, 255, 255, .3);--gradient-start: #111;--gradient-end: #222}*{margin:0;padding:0;box-sizing:border-box}.offscreen{position:absolute;left:-10000px}input,button{font:inherit}html{font-family:Poppins,sans-serif}body{min-height:100vh;background-color:var(--body-background-color);color:var(--body-text-color);display:flex;flex-direction:column}main{flex-grow:1;margin:auto;width:100%;max-width:800px;display:flex;flex-flow:column nowrap;position:relative;padding:1rem;background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:padding-box,border-box;box-shadow:inset 0 0 0 3px var(--inner-border-color),0 0 10px var(--glow-color1),0 0 20px var(--glow-color2)}section{border:1px solid var(--border-color);border-radius:10px;padding:.5rem}.button{border-radius:10px;min-width:48px;min-height:48px;color:var(--delete-button);background-color:var(--body-background-color)}.button:active{transform:translateY(2px)}.button:hover{cursor:pointer}.newItemEntry{position:sticky;top:0;margin-bottom:.5rem;background-color:var(--body-background-color);z-index:1}.newItemEntry__form{display:flex;gap:.25rem;font-size:1.5rem;align-items:center}.newItemEntry__form ::placeholder{font-size:.99rem}.newItemEntry__input{width:calc(100% - (.25rem + 48px));flex-grow:1;border:2px solid var(--border-color);border-radius:10px;padding:.5em}.newItemEntry__input[data-image]{background-color:#00ff001a}.newItemEntry__button{color:var(--add-button);border:2px outset var(--border-color);padding:5px;font-size:24px;order:3;margin-left:10px;display:flex;justify-content:center;align-items:center;min-width:48px;min-height:48px;width:48px;height:48px}.newItemEntry__button i{line-height:1}@media (max-width: 768px){.newItemEntry__button{font-size:20px;padding:4px;min-width:40px;min-height:40px;width:40px;height:40px}}.listContainer{font-size:1.2rem;flex-grow:1;display:flex;flex-flow:column;gap:1rem;border-radius:10px;justify-content:right}.listTitle{display:flex;justify-content:space-between;align-items:flex-end}.listTitle__button{background-color:transparent;color:var(--body-text-color);border:2px outset var(--border-color);padding:.25em}#listName{padding-bottom:8px}.listItems{flex-grow:1;display:flex;flex-flow:column nowrap;list-style-type:none}.item{display:flex;align-items:center;padding:.2em;gap:1em;box-shadow:0 2px 4px #0000001a;margin:5px 0;border-radius:10px;background-color:var(--body-background-color);cursor:grab}.listTitle>input[type=checkbox]{margin-left:.2em;margin-bottom:8px}.item>input[type=checkbox],.listTitle>input[type=checkbox]{text-align:center;min-width:2.2rem;min-height:2.2rem;cursor:pointer}.item>label{flex-grow:1;word-break:break-all}.item>button{border:none}.item>button:hover{color:var(--delete-button-hover)}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:50%;border:2px solid var(--border-color);outline:none;cursor:pointer;position:relative;border-color:var(--checked-border-color)}input[type=checkbox]:checked{color:var(--checked-border-color)}input[type=checkbox]:checked:after{content:"✓";font-size:25px;color:var(--checked-border-color);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.item>input[type=checkbox]:checked+label{text-decoration:line-through;text-decoration-thickness:2px;-webkit-text-decoration:line-through;-webkit-text-decoration-thickness:2px}.edit-input{width:calc(100% - 22px);padding:5px;font-size:16px;box-sizing:border-box}.checkbox-label{cursor:pointer}.item-content{display:flex;flex-direction:column;align-items:flex-start;flex-grow:1;gap:.5rem}.item-image-container{position:relative;width:100%;cursor:pointer}.item-image-delete{position:absolute;top:5px;right:5px;background-color:#0009;color:var(--delete-button);border:none;border-radius:50%;width:30px;height:30px;display:none;justify-content:center;align-items:center;cursor:pointer;z-index:1}.item-image-container:hover .item-image-delete,.item-image-container:active .item-image-delete{display:flex}.item-image{width:100%;max-height:150px;border-radius:5px;object-fit:cover;transition:transform .2s}.item-image:hover{transform:scale(1.05)}.item.drag-over{border:2px dashed #000}#clearItemsButton{color:var(--clean-all-color)}#removeCheckedButton{color:var(--delete-button)}.fa-circle-check{color:var(--checked-border-color)}.modal{display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000c}.modal-content{background-color:var(--body-background-color);padding:20px;border:1px solid var(--border-color);width:80%;max-width:300px;text-align:center;border-radius:10px;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}.image-modal{display:none;position:fixed;z-index:10000;left:0;top:0;width:100%;height:100%;background-color:#000000e6;cursor:pointer}.image-modal img{max-width:90%;max-height:90vh;margin:auto;display:block;position:relative;top:50%;transform:translateY(-50%)}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:1rem;margin:auto}.login-form h1{text-align:center;color:var(--body-text-color);margin-bottom:0}.login-container img{display:block;margin:10px auto 15px;border-radius:50%}.login-form{background:var(--body-background-color);padding:2rem;border-radius:10px;width:100%;max-width:400px;box-shadow:0 0 10px var(--glow-color1),0 0 20px var(--glow-color2)}.login-form h1{text-align:center;margin-bottom:2rem;color:var(--body-text-color)}.login-form input{width:100%;padding:.8rem;margin-bottom:1rem;border:2px solid var(--border-color);border-radius:10px;background:var(--body-background-color);color:var(--body-text-color)}.login-form button{width:100%;padding:.8rem;background:var(--checked-border-color);color:var(--body-text-color);border:none;border-radius:10px;cursor:pointer;font-size:1rem}.login-form button:hover{opacity:.9}.login-error{color:var(--delete-button);margin-bottom:1rem;text-align:center;display:none;font-size:.9rem}#appContainer{display:none}.preview-container{position:relative;display:inline-flex;align-items:center;margin-right:0;order:2}.preview-container img{max-width:40px;max-height:40px;border-radius:4px;object-fit:cover}.preview-delete-btn{position:absolute;right:-20px;top:50%;transform:translateY(-50%);padding:4px!important;min-width:20px!important;min-height:20px!important;background-color:transparent!important;font-size:12px;border:none}.preview-delete-btn:hover{color:var(--delete-button-hover)}@media (max-width: 768px){.preview-container{margin-left:5px}.preview-container img{max-width:35px;max-height:35px}.newItemEntry__button{margin-left:5px}}@media (min-width: 768px){section{padding:1rem}.newItemEntry__form{gap:.5rem}}.preview-container{position:relative;display:inline-flex;align-items:center;margin-left:10px;margin-right:0;order:2}.preview-delete-btn{position:absolute;right:-20px;top:50%;transform:translateY(-50%);padding:4px!important;min-width:20px!important;min-height:20px!important;background-color:transparent!important}.preview-delete-btn:hover{background-color:#0000001a!important}.loader-container{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--body-background-color);z-index:9999}.loader{width:60px;height:60px;border:5px solid var(--body-text-color);border-bottom-color:transparent;border-radius:50%;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}