.loading{background:#00000010;position:fixed;inset:0}.loading:after{content:"";background:#fff;border-radius:50%;width:3rem;height:3rem;margin:-1.5rem 0 0 -1.5rem;animation:1s infinite alternate loading;position:absolute;top:50%;left:50%}@keyframes loading{0%{transform:scale(1)}to{transform:scale(.1)}}.shopping-item{display:flex}.shopping-item:nth-child(8n+1){background:#ffc6ff}.shopping-item:nth-child(8n+1).shopping-item--focus{box-shadow:inset 0 0 0 3px #e300e2}.shopping-item:nth-child(8n+1) .shopping-item__checkbox:checked:after{background:#e300e2}.shopping-item:nth-child(8n+2){background:#bdb2ff}.shopping-item:nth-child(8n+2).shopping-item--focus{box-shadow:inset 0 0 0 3px #1f00d8}.shopping-item:nth-child(8n+2) .shopping-item__checkbox:checked:after{background:#1f00d8}.shopping-item:nth-child(8n+3){background:#a0c4ff}.shopping-item:nth-child(8n+3).shopping-item--focus{box-shadow:inset 0 0 0 3px #004fd0}.shopping-item:nth-child(8n+3) .shopping-item__checkbox:checked:after{background:#004fd0}.shopping-item:nth-child(8n+4){background:#9bf6ff}.shopping-item:nth-child(8n+4).shopping-item--focus{box-shadow:inset 0 0 0 3px #00bbcd}.shopping-item:nth-child(8n+4) .shopping-item__checkbox:checked:after{background:#00bbcd}.shopping-item:nth-child(8n+5){background:#caffbf}.shopping-item:nth-child(8n+5).shopping-item--focus{box-shadow:inset 0 0 0 3px #26df00}.shopping-item:nth-child(8n+5) .shopping-item__checkbox:checked:after{background:#26df00}.shopping-item:nth-child(8n+6){background:#fdffb6}.shopping-item:nth-child(8n+6).shopping-item--focus{box-shadow:inset 0 0 0 3px #d5db00}.shopping-item:nth-child(8n+6) .shopping-item__checkbox:checked:after{background:#d5db00}.shopping-item:nth-child(8n+7){background:#ffd6a5}.shopping-item:nth-child(8n+7).shopping-item--focus{box-shadow:inset 0 0 0 3px #d27200}.shopping-item:nth-child(8n+7) .shopping-item__checkbox:checked:after{background:#d27200}.shopping-item:nth-child(8n+8){background:#ffadad}.shopping-item:nth-child(8n+8).shopping-item--focus{box-shadow:inset 0 0 0 3px #d60000}.shopping-item:nth-child(8n+8) .shopping-item__checkbox:checked:after{background:#d60000}.shopping-item:last-child .shopping-item__checkbox,.shopping-item:last-child .shopping-item__button,.shopping-item:last-child .shopping-item__count{visibility:hidden}.shopping-item__checkbox{appearance:none;cursor:pointer;border:0;border-radius:0;width:3.5rem;height:3.5rem;position:relative}.shopping-item__checkbox:after{content:"";background:#fff;border:1px solid #000;border-radius:50%;width:1.5rem;height:1.5rem;position:absolute;top:1rem;left:1rem}.shopping-item__checkbox:checked:after{border-width:3px}.shopping-item__body{flex:auto;line-height:1.5rem;position:relative;overflow:hidden}.shopping-item__input{appearance:none;background:0;border:0;border-radius:0;outline:0;width:100%;padding:1rem 0}.shopping-item__input::placeholder{color:#999}.shopping-item__value{white-space:nowrap;pointer-events:none;visibility:hidden;position:absolute;top:0;left:0}.shopping-item__value--up{font-size:calc(1em + 1px)}.shopping-item__count{text-align:center;flex:none;min-width:12px;padding:1rem 0;line-height:1.5}.shopping-item__button{appearance:none;cursor:pointer;background:0;border:0;justify-content:center;align-items:center;width:3rem;height:3.5rem;padding:0;font-size:1.5rem;display:flex}.shopping-list{overflow:hidden}.socket-status{z-index:100;pointer-events:none;background:#666e75;border-radius:50%;width:3em;height:3em;font-size:12px;position:fixed;bottom:2em;right:2em;transform:translate(50%,50%)}.socket-status--connected{background:#3d9209;width:.5em;height:.5em}.socket-status--reconnecting{background:#f28500;animation:.5s ease-in-out infinite alternate socket-status}@keyframes socket-status{to{width:2em;height:2em}}.socket-status--disconnected{background:#e42222}:root{background:#dcd0ff;font-family:Montserrat,sans-serif;font-weight:300}body{margin:0}input,button{font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;margin:0}*,:before,:after{box-sizing:border-box;flex:none}.material-icons{font-size:inherit!important}.app{max-width:600px;margin:0 auto}