@import url("/administrate/css/font.css");
@import url("/user/css/components/error.css");
@import url("/user/css/components/button.css");
@import url("/user/css/components/calendar.css");
@import url("/user/css/components/divider.css");
@import url("/user/css/components/alert.css");
@import url("/user/css/header-nav.css");
@import url("/user/css/header-process-bar.css");
@import url("/user/css/login-page.css");
@import url("/user/css/survey.css");
@import url("/user/css/signup-complete.css");
@import url("/user/css/color.css");
@import url("/user/css/todays-cpf.css");
@import url("/user/css/meal-log.css");
@import url("/user/css/components/nav-bottom.css");
@import url("/user/css/components/toast.css");
@import url("/user/css/home-meal.css");
@import url("/user/css/home-meal-search.css");
@import url("/user/css/home-meal-regist.css");
@import url("/user/css/home-add-new-food.css");
@import url("/user/css/consumed-food.css");
@import url("/user/css/components/popup.css");


html, body {
    height: 100%;
    margin: 0;
}

#main {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    background: #f8f8f8;
}

#main .content-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    background-color: #FFFDFD;
    z-index: 1;
}

.title-format {
    font-size: clamp(16px, 5.336vw, 26.67px);
    font-weight: 600;
    color: var(--black100);
    margin-bottom: clamp(24px, 9.6vw, 48px);
}

.second-title-format {
    font-size: clamp(16px, 5.336vw, 26.67px);
    font-weight: 600;
    color: var(--black100);
    margin-bottom: clamp(20px, 6.4vw, 28px);
}

.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.root-container {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    background: white;
    overflow: hidden;
  }
  
  @media (min-width: 500px) {
    .root-container {
      width: 500px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }
  }
  
.padding {
    padding: clamp(24px, 8vw, 40px) clamp(12.8px, 4.26vw, 21.33px);
}