@import"https://fonts.googleapis.com/css2?family=Edu+SA+Beginner:wght@400;500;700&display=swap";.modal-overlay{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:3;transition:opacity .3s ease-in-out;pointer-events:none}.modal-overlay .modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:500px;padding:8px 16px;background-color:#fff;box-shadow:0 0 10px #0003;border-radius:8px;overflow:hidden;text-align:center;transform:translate(-50%,-150%);transition:transform .2s ease-in-out}.modal-overlay .modal .header{display:flex;justify-content:space-between;align-items:flex-start}.modal-overlay .modal .header h2{color:#333;text-align:left}.modal-overlay .modal .header button{background-color:transparent;color:#333;border:none;font-size:1.5em;cursor:pointer;transition:color .3s;padding:0}.modal-overlay .modal .header button:hover{color:#000}.modal-overlay .modal p{margin:10px 0;color:#666}.modal-overlay .modal button{padding:10px 20px;background-color:#4abdac;color:#fff;border:none;cursor:pointer;transition:background-color .3s}.modal-overlay .modal button:hover{background-color:#399b8d}.modal-overlay.show{opacity:1;pointer-events:auto}.modal-overlay.show .modal{transform:translate(-50%,-50%)}#loading{height:150px}#loading #hammer{fill:var(--cool-grey);transform-origin:center center;animation:rotateHammer 2.5s infinite ease-in-out}#loading #fork{fill:var(--cool-grey);transform-origin:center center;animation:rotateFork 2.5s infinite ease-in-out}@keyframes rotateHammer{0%{transform:rotate(0)}20%{transform:rotate(30deg)}55%{transform:rotate(-380deg)}62%{transform:rotate(-355deg)}70%,to{transform:rotate(-360deg)}}@keyframes rotateFork{0%{transform:rotate(0)}20%{transform:rotate(-30deg)}55%{transform:rotate(380deg)}62%{transform:rotate(355deg)}70%,to{transform:rotate(360deg)}}#Groceries{height:100%}#Groceries .loading-state{height:100%;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;color:var(--cool-grey);font-size:32px}#Groceries .page-header{margin:12px 12px 20px}#Groceries .page-header .title{display:flex;justify-content:space-between;align-items:center;padding:0 12px}#Groceries .page-header .title h1{font-size:48px;margin:0}#Groceries .page-header .search-bar{margin-bottom:16px;width:100%;display:flex;justify-content:space-between;align-items:center}#Groceries .page-header .search-bar .search-wrapper{position:relative;display:flex;align-items:center;width:80%}#Groceries .page-header .search-bar .search-wrapper input{width:100%;box-sizing:border-box}#Groceries .page-header .search-bar .search-wrapper .clear-button{position:absolute;right:5px;font-size:14px}#Groceries .page-header .search-bar .add-button{color:var(--cool-green);border:solid 2px var(--cool-green);border-radius:50px;height:50px;width:50px;font-size:24px;cursor:pointer;transition:all .3s}#Groceries .page-header .filters{display:flex;align-items:flex-start;flex-direction:column}#Groceries .page-header .filters .filter-header{display:flex;justify-content:space-between;align-items:center;width:100%}#Groceries .page-header .filters .filter-header .filter-button{font-size:20px;color:var(--cool-grey);display:flex;align-items:center;cursor:pointer;transition:all .3s;margin:4px 0}#Groceries .page-header .filters .filter-header .filter-button span{font-family:var(--primary-font)}#Groceries .page-header .filters .filter-header .filter-button svg{margin-left:8px;font-size:20px}#Groceries .page-header .filters .filter-header .sort-by{display:flex;align-items:center}#Groceries .page-header .filters .filter-header .sort-by label{margin-right:4px}#Groceries .page-header .filters .filter-header .sort-by select{border-top:none;border-left:none;border-right:none;background-color:transparent;padding:4px;font-size:16px;color:var(--cool-grey);margin:0}#Groceries .page-header .filters .filter-header .sort-by option{background-color:var(--cool-green);color:#fff}#Groceries .page-header .filters .filter-header .sort-by .sort-direction{color:var(--cool-grey)}#Groceries .page-header .filters .filter-header .sort-by svg{font-size:20px}#Groceries .page-header .filters .filter-row label{display:flex;flex-direction:column;width:100%}#Groceries .page-header .filters .select-filters{display:flex;justify-content:space-evenly;width:100%;margin-bottom:8px}#Groceries .page-header .filters .select-filters .multiselect-container{margin-top:4px}#Groceries .page-header .filters svg{font-size:28px}#Groceries .page-header .filters select{margin:4px 8px 0 0;background-color:transparent;color:#fff;padding:4px;font-size:20px}#Groceries .page-header .filters option{background-color:var(--cool-green);color:#fff}#Groceries .page-header .filters .tag-filters{display:flex;flex-wrap:wrap}#Groceries .empty-state{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;color:var(--cool-grey);font-size:32px}#Groceries .groceries-list{list-style:none;font-size:32px;padding:0 12px}#Groceries .groceries-list .list-item{display:grid;grid-template-columns:3fr 1fr;grid-template-rows:1fr 1fr;grid-gap:8px;grid-template-areas:"name edit" "tags status";padding:8px;align-items:center;border:solid grey 3px;margin-top:8px}#Groceries .groceries-list .list-item p{margin:0}#Groceries .groceries-list .list-item p.expiration{font-size:16px}#Groceries .groceries-list .list-item .edit-button{grid-area:edit;display:flex;justify-content:flex-end;align-items:center;flex-direction:column;font-size:16px;color:var(--cool-grey);cursor:pointer;transition:all .3s}#Groceries .groceries-list .list-item .edit-button svg{font-size:24px}#Groceries .groceries-list .list-item .edit-button:hover{color:var(--cool-green)}#Groceries .groceries-list .list-item .grocery-tags{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;width:50%;font-size:24px}#Groceries .groceries-list .list-item .status-container{grid-area:status;display:flex;flex-direction:column;align-items:center}#Groceries .groceries-list .list-item .status-container .status{display:flex;justify-content:flex-end;align-items:center;justify-self:flex-end;font-size:20px;border-radius:50px;padding:8px;margin-bottom:8px;text-align:center}#Groceries .groceries-list .list-item .status-container .status.Plenty{background-color:var(--cool-green)}#Groceries .groceries-list .list-item .status-container .status.Out{background-color:var(--cool-red);border-color:var(--cool-red);color:#000}#Groceries .groceries-list .list-item .status-container .status.Low{background-color:var(--cool-yellow);border-color:var(--cool-yellow);color:#000}#Groceries .groceries-list .list-item .status-container .status.Ordered{background-color:var(--cool-blue);border-color:var(--cool-blue);color:#000}#Groceries .groceries-list .list-item .status-container .status-date{font-size:12px;color:var(--cool-grey);text-align:center}#Groceries .groceries-list .list-item .tags{grid-area:tags;display:flex;flex-wrap:wrap}#Groceries .groceries-list .list-item .tags .tag{padding:0 12px;border:2px solid var(--cool-blue);border-radius:20px;transition:all .3s;display:flex;color:var(--cool-blue);font-size:20px}#Groceries .modal-content{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"body"}#Groceries .modal-content .loading{grid-area:body;z-index:2;background-color:#fffc;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#000;font-size:32px}#Groceries .modal-content .loading #loading #hammer,#Groceries .modal-content .loading #loading #fork{fill:var(--cool-green)}#Groceries .modal-content form{grid-area:body;display:flex;flex-direction:column}#Groceries .modal-content form .form-group{display:flex;align-items:flex-start;flex-direction:column;margin-bottom:8px}#Groceries .modal-content form .form-group label{color:#000;line-height:1.5em;margin-bottom:2px}#Groceries .modal-content form .form-group select,#Groceries .modal-content form .form-group input{width:100%}#Groceries .modal-content form .name{grid-area:input}#Groceries .modal-content form .type{grid-area:type}#Groceries .modal-content form .type .type-button{background-color:transparent;border:solid 2px var(--cool-green);border-radius:50px;height:50px;width:50px;font-size:24px;cursor:pointer;transition:all .3s;margin-right:8px}#Groceries .modal-content form .type .selected{background-color:var(--cool-green);color:#fff}#Groceries .modal-content form .expiration-date{grid-area:expiration}#Groceries .modal-content form .tags{display:flex;flex-direction:row;justify-content:flex-start;flex-wrap:wrap}#Groceries .modal-content form .buttons{grid-area:buttons;display:flex;justify-content:flex-end;align-items:center;margin-top:16px}#Groceries .modal-content form .buttons button{background-color:var(--cool-green);font-size:28px;font-family:var(--primary-font);margin-left:16px}#Groceries .modal-content form .buttons button.delete-button{background-color:var(--cool-red)}.recipes-page{display:flex;flex-direction:column;align-items:center}.recipes-page .recipes-list{display:flex;flex-direction:column;padding:0;width:90%;margin:0 auto}.recipes-page .recipes-list a{text-decoration:none;font-size:1.5rem;border:solid 2px var(--cool-grey);border-radius:8px;padding:16px;margin-bottom:16px}.recipes-page .add-button{font-size:2.5rem;padding:8px;margin:1rem;align-self:flex-end}.add-recipe-form{display:flex;flex-direction:column;align-items:center;padding:20px;border-radius:10px;color:var(--cool-black)}.add-recipe-form input{font-size:1.5rem;padding:8px;margin:8px;border-radius:8px;border:solid 2px var(--cool-grey)}.add-recipe-form button{font-size:1.5rem;padding:8px;margin:8px;border-radius:8px;border:solid 2px var(--cool-grey);background-color:var(--cool-green);color:var(--cool-black)}.checkbox-wrapper{position:relative;display:inline-block;width:30px;height:30px;min-width:30px}.checkbox-wrapper:hover .check{stroke-dashoffset:0}.checkbox-wrapper .background{fill:#ccc;transition:ease all .6s;-webkit-transition:ease all .6s}.checkbox-wrapper .stroke{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;stroke-dashoffset:100;stroke-dasharray:100;transition:ease all .6s;-webkit-transition:ease all .6s}.checkbox-wrapper .check{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;stroke-dashoffset:22;stroke-dasharray:22;transition:ease all .6s;-webkit-transition:ease all .6s}.checkbox-wrapper input[type=checkbox]{position:absolute;width:100%;height:100%;left:0;top:0;margin:0;opacity:0;-appearance:none;-webkit-appearance:none}.checkbox-wrapper input[type=checkbox]:hover{cursor:pointer}.checkbox-wrapper input[type=checkbox]:checked+svg .background{fill:#6cbe45}.checkbox-wrapper input[type=checkbox]:checked+svg .stroke{stroke-dashoffset:0}.checkbox-wrapper input[type=checkbox]:checked+svg .check{stroke-dashoffset:0}#Recipe{display:flex;flex-direction:column;align-items:center;padding:20px}#Recipe .header .title{display:flex;flex-direction:column;align-items:center}#Recipe .header .title h1{font-size:2rem;font-weight:700;margin:0;display:flex}#Recipe .header .title h1 .fa-pencil{cursor:pointer;margin-left:8px;font-size:16px;transform:translateY(16px)}#Recipe .header .title input[type=text]{font-size:2rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;text-align:center;color:var(--cool-grey);padding:20px;margin:8px;font-family:var(--primary-font)}#Recipe .header .title textarea{font-size:1rem;background-color:transparent;outline:none;color:var(--cool-grey);height:100px;resize:none;width:100%}#Recipe .header .title .description{font-size:1rem;font-style:italic;margin:0}#Recipe .section-title{font-size:2rem;margin:0;align-self:flex-start;margin-top:2rem}#Recipe .edit-buttons{position:fixed;right:20px;bottom:20px}#Recipe .edit-buttons button{font-size:1.5rem;margin:0 8px}#Recipe .recipe-list{display:flex;flex-direction:column;margin:0;padding:0 12px;border:1px solid var(--cool-grey);border-radius:10px;align-self:stretch}#Recipe .recipe-list h2{font-size:1.5rem;font-weight:700;margin:0}#Recipe .recipe-list ul{padding:0;list-style-type:none}#Recipe .recipe-list ol{list-style-type:none}#Recipe .recipe-list .add-button{margin-bottom:12px}#Recipe .list-item-container{font-size:1rem;margin:0;margin-bottom:1rem;display:flex;font-size:1.5rem}#Recipe .list-item-container .list-item{display:flex;align-items:flex-start;width:100%}#Recipe .list-item-container .list-item .checkbox-wrapper{margin-right:8px}#Recipe .list-item-container .list-item .quantity{margin-right:12px;color:var(--cool-black);background-color:var(--cool-grey);padding:0 8px;border-radius:8px;flex-shrink:0}#Recipe .list-item-container .list-item .delete{cursor:pointer;margin-left:auto;justify-self:flex-end;color:var(--cool-red)}.add-ingredient-form{display:flex;flex-direction:column;align-items:center;padding:20px;border-radius:10px;color:var(--cool-black)}.add-ingredient-form .form-input{width:100%;font-size:1.5rem;margin-bottom:1rem;display:flex;flex-direction:column}.add-ingredient-form .form-input label{align-self:start}.add-ingredient-form #react-select-3-listbox{max-height:200px}.add-ingredient-form button{font-size:1.5rem;align-self:flex-end}.add-instruction-form{display:flex;flex-direction:column;align-items:stretch;border-radius:10px;color:var(--cool-black)}.add-instruction-form textarea{width:100%;height:50vh;font-size:1.5rem;margin-bottom:1rem}.add-instruction-form button{font-size:1.5rem;align-self:flex-end}.loading-state{height:100%;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;color:var(--cool-grey);font-size:32px}#StockPage{height:100%}#StockPage .inventoried-count{width:95%;text-align:right;margin-bottom:0}#StockPage .filters{display:flex;margin:8px 16px}#StockPage .filters .chip{margin-right:8px}#StockPage .item-header{display:flex;justify-content:space-between;align-items:center;padding:16px}#StockPage .item-header .icon-button{color:#fff;font-size:32px}#StockPage .item-info-container{display:flex;justify-content:center;flex-direction:column;align-items:center;margin-top:16px}#StockPage .item-info-container .item-name{line-height:1.5em}#StockPage .item-info-container .details{display:flex;flex-direction:column;align-items:flex-start;margin:0}#StockPage .status-buttons{display:flex;justify-content:center;align-items:center;flex-direction:column;margin:16px}#StockPage .status-buttons .status-button{display:flex;align-items:center;justify-self:flex-end;font-size:36px;border-radius:50px;padding:16px;border:none;margin:16px;cursor:pointer;transition:all .3s;width:50%;text-align:center;justify-content:center}#StockPage .status-buttons .status-button.plenty{background-color:var(--cool-green)}#StockPage .status-buttons .status-button.low{background-color:var(--cool-yellow);color:#000}#StockPage .status-buttons .status-button.out{background-color:var(--cool-red);color:#000}#groceries-data{border-collapse:collapse;width:100%}#groceries-data th{background-color:#f5f5f5;color:#333;font-weight:700;padding:10px;text-align:left}#groceries-data td{border:1px solid #ccc;color:#333;padding:10px}#groceries-data tr:nth-child(2n){background-color:#f9f9f9;color:#333}h1,h2,h3{margin:0;font-weight:700;line-height:2em}h1{font-size:48px}h2{font-size:36px}nav{display:flex;justify-content:space-between;align-items:center;padding:0 12px;height:60px;background-color:var(--cool-green);color:#fff;font-family:var(--primary-font);font-size:24px}nav a{text-decoration:none;padding:8px;color:var(--cool-black)}nav a:has(img){padding:4px;height:32px;width:32px;display:flex;justify-content:center}nav a img{height:32px;width:32px}nav a.active{border:solid var(--cool-black) 2px;background-color:#fff;border-radius:8px}.build-time{font-size:12px;color:var(--cool-grey);margin:4px 12px}.page-title{margin:0 12px}.chip{margin:4px 4px 4px 0;cursor:pointer;font-family:var(--primary-font)}.chip .chip-text{color:var(--cool-grey);padding:0 12px;border:2px solid var(--cool-green);border-radius:20px;transition:all .3s;display:flex;color:var(--cool-green);font-size:20px}.chip.checked .chip-text{color:#fff;background-color:var(--cool-green);border-radius:20px;transition:all .3s}input[type=text],input[type=date],input[type=number],select{margin:0;vertical-align:baseline;line-height:normal;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;border:solid 2px var(--cool-green);font-family:var(--primary-font);font-size:28px;padding:0 0 4px 4px;background-color:#fff;color:#000;cursor:pointer;overflow:visible;line-height:1.5em}input[type=text]:focus,input[type=date]:focus,input[type=number]:focus,select:focus{outline:none}input[type=text]::placeholder,select::placeholder{font-family:var(--primary-font);font-size:28px;line-height:1.5em;padding-bottom:4px}input[type=text]:focus,select:focus{outline:none}option{font-family:var(--primary-font);font-size:24px;padding:4px}.add-button{font-size:2rem;align-self:flex-start;cursor:pointer;color:var(--cool-green)}.page{padding:2rem}.week{display:flex;flex-direction:column}.week .day{display:grid;grid-template-columns:1fr;grid-template-rows:1rem auto;grid-gap:10px;padding:10px;align-items:center;border-bottom:3px white solid;width:100%}.week .day label{font-size:1rem;font-weight:700;margin:0}.week .day p,.week .day a{margin:0;font-size:2rem}@font-face{font-family:Chalk;src:url(./assets/fonts/Chalk\ Board.ttf)}@font-face{font-family:WildySans;src:url("./assets/fonts/Orion Chalk Solid Demo Version.otf");font-weight:700;font-style:italic}:root{--cool-blue: #4abdac;--cool-red: #fc4a1a;--cool-yellow: #f7b733;--cool-grey: #dfdce3;--cool-green: #00D13F;--cool-black: #2a2a2a;--primary-font: "Edu SA Beginner", sans-serif;height:100vh}body{background-color:var(--cool-black);color:var(--cool-grey);font-family:var(--primary-font);margin:0;height:100vh}body #root{height:100%}h1,h2,a{color:var(--cool-grey);font-family:var(--primary-font);margin:0}button{font-family:var(--primary-font)}.button-primary{background-color:var(--cool-red);font-family:var(--primary-font);color:#fff}.button-secondary{background-color:var(--cool-yellow);font-family:var(--primary-font);color:#fff}.navbar{background-color:var(--cool-blue);color:#fff}.icon-button{background:transparent;border:none;cursor:pointer}.multiselect-container{position:relative;width:200px}.multiselect-container .multiselect-label{padding:10px;background:2a2a2a;border:solid var(--cool-green) 2px;color:#fff;cursor:pointer}.multiselect-container .multiselect-options{position:absolute;width:100%;background:white;box-shadow:0 1px 3px #0003;max-height:200px;overflow-y:auto;z-index:4}.multiselect-container .multiselect-options .multiselect-option{padding:5px 10px;margin:2px 0;background:#fff;color:#000;cursor:pointer}.multiselect-container .multiselect-options .multiselect-option.selected{background:#007bff;color:#fff}