@import url("https://ch-api.healthhub.sg/api/public/content/ed99bba44ab041e4935bf01f3dd8120d");
@media (max-width: 767px) {
  .hpb-container.nutrition h2, .hpb-container.nutrition .f2 {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .hpb-container.nutrition h3, .hpb-container.nutrition .f3 {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .hpb-container.nutrition p, .hpb-container.nutrition h5, .hpb-container.nutrition .f5 {
    font-size: 16px;
  }
}
.hpb-container.nutrition h6, .hpb-container.nutrition .f6 {
  font-size: 14px;
}
@media (max-width: 767px) {
  .hpb-container.nutrition h6, .hpb-container.nutrition .f6 {
    font-size: 14px;
  }
}

.hpb-container.nutrition .panel-nutrition {
  border-radius: 12px;
}

.hpb-container.nutrition .well {
  background-color: #FAFAFA;
  border: 0;
  border-radius: 12px;
  padding: 24px 16px;
}
.hpb-container.nutrition .well.yellow {
  background-color: #FEE9B9;
}
.hpb-container.nutrition .well.color-grade-a {
  background-color: #008A4B;
}
.hpb-container.nutrition .well.color-grade-b {
  background-color: #80C342;
}
.hpb-container.nutrition .well.color-grade-c {
  background-color: #FAA73F;
}
.hpb-container.nutrition .well.color-grade-d {
  background-color: #BA2127;
}
@media (min-width: 768px) {
  .hpb-container.nutrition .well {
    padding: 30px 32px;
  }
  .hpb-container.nutrition .well .well {
    padding: 22px 24px;
  }
}

.hpb-container.nutrition .btn-rounded {
  padding: 9px 10px;
}
@media (min-width: 768px) {
  .hpb-container.nutrition .btn-rounded {
    padding: 10px;
    min-width: 140px;
  }
}

.hpb-container .intro .masthead {
  background: url(https://ch-api.healthhub.sg/api/public/content/c4610a7125ab44429c8d57382e8ffd40) center center/cover no-repeat;
}

@media (max-width: 991px) {
  .hpb-container.nutrition .intro .masthead::before {
    content: "";
    display: block;
    padding-bottom: 30%;
  }
}

.hpb-container.nutrition.nutri-grade-a-and-b-drinks .intro .masthead::before {
  content: "";
  display: block;
  padding-bottom: 0;
}

.hpb-container.nutrition.nutri-grade-a-and-b-drinks .intro .masthead {
  background: none;
}

@media (max-width: 767px) {
  .hpb-container.nutrition .nutri-grade-directory .left-side {
    position: relative;
  }
}
.hpb-container.nutrition .nutri-grade-directory .sidebar {
  background-color: #B1E6CB;
  border-radius: 8px;
  padding: 15px;
}
@media (max-width: 767px) {
  .hpb-container.nutrition .nutri-grade-directory .sidebar {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
    right: 15px;
    width: 280px;
    max-width: calc(100% - 80px);
    -webkit-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
  }
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .close-sidebar {
  display: none;
}
@media (max-width: 767px) {
  .hpb-container.nutrition .nutri-grade-directory .sidebar .close-sidebar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 8px 0 12px;
  }
  .hpb-container.nutrition .nutri-grade-directory .sidebar .close-sidebar a {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
  }
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group .title {
  font-weight: 800;
  color: #444;
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group ul li {
  font-weight: bold;
  margin: 10px 0 0 0;
}
@media (min-width: 768px) {
  .hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group ul li {
    margin-top: 14px;
  }
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group ul li a {
  display: block;
  font-size: inherit;
  font-weight: inherit;
  color: #444;
  text-decoration: none;
  -webkit-transition: color 0.1s ease-in;
  -o-transition: color 0.1s ease-in;
  transition: color 0.1s ease-in;
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group ul li a.tick-box::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  margin-bottom: -0.3em;
  background: url(https://ch-api.healthhub.sg/api/public/content/d04734a9da944debbce806acee3277a8) center center/contain no-repeat, url(https://ch-api.healthhub.sg/api/public/content/d27bf5dad4954f298fbe229432ad739d) center center/contain no-repeat;
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group ul li.active a {
  color: #01803D;
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group ul li:not(.active) a {
  color: #444;
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group ul li:not(.active) a.tick-box::before {
  background-image: none, url(https://ch-api.healthhub.sg/api/public/content/d27bf5dad4954f298fbe229432ad739d);
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group .filter-subgroup li {
  font-weight: normal;
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group .filter-subgroup li.has-sub-category > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group .filter-subgroup li.has-sub-category > div .arrow {
  display: block;
  padding: 5px 8px;
  -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transition: -webkit-transform 0.1s ease-in-out;
  transition: -webkit-transform 0.1s ease-in-out;
  -o-transition: transform 0.1s ease-in-out;
  transition: transform 0.1s ease-in-out;
  transition: transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
  margin-right: -5px;
  cursor: pointer;
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group .filter-subgroup li.has-sub-category > div .arrow::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: url(https://ch-api.healthhub.sg/api/public/content/b58fcc2244a34b34b3ca29d0d74afd27) center center/contain no-repeat;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group .filter-subgroup li.has-sub-category > .filter-list {
  overflow: hidden;
  max-height: 0;
  margin-left: 20px;
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group .filter-subgroup li.has-sub-category.is-open .arrow {
  -webkit-transform: scale(1, -1);
      -ms-transform: scale(1, -1);
          transform: scale(1, -1);
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group .filter-subgroup li.has-sub-category.is-open > .filter-list {
  max-height: 1000vh;
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group .btn-filter-apply {
  display: none;
  cursor: pointer;
  background-color: #c84e4f;
  color: white;
  padding: 5px 10px;
  border-radius: 50px;
  width: 100px;
  text-align: center;
  margin-top: 15px;
}
@media (max-width: 768px) {
  .hpb-container.nutrition .nutri-grade-directory .sidebar .filter-group .btn-filter-apply {
    display: block;
  }
}
.hpb-container.nutrition .nutri-grade-directory .sidebar .deselect-all {
  color: inherit;
}
@media (min-width: 768px) {
  .hpb-container.nutrition .nutri-grade-directory .sidebar .deselect-all {
    margin-left: 10px;
    float: right;
  }
}
@media (max-width: 767px) {
  .hpb-container.nutrition .nutri-grade-directory .sidebar.show-sidebar {
    opacity: 1;
    pointer-events: all;
  }
}
.hpb-container.nutrition .nutri-grade-directory .searchbar {
  padding: 15px;
  background-color: #B1E6CB;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-radius: 8px;
}
.hpb-container.nutrition .nutri-grade-directory .searchbar .search-input {
  position: relative;
  width: 240px;
}
@media (min-width: 768px) {
  .hpb-container.nutrition .nutri-grade-directory .searchbar .search-input {
    width: 280px;
  }
}
.hpb-container.nutrition .nutri-grade-directory .searchbar .search-input input {
  font-size: 12px;
  padding: 8px;
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid #01803D;
  border-radius: 5px;
}
.hpb-container.nutrition .nutri-grade-directory .searchbar .search-input .icon {
  display: block;
  position: absolute;
  right: 5px;
  top: 20%;
  height: 60%;
  margin: 0;
}
.hpb-container.nutrition .nutri-grade-directory .searchbar .search-input .icon.clear {
  display: none;
  cursor: pointer;
}
.hpb-container.nutrition .nutri-grade-directory .searchbar .search-filter a {
  text-decoration: none;
  color: inherit;
  font-size: 13px;
  font-weight: 600;
}
.hpb-container.nutrition .nutri-grade-directory .searchbar .search-filter .icon-filter {
  height: 0.8em;
  position: relative;
  top: -0.1em;
}
.hpb-container.nutrition .nutri-grade-directory .searchbar.has-text .search-input .icon {
  display: none;
}
.hpb-container.nutrition .nutri-grade-directory .searchbar.has-text .search-input .icon.clear {
  display: block;
}
.hpb-container.nutrition .nutri-grade-directory .search-info {
  font-size: 13px;
  font-weight: 600;
}
.hpb-container.nutrition .nutri-grade-directory .searchresult {
  padding: 15px;
  background-color: #E6E6E6;
  border-radius: 8px;
}
.hpb-container.nutrition .nutri-grade-directory .searchresult .results-container {
  margin-left: -15px;
  margin-bottom: -15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.hpb-container.nutrition .nutri-grade-directory .searchresult .results-container .result-card {
  padding: 0 0 15px 15px;
  width: 100%;
  min-height: 150px;
}
@media (min-width: 992px) {
  .hpb-container.nutrition .nutri-grade-directory .searchresult .results-container .result-card {
    width: 50%;
  }
}
.hpb-container.nutrition .nutri-grade-directory .searchresult .results-container .result-card .card-wrapper {
  height: 100%;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 8px;
}
.hpb-container.nutrition .nutri-grade-directory .searchresult .results-container .result-card .card-wrapper .brand {
  font-weight: 600;
  color: #01803D;
}
.hpb-container.nutrition .nutri-grade-directory .searchresult .results-container .result-card .card-wrapper .product {
  font-weight: bold;
  color: #01803D;
}
.hpb-container.nutrition .nutri-grade-directory .searchresult .results-container .result-card .card-wrapper .grade {
  font-weight: 600;
  color: #444444;
}
.hpb-container.nutrition .nutri-grade-directory .searchresult .results-container .result-card .card-wrapper .endorsements {
  font-weight: 400;
  color: #444444;
}
.hpb-container.nutrition .nutri-grade-directory .searchresult .results-container .result-card .card-wrapper .right-content {
  width: 20%;
  max-width: 100px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.hpb-container.nutrition .nutri-grade-directory .searchresult .page-numbers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hpb-container.nutrition .nutri-grade-directory .searchresult .page-numbers li {
  padding: 0;
  margin: 10px 5px 0 5px;
}
.hpb-container.nutrition .nutri-grade-directory .searchresult .page-numbers li .page-btn {
  font-size: 13px;
  text-decoration: none;
  color: #868686;
  font-weight: 600;
}
.hpb-container.nutrition .nutri-grade-directory .searchresult .page-numbers li.active .page-btn {
  color: #000;
}

.hpb-container.nutrition .nutri-grade-data {
  display: none !important;
}