*{margin:0;padding:0;font-family:Inria Sans,sans-serif}:root{--bg: #F1F1F1;--aqua: #7DE2D1;--dark-aqua: #339989;--fore-light: #2B2C28;--fore-dark: #131515}#app{background-color:var(--bg);min-height:100vh}.page-section{padding:20px;width:35%;align-self:center;box-shadow:4px 4px 4px #00000040;display:flex;flex-direction:column;gap:15px;color:var(--fore-dark)}.cancel-btn{padding:5px 10px;border:1px solid #ff4d4d;border-radius:5px;transition:.15s}.cancel-btn:hover{background-color:#ffa7a7;cursor:pointer}@media(max-width:900px){.page-section{width:60%}}@media(max-width:425px){.page-section{width:80%}}.signup-overlay{position:absolute;width:100%;height:100%;background-color:#0000001a}.signup-window{position:relative;top:50%;left:50%;transform:translate(-50%,-50%);width:750px;height:650px;background-color:var(--bg);box-shadow:4px 4px 4px #0000004d,4px 4px 4px #fff inset;border-radius:10px;display:flex;flex-direction:column;align-items:center}.signup-top-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:30px 50px;gap:250px}.signup-mode-button{color:var(--fore-light);border:0px;width:140px;height:55px;border-radius:10px;cursor:pointer;font-size:20px;transition:.2s}.mode-active{color:var(--fore-dark);border:1px solid var(--fore-dark);cursor:auto}.mode-active:hover{background-color:var(--bg)}.signup-form,.login-form{display:flex;width:50%;justify-content:center;flex:1;padding-bottom:80px}.signup-form form,.login-form form{display:flex;flex-direction:column;justify-content:center}.signup-form form button,.login-form form button{width:35%;align-self:center;margin-top:30px;width:100px;height:40px;border-radius:5px;background-color:var(--aqua);border:0px;box-shadow:4px 4px 4px #00000040;font-size:20px;transition:.2s;cursor:pointer}.signup-form form button:hover,.login-form form button:hover{background-color:var(--dark-aqua);transform:translateY(-3px)}.login-form label,.signup-form label{font-size:20px;margin-top:17px;margin-bottom:3px}.login-form input,.signup-form input{width:320px;height:30px;border-radius:5px;border:0px;box-shadow:4px 4px 4px #00000040,4px 4px 4px #ffffff40 inset}.signup-window .error-text{color:red;text-align:center;margin-top:25px}@media(max-width:800px){.signup-window{width:90%;height:auto}.signup-top-section{flex-direction:column;gap:20px}.signup-form,.login-form{width:80%}.login-form input,.signup-form input{width:100%}}header{display:flex;justify-content:space-between;align-items:center;padding:30px 50px;color:var(--fore-dark);border-bottom:1px solid var(--fore-dark)}header h2{font-size:24px}header img{transition:.2s ease-in-out;height:35px}header img:hover{cursor:pointer;transform:scale(1.1)}@media(max-width:400px){header{padding:30px 20px}}:root{--slider-bg: #cbcbcb;--slider-fill: #ff0000}.slider-container{display:flex;gap:6px;width:100%;align-items:flex-start;justify-content:space-between}.slider-container label{font-size:16px;font-weight:600}.rside-slider{display:flex;flex-direction:column;align-items:center;padding-top:7px}.rside-slider input[type=range]{width:160px;height:8px;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none}.rside-slider input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--slider-fill) 0%,var(--slider-fill) calc(var(--val-percent) * 1%),var(--slider-bg) calc(var(--val-percent) * 1%),var(--slider-bg) 100%)}.rside-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0}.rside-slider input[type=range]::-moz-range-progress{background:var(--slider-fill);height:8px;border-radius:4px}.rside-slider input[type=range]::-moz-range-track{background:var(--slider-bg);height:8px;border-radius:4px}.rside-slider input[type=range]::-moz-range-thumb{width:0;height:0;border:none}.rside-slider p{margin:0;font-size:.85rem;color:#444}.today-overview{flex-direction:row;justify-content:space-between}.lside-today{display:flex;flex-direction:column;gap:10px;width:30%}.rside-today{width:50%}.today-overview select{padding:5px;border-radius:5px;border:1px solid #ccc;cursor:pointer;font-size:16px}@media(max-width:1370px){.today-overview{flex-direction:column;align-items:center;gap:30px}.lside-today,.rside-today{width:100%}}@media(max-width:730px){.today-overview select{width:100%}}.plan-section{flex-direction:row;justify-content:space-between}.plan-section input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:0;height:0;margin:0;padding:0;border:none}.plan-section label{display:block;width:80%;padding:3px 10px;border-radius:5px;cursor:pointer;text-align:center;font-weight:600;transition:.15s}.plan-list{display:flex;flex-direction:column;max-height:300px;overflow-y:auto;margin-bottom:15px}.plan-section input[type=radio]:checked+label{background-color:var(--aqua)}.top-lside-plans{display:flex;gap:15px;align-items:center;margin-bottom:15px}.top-lside-plans button{width:20px;height:20px}.top-lside-plans button:not(:disabled){cursor:pointer}.rside-plans{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;width:50%}.create-plan-section{display:flex;flex-direction:column;align-self:center;gap:15px;box-shadow:4px 4px 4px #00000040,4px 4px 4px #ffffff40 inset;padding:20px;text-align:center;color:var(--fore-dark)}.create-plan-section button{width:100px;height:30px;align-self:center;cursor:pointer;font-weight:600}.plan-create-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center}.plan-create-window{background-color:var(--bg);border-radius:10px;padding:30px;color:var(--fore-dark);display:flex;flex-direction:column;align-items:center}.plan-create-overlay h2{margin-top:0;margin-bottom:20px;text-align:center}.plan-create-window form{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}.plan-create-window form button{margin-top:10px;padding:10px 20px;background-color:var(--aqua);color:var(--fore-dark);border:none;border-radius:5px;cursor:pointer;transition:.15s;align-self:center}.plan-create-window form button:hover{background-color:var(--dark-aqua)}.plan-create-window form div{display:flex;justify-content:space-between;gap:50px}@media(max-width:400px){.plan-create-window form div{flex-direction:column;gap:5px}.plan-create-window form div label{text-align:left}.plan-create-window form div input{width:250px}}.log-food{text-align:center;margin-bottom:150px}.log-food button{width:100px;height:30px;align-self:center;cursor:pointer;font-weight:600}.eaten-today{text-align:center;gap:30px}main{display:flex;flex-direction:column;gap:75px}
