*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:20px}body{color:#fff;background-color:#202025;font-family:Inter,Arial,Helvetica,sans-serif;display:flow-root}.alert,.tooltip{visibility:hidden;opacity:0;text-shadow:1px 1px 2px #0006;filter:drop-shadow(1px 1px 2px #0006);background-color:#e46f41;border-radius:6px;width:max-content;padding:8px;font-size:14px;position:absolute;bottom:calc(100% + 13px);left:50%;transform:translate(-50%)}.alert:after,.tooltip:after{content:"";border:10px solid #0000;border-top-color:#e46f41;border-bottom-width:0;width:0;height:0;margin:auto auto -6px;position:absolute;inset:0}.alert{transition:opacity .2s linear}.alert:after{margin:auto auto -6px 20%}.tooltip{transition:opacity .2s linear,visibility .2s step-end}.disabled{opacity:.3;pointer-events:none}.visually-hidden{clip:rect(0 0 0 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.custom-checkbox{background-color:#fff;border-radius:2px;width:17px;height:17px;position:relative}.visually-hidden:checked+.custom-checkbox{content:"";background-color:#05a000}.visually-hidden:checked+.custom-checkbox:after{content:"";border:3px solid #fff;border-width:0 3px 3px 0;width:7px;height:12px;position:absolute;top:1px;left:5px;transform:rotate(42deg)}.visually-hidden:focus+.custom-checkbox{outline-offset:3px;outline:1px solid #fff}button,input[type=checkbox]{cursor:pointer}main{text-align:center;grid-template-rows:1fr min-content 1fr;justify-items:center;height:100vh;padding:0 10px;display:grid}.title-container{align-self:self-end;padding:20px 10px}.app-container{background-color:#2e2e47;border:2px solid #fff;border-radius:20px;width:min(100%,500px);padding:20px;position:relative;overflow:hidden}.modal-container{backdrop-filter:blur(2px);z-index:1;background-color:#0003;position:absolute;inset:0}#modal-form,#modal-confirm{background-color:#2e2e47;border:1px solid #fff;border-radius:10px;flex-direction:column;align-items:center;gap:10px;width:max-content;height:max-content;margin:auto;padding:20px;font-size:18px;display:flex;position:absolute;inset:0}#modal-form input,#modal-confirm input{border:0;border-radius:4px;width:190px;padding:4px 6px;font-size:16px}#modal-form input:focus,#modal-confirm input:focus{outline-offset:2px;outline:1px solid #fff}.modal-input-container{position:relative}.modal-buttons-container{justify-content:center;align-items:center;gap:10px;margin-top:4px;display:flex}.modal-buttons-container button{border:0;border-radius:4px;padding:4px 10px;font-size:14px}.modal-buttons-container button:hover{background-color:#d7d7d7}.modal-buttons-container button:active{background-color:#afafaf}#product-form{margin-bottom:40px}#product-form>label{width:fit-content;margin:0 auto 10px;display:block}.product-data-container{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}#add-button{color:#fff;text-shadow:1px 1px 2px #0006;background-color:#77b64d;border:0;border-radius:4px;height:35px;padding:0 16px;font-size:16px}#add-button:hover{background-color:#86d154}#add-button:active{outline-offset:-2px;background-color:#649c3f;outline:2px solid #86d154}.product-input-container{position:relative}.product-input-container input{border:0;border-radius:4px;width:min(100%,260px);padding:6px 8px;font-size:20px}.product-input-container input:focus{outline-offset:2px;outline:2px solid #fff}.product-input-container button[type=reset]{color:#00000080;background-color:#0000;border:0;border-radius:50%;width:19px;height:19px;margin:auto 9px auto auto;font-size:14px;line-height:19px;position:absolute;inset:0}.product-input-container button[type=reset]:hover{background-color:#0003}.product-input-container button[type=reset]:active{color:#000000b3}.control-panel{justify-content:space-between;margin-bottom:10px;padding:0 2px;display:flex}.control-panel-left{gap:10px;display:flex;position:relative}.control-panel-left .control-checkbox-container,.control-panel-left .control-button{justify-content:center;align-items:center;width:38px;display:flex}.control-panel-left button:first-of-type{padding:0}.control-panel-left button:first-of-type span{width:76%;height:76%;margin-left:.5px}.control-panel-left button:nth-of-type(2){font-size:22px}.control-panel-left button:nth-of-type(2) span{margin:3px 0 0 1px}.control-panel-right{gap:10px;display:flex;position:relative}.control-checkbox-container,.control-button{border:2px solid #fff;border-radius:6px;height:38px;position:relative}.control-checkbox-container:hover,.control-button:hover{cursor:pointer;border-color:#ff7d4a}.control-checkbox-container:hover .tooltip,.control-button:hover .tooltip{visibility:visible;opacity:1;transition:opacity .2s linear .8s,visibility}.control-button{color:#fff;background-color:#0000;padding:0 12px;font-size:18px}.control-button:active>span{transform:translateY(2px)}.control-button span{display:inline-block}.action-list,.select-list{filter:drop-shadow(1px 1px 4px #0006);z-index:1;background-color:#2e2e47;border:1px solid #fff;border-radius:6px;font-size:16px;position:absolute;top:calc(100% + 8px);overflow:hidden}.action-list>li,.select-list>li{border-bottom:1px solid #fff3;align-items:center;padding:6px 10px;display:flex;position:relative}.action-list>li:last-of-type,.select-list>li:last-of-type{border-bottom:0}.action-list>li:hover:not(:has(span.disabled)):before,.select-list>li:hover:not(:has(span.disabled)):before{content:"";background-color:#ffffff1a;position:absolute;inset:0}.action-list{left:28%}.action-list span{text-align:left;cursor:pointer;width:max-content}.sort-type-info{visibility:hidden;opacity:0;width:max-content;font-size:14px;transition:opacity .1s linear;position:absolute;bottom:0;right:0;transform:translate(calc(100% + 10px))}.select-list{right:-12px}.select-list span{text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default;width:110px;padding-right:4px;position:relative;overflow:hidden}.select-list button{color:#fff6;background-color:#0000;border:0;border-radius:50%;width:17px;height:17px;font-size:12px;line-height:17px;position:relative}.select-list button:hover{background-color:#0000}.select-list button:active,.select-list button:hover{color:#fffc}.selected-list{background-color:#545474}.cropped-scroll-container{border-radius:10px;overflow:hidden}.product-list-container{background-color:#292936;border:2px solid #fff;border-radius:10px;height:404px;overflow:auto}.product-list{list-style-type:none}.product-list>li{text-shadow:1px 1px 2px #0006;background-color:#554875;border-bottom:2px solid #fff;align-items:center;gap:10px;display:flex}.product-list>li:nth-of-type(n+10):last-of-type{border-bottom:0}.product-list>li div{width:40px;height:40px;text-shadow:none;border-right:2px solid #fff;justify-content:center;align-items:center;display:flex}.product-list>li div:hover{cursor:pointer}.product-list>li button{color:#fff9;background-color:#0000;border:0;border-radius:50%;width:23px;height:23px;margin:0 14px 0 auto;font-size:16px;line-height:23px}.product-list>li button:hover{background-color:#fff3}.product-list>li button:active{color:#fffc}.product-list .selected-product{background-color:#688f47}.product-list.formed-list{counter-reset:product-counter}.product-list.formed-list>li{counter-increment:product-counter}.product-list.formed-list>li:before{content:counter(product-counter);border-right:2px solid #fff;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.space-container{width:100%;height:20px}@media (width<=500px){.control-panel{flex-direction:column;justify-content:flex-start;align-items:center;gap:10px;display:flex}.control-panel-left,.control-panel-right{gap:clamp(10px,10vw - 30px,20px)}.action-list{left:50%;transform:translate(-50%)}.select-list{right:-35.485px}}@media (width<=480px){#modal-confirm{width:clamp(250px,85.6836vw - 24.1875px,387.094px)}}@media (width<=395px){#product-form{margin-bottom:24px}#add-button{padding:0 28px}.product-list-container{height:373px}}@media (width<=356px){.select-list{right:clamp(-35.485px,142.37px - 50vw,-17.5px)}}@media (hover:none) and (pointer:coarse){.product-input-container button[type=reset]{margin:auto 4px auto auto;transform:translate(-100%)}.control-panel-left button:nth-of-type(2){font-size:32px}.control-panel-left button:nth-of-type(2) span{margin:-9px 0 0}}
/*# sourceMappingURL=ShoppingList.7df86696.css.map */