/* Chrome, Safari, Edge, Opera */
.bmi_paragraph input::-webkit-outer-spin-button,
.bmi_paragraph input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.bmi_paragraph input[type=number] {
  -moz-appearance:textfield;
}


.bmi_paragraph label {
  font-weight: bold;
}

.bmi_paragraph span.label {
  font-weight: bold;
  display: inline-block;
  padding-bottom: 6px;
  font-family: DINNextLTPro-Regular,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
  font-size: 18px;
  color: #403c3c;
  text-transform: uppercase;
  margin-right: 2em;
}

@media (max-width: 768px) {
  .bmi_paragraph span.label {
    font-size: 16px;
  }
}

.bmi_paragraph .form-type-radio {
  margin-top: 2em;
  margin-bottom: 2em;
}

.bmi_paragraph .chosen-container {
  font-size: 14px;
  width: 12em;
}

.bmi_paragraph .form-type-radio input {
  width: 20px;
  height: 20px;
  -webkit-appearance: radio;
  opacity: 1;
  vertical-align: middle;
}

.bmi_paragraph .bmi_column {
  width: 173px;
  margin-right: 20px;
  display: block;
  float: left;
}

.bmi_paragraph .bmi_column__long {
  width: 220px;
}

.bmi_paragraph .bmi_column__short {
  width: 120px;
}

.bmi_paragraph .bmi_column .webform-button--submit {
  margin-top: 1.5em;
}

#submit, #submit2 {
  clear: both;
  display: block;
  margin-left: 0;
}

#result, #bodyState {
  font-weight:bold;
}

.bmi_results_wrapper {
  clear: both;
  /*height: 100px;*/
  margin-bottom: 2rem;
}

.bmi_results_wrapper #bmi_description {
  font-size: 14px;
}

#bmi_results {
  display: none;
  padding: 1em;
  background: #ededed;
}

/* inline labels in number inputs */

/* prepare wrapper element */
span.bmi-number-wrapper {
  display: inline-block;
  position: relative;
}
span.bmi-number-wrapper input {
  width: 12em;
  font-size: 14px;
}

/* position the unit to the right of the wrapper */
span.bmi-number-wrapper .bmi-number-wrapper--label {
  font-size: 14px;
  position: absolute;
  top: 10px;
  right: 25px;
  transition: all .05s ease-in-out;
  pointer-events: none;
}

/* move unit more to the left on hover or focus within
   for arrow buttons will appear to the right of number inputs */
/*span.bmi-number-wrapper:hover::after,
span.bmi-number-wrapper:focus-within::after {
  right: 1.5em;
}*/

/* set the unit abbreviation for each unit class */

span.bmi-number-wrapper.inches .bmi-number-wrapper--label {
  right: 35px;
}
span.bmi-number-wrapper.feet .bmi-number-wrapper--label {
  right: 35px;
}

.bmi_paragraph .pounds input, .bmi_paragraph .kg input, .bmi_paragraph .cm input {
  width: 116px;
}
.bmi_paragraph .feet select {
  width: 98px!important;
}
.bmi_paragraph .inches select {
  width: 107px!important;
}


/* to fix height unit <select> text alignment */
@-moz-document url-prefix() {
  .bmi_column .chosen-container-single {
    padding-top: 0.625rem;
  }
}


/* mobile version */

@media only screen and (max-width: 740px) {
  .bmi_paragraph span.label {
    clear: both;
    display: block;
  }
  .bmi_paragraph .bmi_column {
    clear: both;
  }
  #submit, #submit2 {
    margin-bottom: 2em;
  }
}


.bmi_paragraph .webform-button--submit.webform-button--submit {
    min-height: 50px;
    padding: 14px 70px 10px 25px;
    font-size: 1.125rem;
    line-height: 1.3;
}

.bmi_paragraph {
  border: .125rem solid #7f7f7f;
  padding: .5rem 1rem;
}

@media screen and (min-width: 740px) {
  .bmi_paragraph {
    margin-bottom: 1.5rem;
  }
}

.field__bmi_result_message div, .field__bmi_result_message div ul {
  margin-top: .5rem;
}