:root{--bg-primary:#575757;--bg-header:#1c1c1c;--bg-body:#404040;--bg-error:#e41b5e;--font-color:#dcdbd5;--font-color-dark:#272620;--complement:#ef9b08;--complement-light:#faca75;--call-to-action:#08cfef;--call-to-action-highlight:#89ebfb;--analogous-one:#cfef08;--analogous-two:#5cef08;--analogous-three:#08ef9b;--banner-good:#44b206}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body{width:100vw;overflow-x:none;background-color:var(--bg-primary)}dialog{border:1px solid var(--complement);width:450px;margin:auto}dialog::backdrop{background-color:#00000080}.header-banner{background-color:var(--bg-header);color:var(--font-color);text-align:center;padding:50px;font-size:1.3em}nav{background:linear-gradient(var(--bg-body) 70%, var(--bg-header));flex-direction:row;gap:10px;display:flex}nav span{color:var(--font-color);cursor:pointer;padding:10px;display:inline-block}nav span.active{color:var(--call-to-action)}nav span:hover{background:linear-gradient(var(--call-to-action) 70%, var(--bg-header));color:var(--font-color-dark)}.error-container{background-color:var(--bg-error);color:var(--font-color-dark);border-radius:10px 0 0 10px;padding:10px;transition:all .5s;position:absolute;top:10px;left:70%;right:0}.error-container-slide{translate:100%}.toast-container{color:var(--font-color-dark);border-radius:10px 0 0 10px;padding:10px;transition:all .5s;position:fixed;top:10px;left:50%;right:0}.toast-container-slide{translate:100%}.message-banner{width:90%;color:var(--font-color-dark);margin:5px auto;padding:10px}.message-banner-x{float:right;cursor:pointer}.message-banner-color-bad{background-color:var(--bg-error)}.message-banner-color-good{background-color:var(--banner-good)}.footer-banner{background-color:var(--bg-header);color:var(--font-color);text-align:center;padding:50px}.container{grid-template-columns:repeat(4,minmax(min-content,275px));grid-template-areas:".generalForm generalForm.""userInfo userInfo dailyMacros dailyMacros"". .macroHistory macroHistory";justify-content:center;gap:5px;padding:5px;display:grid}.container-item{background-color:var(--bg-body);color:var(--font-color);border-radius:5px}.container-item-body{padding:5px}.container-item-header{background-color:var(--bg-header);border-radius:5px 5px 0 0;padding:5px;font-size:1.4em}.macro-history{grid-area:macroHistory}.user-info{grid-area:userInfo}.daily-macros{grid-area:dailyMacros}.general-form-container{grid-area:generalForm}.button{color:var(--font-color-dark);background-color:var(--call-to-action);border:2px solid var(--call-to-action-highlight);cursor:pointer;border-radius:10px;width:100%;margin:5px auto;padding:10px 30px;font-size:1.2em;transition-duration:.2s;display:inline-block}.button:active{background-color:var(--call-to-action-highlight);transition:none}.modal-button-container{flex-direction:row;justify-content:space-around;gap:5px;width:100%;padding:5px;display:flex}form label{width:90%;margin:2px auto;display:block}.input{background-color:var(--bg-body);color:var(--font-color);border-radius:5px;width:90%;margin:0 auto;padding:5px;font-size:1.2em;display:block}.remember-me{width:90%;margin:10px auto}.remember-me label{vertical-align:middle;margin-right:5px;display:inline}.remember-me input{vertical-align:middle;width:1.2rem;height:1.2rem;display:inline-block}.input:focus,.textarea:focus{outline:2px solid var(--complement)}.submit{width:60%;margin:10px auto;display:block}.textarea{resize:none;background-color:var(--bg-body);width:90%;height:5em;color:var(--font-color);border-radius:5px;margin:0 auto;padding:3px;font-size:1.2em;display:block}.slider{appearance:none;background:var(--bg-primary);outline:none;width:80%;height:6px;margin:15px auto;display:block;position:relative}.slider::-webkit-slider-thumb{appearance:none;background:var(--call-to-action);cursor:pointer;border-radius:2px;width:10px;height:20px;position:relative}.slider:after{content:attr(max);color:var(--font-color);text-align:center;position:absolute;top:-50%;right:-6%}.slider:before{content:attr(min);color:var(--font-color);text-align:center;position:absolute;top:-50%;left:-7%}.link{color:var(--complement-light);cursor:pointer;text-decoration:underline}.loader{border:10px solid var(--bg-primary);border-bottom:5px solid var(--call-to-action);border-radius:50%;width:50px;height:50px;margin:auto;animation:1.5s linear infinite forwards loader}@keyframes loader{0%{rotate:0deg}to{rotate:360deg}}.color-calories{color:var(--complement)}.color-protein{color:var(--analogous-one)}.color-carbohydrates{color:var(--analogous-two)}.color-fats{color:var(--analogous-three)}.accordion-header{text-align:left;width:100%;color:var(--font-color);background-color:var(--bg-primary);border:none;border-radius:5px;margin-top:3px;padding:4px;font-size:1.2em;display:block}.accordion-header-selected{background-color:hsl(from var(--bg-primary) h s calc(l + 5));border-radius:5px 5px 0 0}.accordion-header:hover{background-color:hsl(from var(--bg-primary) h s calc(l + 5))}.accordion-icon{margin:0 5px;font-weight:bolder;transition:all .3s;display:inline-block}.rotate90{rotate:90deg}.accordion-body{height:0;transition:height .2s ease-in-out;display:block;overflow:hidden}.accordion-item{background-color:var(--bg-primary);border-bottom:1px solid var(--font-color);flex-direction:row;justify-content:space-between;display:flex}.accordion-item:last-child{border:none;border-radius:0 0 5px 5px}.accordion-item:hover{background-color:hsl(from var(--bg-primary) h s calc(l + 5))}.accordion-item-title{align-items:center;padding-left:10px;display:flex}.accordion-item-macro-grid{grid-template-columns:repeat(2,minmax(min-content,20px));grid-template-areas:"calories protein""carbohydrates fats";gap:2px 10px;display:grid}.calories{grid-area:calories}.protein{grid-area:protein}.carbohydrates{grid-area:carbohydrates}.fats{grid-area:fats}.daily-macros-container{grid-template-columns:repeat(2,minmax(min-content,100px));justify-content:center;gap:5px;display:grid}.daily-macro-container{background-color:var(--bg-header);border-radius:10px;flex-direction:column;justify-content:center;width:200px;padding:0;display:flex}.daily-macro-count{text-align:center;padding-top:5px;font-size:2em}.daily-macro-count span{font-size:.4em}.daily-macro-progress-bar{background-color:var(--bg-body);border-radius:0 0 5px 5px;width:100%;height:10px;position:relative}.daily-macro-progress{border-radius:0 0 0 3px;position:absolute;inset:0}.daily-macro-label{color:var(--font-color)}@media only screen and (width<=600px){.container{grid-template-columns:1fr;grid-template-areas:"generalForm""userInfo""dailyMacros""macroHistory"}.error-container,.toast-container{left:10px}dialog{width:90vw;height:90vh}}
