.bmi-meter .group {
  position: relative;
  box-sizing: border-box;
  width: 412px;
  margin: 0 0 63px;
  padding: 34px;
  background-image: linear-gradient(
    270deg,
    #f1ece5 0%,
    rgb(241 236 229 / 40%) 98%
  );
}

.bmi-meter .group h3,
.bmi-meter .group label {
  margin: 0;
  text-align: center;
  font-family: proxima-nova;
  font-size: 16px;
  font-weight: bold;
  color: #f26645;
}

.bmi-meter .group.height .graphic {
  position: absolute;
  top: -15px;
  left: -30px;
  width: 160px;
  height: 51px;
  background: url(/static/images/bg-overlay-header@2x.png);
  background-size: 100% 100%;
}

.bmi-meter .group.weight .graphic {
  position: absolute;
  top: -50px;
  left: -15px;
  width: 138px;
  height: 167px;
  background: url(/static/images/bmi-meter-weegschaal@2x.png);
  background-size: 100% 100%;
}

.bmi-meter form .fieldset {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  align-items: center;
}

.bmi-meter input[name='gender'] {
  display: none;
}

.bmi-meter .gender-choices {
  display: flex;
}

.bmi-meter .age {
  margin-top: 14px;
}

.bmi-meter .age .label-wrapper {
  display: flex;
  width: 40px;
  height: 50px;
  padding: 0;
  background-color: #fff;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.bmi-meter .age label.inline[for='bmi-age'] {
  padding: 0;
  font-weight: normal;
  color: #888;
  flex: 0 0 auto;
}

.bmi-meter .age-input-wrapper {
  display: flex;
}

.bmi-meter .gender {
  display: flex;
  margin: 0 20px 0 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: #3f3f3f;
}

.bmi-meter .gender[for='bmi-male'] {
  width: 128px;
  height: 110px;
  margin: 0;
  padding: 0;
}

.bmi-meter .gender[for='bmi-male']::before {
  content: '';
  display: block;
  width: 52px;
  height: 82px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='33' height='60' viewBox='0 0 33 60' xmlns='http://www.w3.org/2000/svg' fill='%23888'%3E%3Cpath d='M31.072 28.052c0-5.101-.185-9.832-.463-13.542-1.206-.556-4.267-1.948-5.473-2.504-1.577-.742-2.504-5.102-2.597-5.565 0-.186.093-.371.278-.371.186 0 .371.092.371.278.371 1.762 1.206 4.638 2.134 5.101 1.02.557 3.71 1.67 5.101 2.32-.37-4.36-.742-7.328-1.113-8.163-.093-.278-.185-.371-.37-.557l-2.041-.556h1.855v-3.34c0-.092-.279 0-.464-.37H4.916c-.186.37-.464.278-.464.37v3.154h1.855l-2.04.557c-.093.278-.279.37-.371.649-.279.835-.742 3.71-1.113 8.07 1.39-.65 4.08-1.855 5.101-2.32.928-.463 1.855-3.338 2.133-5.1 0-.186.186-.279.371-.279.186 0 .279.186.279.371-.093.464-.928 4.823-2.597 5.565-1.206.557-4.267 1.948-5.473 2.505-.278 3.71-.464 8.44-.464 13.542C2.133 38.719.463 56.064 0 58.475c2.783 1.299 9.368 1.763 13.45.928.185-1.948 1.112-18.18 1.669-29.96.185-5.101.742-9.739 1.391-10.295.65.556 1.206 5.194 1.391 10.295.557 11.78 1.485 28.012 1.67 29.96 4.081.835 10.667.37 13.45-.928-.186-2.318-1.949-19.663-1.949-30.423z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.bmi-meter .gender[for='bmi-female'] {
  width: 128px;
  height: 110px;
  margin: 0;
  padding: 0;
}

.bmi-meter .gender[for='bmi-female']::before {
  content: '';
  display: block;
  width: 52px;
  height: 82px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='64' viewBox='0 0 24 64' xmlns='http://www.w3.org/2000/svg' fill='%23888'%3E%3Cpath d='M23.348 10.8c-1.206-.092-2.319-.463-3.247-1.298-1.113-.928-1.762-2.226-1.855-3.71 0-.279.186-.464.464-.557.278 0 .464.186.557.464.092 1.206.649 2.226 1.576 3.06.743.65 1.67 1.021 2.598 1.021 0-2.597-.557-6.029-1.763-7.328 0-1.113 0-2.133-.278-2.411-.278-.186-1.67.278-4.081 1.02l.65 2.319-.928.278-.742-2.319c-.65.186-1.392.371-2.134.65-.65.185-2.782.278-3.06.278-2.134 0-3.896-.186-5.659-.371L5.168 4.4l-.927-.092.278-2.505A307.938 307.938 0 0 0 .9 1.525c-.927 0 .186 3.154-.37 3.432-.372.185-.464 3.339-.279 6.307 2.04-.185 3.803-2.04 4.081-4.452 0-.278.279-.464.557-.464s.464.278.464.557c-.371 2.875-2.505 5.101-5.01 5.38.094 1.112.186 2.04.372 2.782.556 2.875 5.194 18.087 4.823 19.385-.37 1.206-2.04 6.586-1.855 11.316.186 4.73-1.948 15.49-1.67 16.51.557 1.3 5.566 1.67 7.792.557 5.008 2.875 7.235-.464 8.44-2.226 0-1.206.464-6.585.928-11.78.464-6.492-1.02-12.8-1.113-13.913-.278-1.855 4.73-17.716 5.194-23.56 0-.277.093-.463.093-.556zm-11.78-8.162c.557 0 1.02.464 1.02 1.02a1.03 1.03 0 0 1-1.02 1.02 1.03 1.03 0 0 1-1.02-1.02c0-.556.464-1.02 1.02-1.02zm-1.113 55.56c-.185-2.041-.37-4.267-.37-4.824-.094-1.855.556-8.162.37-10.295-.093-1.02.65-2.876 1.206-4.916v.556c.37 2.783.65 11.316.65 11.316-.28 2.69-1.207 5.565-1.856 8.162zm1.855-26.714c0-.185-.093-.278-.093-.463-1.113-4.916-1.39-16.696-.37-16.974 1.39-.371.37 9.368.741 14.098-.092.928-.185 2.134-.278 3.34z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.bmi-meter :checked + .gender {
  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 4%);
  border-radius: 2px;
  background: #e8e2da;
  color: #f26645;
}

.bmi-meter :checked + .gender[for='bmi-male']::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='33' height='60' viewBox='0 0 33 60' xmlns='http://www.w3.org/2000/svg' fill='%23444'%3E%3Cpath d='M31.072 28.052c0-5.101-.185-9.832-.463-13.542-1.206-.556-4.267-1.948-5.473-2.504-1.577-.742-2.504-5.102-2.597-5.565 0-.186.093-.371.278-.371.186 0 .371.092.371.278.371 1.762 1.206 4.638 2.134 5.101 1.02.557 3.71 1.67 5.101 2.32-.37-4.36-.742-7.328-1.113-8.163-.093-.278-.185-.371-.37-.557l-2.041-.556h1.855v-3.34c0-.092-.279 0-.464-.37H4.916c-.186.37-.464.278-.464.37v3.154h1.855l-2.04.557c-.093.278-.279.37-.371.649-.279.835-.742 3.71-1.113 8.07 1.39-.65 4.08-1.855 5.101-2.32.928-.463 1.855-3.338 2.133-5.1 0-.186.186-.279.371-.279.186 0 .279.186.279.371-.093.464-.928 4.823-2.597 5.565-1.206.557-4.267 1.948-5.473 2.505-.278 3.71-.464 8.44-.464 13.542C2.133 38.719.463 56.064 0 58.475c2.783 1.299 9.368 1.763 13.45.928.185-1.948 1.112-18.18 1.669-29.96.185-5.101.742-9.739 1.391-10.295.65.556 1.206 5.194 1.391 10.295.557 11.78 1.485 28.012 1.67 29.96 4.081.835 10.667.37 13.45-.928-.186-2.318-1.949-19.663-1.949-30.423z'/%3E%3C/svg%3E");
}

.bmi-meter :checked + .gender[for='bmi-female']::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='64' viewBox='0 0 24 64' xmlns='http://www.w3.org/2000/svg' fill='%23444'%3E%3Cpath d='M23.348 10.8c-1.206-.092-2.319-.463-3.247-1.298-1.113-.928-1.762-2.226-1.855-3.71 0-.279.186-.464.464-.557.278 0 .464.186.557.464.092 1.206.649 2.226 1.576 3.06.743.65 1.67 1.021 2.598 1.021 0-2.597-.557-6.029-1.763-7.328 0-1.113 0-2.133-.278-2.411-.278-.186-1.67.278-4.081 1.02l.65 2.319-.928.278-.742-2.319c-.65.186-1.392.371-2.134.65-.65.185-2.782.278-3.06.278-2.134 0-3.896-.186-5.659-.371L5.168 4.4l-.927-.092.278-2.505A307.938 307.938 0 0 0 .9 1.525c-.927 0 .186 3.154-.37 3.432-.372.185-.464 3.339-.279 6.307 2.04-.185 3.803-2.04 4.081-4.452 0-.278.279-.464.557-.464s.464.278.464.557c-.371 2.875-2.505 5.101-5.01 5.38.094 1.112.186 2.04.372 2.782.556 2.875 5.194 18.087 4.823 19.385-.37 1.206-2.04 6.586-1.855 11.316.186 4.73-1.948 15.49-1.67 16.51.557 1.3 5.566 1.67 7.792.557 5.008 2.875 7.235-.464 8.44-2.226 0-1.206.464-6.585.928-11.78.464-6.492-1.02-12.8-1.113-13.913-.278-1.855 4.73-17.716 5.194-23.56 0-.277.093-.463.093-.556zm-11.78-8.162c.557 0 1.02.464 1.02 1.02a1.03 1.03 0 0 1-1.02 1.02 1.03 1.03 0 0 1-1.02-1.02c0-.556.464-1.02 1.02-1.02zm-1.113 55.56c-.185-2.041-.37-4.267-.37-4.824-.094-1.855.556-8.162.37-10.295-.093-1.02.65-2.876 1.206-4.916v.556c.37 2.783.65 11.316.65 11.316-.28 2.69-1.207 5.565-1.856 8.162zm1.855-26.714c0-.185-.093-.278-.093-.463-1.113-4.916-1.39-16.696-.37-16.974 1.39-.371.37 9.368.741 14.098-.092.928-.185 2.134-.278 3.34z'/%3E%3C/svg%3E");
}

.bmi-meter form input#bmi-age {
  border: 0;
  border-radius: 2px;
  width: 88px;
  height: 48px;
  padding-left: 7px;
  background: #fff;
}

.bmi-meter .result h3 {
  margin-left: 10px;
}

.bmi-meter .ui-slider {
  position: relative;
  box-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 4%);
  border-radius: 4px;
  width: 100%;
  height: 8px;
  margin-top: 70px;
  background-color: #e8e2da;
}

.bmi-meter .ui-slider .ui-slider-handle {
  z-index: 10;
  position: absolute;
  bottom: 7px;
  display: block;
  width: 70px;
  height: 64px;
  margin-left: -42px;
  background: url(/static/images/bmimeter/slider-handle.svg) no-repeat center
    bottom;
  text-align: center;
  font-size: 21px;
  font-weight: bold;
  color: #3f3f3f;
  outline: 0;
}

.bmi-meter .ui-slider .ui-slider-handle:hover {
  text-decoration: none;
}

.bmi-meter .ui-slider .hint {
  position: absolute;
  top: -67px;
  left: 10px;
  width: 62px;
  height: 39px;
  background: url(/static/images/hint-bmimeter.png) no-repeat left top;
}

.bmi-meter .ui-slider-range {
  box-shadow: inset 0 -1px 2px 0 rgb(0 0 0 / 8%);
  border-radius: 4px;
  height: 8px;
  background: #f26645;
}

.bmi-meter .result .values {
  margin: 0;
  padding: 0;
  background-color: transparent;
}

.bmi-meter .values ul {
  display: flex;
  margin: 0;
  justify-content: space-between;
}

.bmi-meter .values ul li {
  display: inline-block;
  font-size: 12px;
  color: #999;
}

.bmi-meter .weight .values ul li {
  width: 18.5px;
}

.bmi-meter .bmi-result {
  box-sizing: border-box;
  width: 412px;
  padding: 34px;
  background-color: #fde5e8;
}

.bmi-meter .bmi-result .ui-slider {
  background-color: green;
}

.bmi-meter .bmi-result .ui-slider-handle {
  width: 84px;
  height: 52px;
  background: url(/static/images/bmimeter/bmi-result-cloud.svg);
  background-repeat: no-repeat;
  line-height: 52px;
  font-size: 26px;
}

.bmi-meter .bmi-result .descriptions {
  padding: 0 20px;
  font-size: 16px;
  color: #3f3f3f;
}

.bmi-meter .aside_1 .show-more-wrapper {
  display: flex;
  justify-content: flex-end;
}

.bmi-meter .aside_1 .show-more {
  display: flex;
  cursor: pointer;
  text-align: right;
  align-items: center;
  color: #aaa;
}

.bmi-meter .aside_1 .show-more::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg' fill='%23f26645'%3E%3Cpath d='M6.252 9.256l-3.29-3.25a.82.82 0 0 1 0-1.16 1.005 1.005 0 0 1 1.41 0l3.17 3.16 3.22-3.27a.913.913 0 0 1 1.26 0 .914.914 0 0 1 0 1.27l-4.51 4.51-1.26-1.26z'/%3E%3C/svg%3E");
}

.bmi-meter .aside_1 .show-more.arrow-up::before {
  transform: rotate(180deg);
}

@media (width <= 767px) {
  .bmi-meter .group {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 63px;
    padding: 24px;
  }
}

@media (width <= 767px) {
  .bmi-meter .bmi-result {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 40px;
    padding: 24px;
  }
}

@media (width <= 767px) {
  .bmi-meter .bmi-result .descriptions {
    padding: 20px 0 0;
  }
}

@media (width <= 767px) {
  .bmi-meter .aside_1 {
    order: 10;
    margin-bottom: 30px !important;
  }
}

@media (width <= 767px) {
  .bmi-meter .aside_1 .content.folded {
    position: relative;
    overflow: hidden;
    height: 185px;
  }
}

@media (width <= 767px) {
  .bmi-meter .aside_1 .content.folded::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 60px;
    background: linear-gradient(
      to bottom,
      rgb(255 255 255 / 0%),
      rgb(255 255 255 / 100%)
    );
  }
}

@media (width <= 767px) {
  .bmi-meter .main-content {
    order: 20;
  }
}

@media (width <= 767px) {
  .bmi-meter .aside_2 {
    order: 30;
  }
}