/*input[type=range][orient=vertical]
{
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
    width: 8px;
    height: 175px;
    padding: 0 5px;
}*/

@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');

.range {
  -webkit-appearance: none;
  width: 100%;
}
.range:focus {
  outline: none;
}
.range::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: #6C7A89;
  border-radius: 10px;
  border: 2px solid black;
}
.range::-webkit-slider-thumb {
  border: 2px solid black;
  height: 25px;
  width: 25px;
  border-radius: 15px;
  background: white;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}

#imc_calculator{
  padding: 20px;
}

.graph{
  width: 650px;
  table-layout:fixed;
}

.info{
  vertical-align: bottom;
  width: 140px;
  padding-bottom: 40px;
}

.height{
  width: 40px;
}

#imc_height_range{
  width: 230px;
  position: absolute;
  transform: rotate(-90deg);
  margin-top: 0px;
  margin-left: -90px;
  padding-left: 15px;
}

.result{
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  vertical-align: bottom;
  padding-bottom: 40px;
}

.result div{
  width: 120px;
  padding: 10px;
  color: white;
  margin-left: -30px;
}

#chart{
  cursor: pointer;

}

#chartpos{
  cursor: move;
}

.weight{
  padding-left: 45px;
}

.weight #imc_weight_range{
  width: 455px;
  margin-bottom: 15px;
}

label{
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 5px;
}

.range{
  display: block;
}

.input_value{
  width: 40px;
  font-size: 12px;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400;
  padding-left: 10px;
}