:root{--main-bg-color:#ddd;--sub-bg-color:#eee;--modal-bg-color:#fafafa;--main-text-color:#333;--sub-text-color:#555;--cal-text-color:#888;--main-check-color:#F3A738;--main-check-mark-color:#eee;--sub-check-color:#aaabbc;--sub-check-mark-color:#eee;--main-border-color:#aaabbc;--reorder-button-color:#F3A738;--submit-button-color:#2c7ee0}html{font-size:16px}body{color:var(--sub-text-color);background-color:var(--main-bg-color);font-size:1rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans JP",sans-serif}h1,h2,h3{font-weight:700}h1{font-size:1.75rem;padding-bottom:.5rem}h2{font-size:1.5rem;padding-bottom:.5rem}h3{font-size:1.25rem;padding-bottom:.5rem}#header-menu-container{max-width:500px;margin-inline:auto;display:grid;grid-template-columns:50px 1fr 100px}#settings-btn{all:unset;display:inline-block;text-align:center;cursor:pointer;background-color:var(--sub-bg-color);padding:15px}#bulk-feed-checkbox-container{grid-column:3 / 4;font-size:.6rem;padding-top:15px;padding-right:13px;text-align:right}#bulk-feed-checkbox-container label{display:inline-flex;align-items:center;gap:4px}#bulk-feed-checkbox-container label input[type="checkbox"]{margin:0;vertical-align:middle}main{padding:10px}#pet-list{max-width:500px;margin-inline:auto;display:flex;flex-direction:column;gap:10px}#empty-message{margin:10px}#tool-container{display:flex;gap:10px;max-width:500px;margin-inline:auto;margin-top:10px}#add-pet-btn,#reorder-toggle-btn{all:unset;display:inline-block;text-align:center;cursor:pointer;background-color:var(--sub-bg-color)}#add-pet-btn{padding:15px 15px}#reorder-toggle-btn{padding:15px 11px}#reorder-toggle-btn:disabled{opacity:.5;cursor:default}body.reorder-mode #reorder-toggle-btn{background-color:var(--reorder-button-color)}.pet-entry{position:relative;background-color:var(--sub-bg-color);padding:5px;display:grid;grid-template-rows:24px 50px 50px;grid-template-columns:24px 74px 1fr 48px}.hide-feed-date{grid-template-rows:24px 50px 27px}.hide-feed-date .feed-history .history-item .has-feed::before,.hide-feed-date .feed-history .history-item .has-feed span,.hide-feed-date .feed-history .history-item .today-feed-check::before,.hide-feed-date .feed-history .history-item .date-label span{display:none}.edit-pet-btn{all:unset;display:inline-block;text-align:center;cursor:pointer;font-size:.5rem;transform:rotate(-45deg)}body.reorder-mode .edit-pet-btn{display:none}.pet-image{image-rendering:pixelated;padding:5px;grid-row:1 / 3;grid-column:2 / 3;width:64px;height:64px}.pet-info{grid-row:1 / 3;grid-column:3 / 4;display:flex;flex-direction:column;padding-left:5px}.pet-type{font-size:1rem;padding-top:5px}.pet-name{font-size:1.5rem;font-weight:700;padding-top:5px}.last-feed{grid-row:1 / 3;grid-column:4 / 5;text-align:center}.last-feed-label{font-size:.6rem;margin-bottom:2px}.feed-days-unit{font-size:.6rem}.last-feed-days.ideal{color:#28a745}.last-feed-days.too-late{color:#d9534f;font-weight:700}.feed-status-text{position:absolute;right:0;font-size:1rem;padding-top:5px;padding-right:5px}.feed-history{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));width:100%;gap:0;grid-row:3 / 4;grid-column:1 / 5}.history-item{text-align:center}.has-feed{position:relative;font-size:.8rem;display:inline-block;width:16px;height:16px;border:2px solid var(--sub-check-color);border-radius:2px;background-color:var(--sub-check-color);margin-bottom:3px}.has-feed::after{content:"";position:absolute;top:3px;left:1px;width:14px;height:8px;border-left:4px solid var(--sub-check-mark-color);border-bottom:4px solid var(--sub-check-mark-color);transform:rotate(-45deg)}.has-feed .month,.has-feed .day{position:relative;display:inline-block;top:20px;color:var(--cal-text-color)}.has-feed .month{left:-.4rem}.has-feed .day{left:.4rem}.has-feed::before,.today-feed-check::before{content:"";position:absolute;top:22px;left:8px;width:1px;height:18px;background-color:var(--cal-text-color);transform:rotate(45deg)}.no-feed::before{content:"";display:inline-block;width:5px;height:5px;background-color:var(--main-border-color);border-radius:50%}.date-label{display:flex;flex-direction:column;font-size:.8rem;color:var(--cal-text-color)}.date-label .month{position:relative;left:-.4rem}.date-label .day{position:relative;left:.4rem}#bulk-feed-checkbox,.today-feed-check{appearance:none;margin:0;position:relative;width:20px;height:20px;background-color:var(--sub-bg-color);border:2px solid var(--sub-check-color);border-radius:2px;cursor:pointer}#bulk-feed-checkbox:indeterminate,.today-feed-check:indeterminate,#bulk-feed-checkbox:checked,.today-feed-check:checked{background-color:var(--main-check-color);;border:2px solid var(--main-check-color);}#bulk-feed-checkbox:indeterminate::after,.today-feed-check:indeterminate::after{content:"";position:absolute;top:1px;left:1px;width:14px;height:5px;border-bottom:4px solid var(--main-check-mark-color);border-left:none}#bulk-feed-checkbox:checked::after,.today-feed-check:checked::after{content:"";position:absolute;top:3px;left:1px;width:14px;height:8px;border-bottom:4px solid var(--main-check-mark-color);border-left:4px solid var(--main-check-mark-color);transform:rotate(-45deg)}#bulk-feed-checkbox:disabled{appearance:none;margin:0;position:relative;width:20px;height:20px;background-color:var(--sub-bg-color);border:2px solid var(--sub-check-color);border-radius:2px;cursor:default;opacity:.5}#bulk-feed-checkbox:disabled::after{display:none}.reorder-controls{position:relative;height:124px;width:24px;display:grid;gap:10px;grid-template-rows:repeat(auto-fit,minmax(0,1fr));grid-row:1 / 2;grid-column:1 / 5}.hide-feed-date .reorder-controls{height:101px}.reorder-up,.reorder-down{all:unset;display:inline-block;text-align:center;cursor:pointer;background-color:var(--sub-bg-color);border-left:2px solid var(--reorder-button-color);width:100%}#settings-modal,#edit-modal,#add-modal{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--modal-bg-color);z-index:1000;justify-content:center;overflow:auto}.modal-content{width:500px;margin:0 10px}.modal-content input{outline:none;box-shadow:none;box-sizing:border-box;color:var(--main-text-color);background-color:var(--modal-bg-color);border:1px solid var(--main-border-color);border-radius:6px;margin:0 5px;padding:6px 8px;font-size:.8rem}.modal-content input:focus{outline:none;box-shadow:none;box-sizing:border-box;border:2px solid var(--submit-button-color);padding:5px 7px}#tab-history,#add-form,#edit-form{display:flex;flex-flow:column;gap:15px}.form-info{font-weight:700}.line{background-color:var(--main-border-color);height:1px}.ideal-days-input{width:50px}#save-display-settings-btn,#quick-add-btn,#feed-day-submit-btn,.delete-history-btn,.cancel-btn,.submit-btn{outline:none;box-shadow:none;box-sizing:border-box;border-radius:6px;margin:0;padding:6px 8px;font-size:.8rem}#save-display-settings-btn,#feed-day-submit-btn,#quick-add-btn{background-color:var(--submit-button-color);border:1px solid var(--submit-button-color);color:#fff}#history-list li{display:flex;justify-content:space-between;align-items:center;padding:10px;gap:15px}#history-list li:nth-child(odd){background-color:var(--main-bg-color)}#history-list span{flex-grow:1;white-space:nowrap}.delete-history-btn{background-color:var(--modal-bg-color);border:1px solid #f53636;color:#f53636}.cancel-btn{background-color:var(--sub-bg-color);border:1px solid var(--main-border-color);color:var(--sub-text-color)}.submit-btn{background-color:var(--submit-button-color);border:1px solid var(--submit-button-color);color:#fff}.modal-header{display:grid;grid-template-columns:1fr 50px;padding-bottom:15px}.modal-header h2{display:inline-flex;align-items:center;padding:0}.modal-header button{all:unset;display:inline-block;text-align:center;cursor:pointer;background-color:var(--main-border-color);color:#fff;padding:15px}.tab-header{display:flex;border-bottom:1px solid var(--main-border-color);margin-bottom:15px}.tab-btn{padding:10px 20px;border:none;background:none;border-bottom:2px solid transparent;cursor:pointer;font-weight:700;color:var(--sub-text-color)}.tab-btn.active{border-bottom:2px solid var(--submit-button-color);color:var(--submit-button-color)}#quick-days-select{font-size:2rem}.image-upload-container{position:relative;width:64px;height:64px;border:1px solid var(--main-border-color);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-color:var(--modal-bg-color)}.image-upload-container.uploaded{border:1px solid var(--main-border-color)}.image-upload-container img{border-radius:5px;image-rendering:pixelated}.plus-icon{position:relative;width:24px;height:24px}.plus-icon::before,.plus-icon::after{content:'';position:absolute;background-color:var(--main-border-color);top:50%;left:50%;transform:translate(-50%,-50%)}.plus-icon::before{width:16px;height:2px}.plus-icon::after{width:2px;height:16px}.delete-button{position:absolute;top:-10px;right:-10px;width:24px;height:24px;background-color:rgba(64,64,64,.5);border:none;border-radius:50%;cursor:pointer;display:none;z-index:10;padding:0}.delete-button::before,.delete-button::after{content:'';position:absolute;top:50%;left:50%;width:12px;height:2px;background-color:#fff;transform-origin:center}.delete-button::before{transform:translate(-50%,-50%) rotate(45deg)}.delete-button::after{transform:translate(-50%,-50%) rotate(-45deg)}