#bmi { border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; padding: 12px 0; max-width: 500px; } #bmi div, #bmi section, #bmi footer, #bmi header { position: relative; } #bmi a { text-decoration: none; } #bmi * { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #6c706f; } #bmi .error { z-index: 1000; cursor: pointer; position: absolute; left: 0; text-align: left; line-height: 1.4em; background: #f47d20; color: #fff; font-size: 12px; font-weight: normal; padding: 8px 10px; top: -50px; left: 10px; border-radius: 3px; } #bmi .error:after { content: ''; position: absolute; bottom: -16px; left: 16px; width: 0; height: 0; border-style: solid; border-width: 16px 16px 0 0; border-color: #f47d20 transparent transparent transparent; } #bmi footer { border-top: 1px solid #d9d9d9; padding-top: 12px; } #bmi footer * { font-size: 11px; color: #959595; } #bmi h2 { font-size: 30px; color: #008ccc; display: block; margin-bottom: 24px; } #bmi .questions { /*background: url(../img/bmi/scale.jpg) no-repeat right bottom;*/ background: url("/~/media/KCMS/GBS/Interactive Tools/Images/BMI/bmi/scale.ashx") no-repeat right bottom; padding-bottom: 24px; overflow: hidden; display: block; } #bmi .questions.off { display: none; } #bmi .questionset { min-height: 280px; margin-top: 24px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; } #bmi .q { border: 0; padding: 0; margin: 0; margin-bottom: 24px; display: flex; align-items: center; flex-wrap: wrap; width: 100%; } #bmi .q.stack h3 { width: 100%; margin-bottom: 6px; } #bmi .q.whalf { width: 40%; } #bmi .q h3 { color: #008ccc; font-weight: bold; position: relative; max-width: 100%; margin-right: 20px; } #bmi .q .units { display: none; } #bmi .q .units.on { width: 100%; display: flex; } #bmi .q label { display: flex; align-items: center; } #bmi .q label + label { margin-left: 16px; } #bmi .q label + input { margin-left: 16px; } #bmi .q input[type="radio"] { appearance: none; -webkit-appearance: none; border: 1px solid #d9d9d9; width: 20px; height: 20px; border-radius: 10px; margin-right: 8px; outline: none; position: relative; } #bmi .q input[type="radio"]:checked:before { content: ''; position: absolute; width: 12px; height: 12px; background: #008ccc; border-radius: 6px; left: 50%; top: 50%; margin: -6px 0 0 -6px; } #bmi .q input[type=text] { height: 36px; border: 1px solid #d9d9d9; border-radius: 4px; width: 60px; margin-right: 8px; font-size: 16px; text-align: center; } #bmi .q input[type=text].sm { width: 44px; } #bmi .q input[type=text].xsm { width: 32px; } #bmi .age_child { display: none; } #bmi .age { align-items: center; } #bmi .age a { border: 1px solid #e7e7e7; width: 140px; color: #a4a4a4; text-align: center; font-size: 16px; font-weight: bold; height: 54px; border-radius: 4px; display: flex; flex-direction: column; justify-content: center; } #bmi .age a span { display: block; font-size: 12px; font-weight: normal; color: #a4a4a4; } #bmi .age a.on { height: 64px; background: #008ccc; color: #fff; } #bmi .age a.on span { color: #fff; } #bmi .age a + a { margin-left: 24px; } #bmi .controls { display: flex; justify-content: space-between; width: 300px; } #bmi .btn { color: #fff; font-size: 16px; line-height: 1; border: none; background: #008ccc; padding: 0 24px; border-radius: 5px; cursor: pointer; position: relative; display: inline-block; line-height: 36px; } #bmi .btn.units { /*background: #f5f5f3 url(../img/icons/world.png) no-repeat 8px center;*/ background: #f5f5f3 url("/~/media/KCMS/GBS/Interactive Tools/Images/BMI/icons/world.ashx") no-repeat 8px center; color: #54585a; padding-left: 30px; font-size: 14px; } #bmi .btn.next { padding: 0 42px 0 24px; } #bmi .btn.next:after { content: ''; position: absolute; right: 24px; top: 50%; margin-top: -6px; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent #fff; } #bmi .results { padding-bottom: 12px; display: none; } #bmi .results.on { display: block; } #bmi .results .tabs { border-bottom: 1px solid #dadada; display: flex; align-items: flex-end; margin-bottom: 24px; } #bmi .results .tabs a { background: #f5f5f3; color: #737373; line-height: 36px; display: inline-block; font-size: 13px; text-decoration: none; padding: 0 12px; border-radius: 4px 4px 0 0; position: relative; } #bmi .results .tabs a.on { background: #fff; border: 1px solid #dadada; border-bottom: 0; top: 1px; line-height: 46px; color: #8c4f98; font-size: 16px; } #bmi .results .tabs a + a { margin-left: 8px; } #bmi .results .controls { width: 100%; padding-top: 12px; display: flex; justify-content: flex-end; } #bmi .results h3 { color: #8c4f98; font-size: 24px; margin-bottom: .5em; } #bmi .results h3 * { color: #8c4f98; } #bmi .results h4 { font-size: 18px; color: #8c4f98; margin-bottom: .5em; } #bmi .results h4 * { color: #8c4f98; } #bmi .results .whatitmeans .description { margin-bottom: 1em; } #bmi .results .scale { margin: 24px 0; display: flex; } #bmi .results .scale h4 { width: 25%; box-sizing: border-box; background: #cacaca; color: #fff; font-weight: bold; text-align: center; height: 48px; display: flex; flex-direction: column; justify-content: center; font-size: 14px; } #bmi .results .scale h4 span { display: block; font-size: 11px; color: #fff; } #bmi .results .scale h4:nth-child(1) { border-radius: 4px 0 0 4px; } #bmi .results .scale h4:nth-child(4) { border-radius: 0 4px 4px 0; } #bmi .results .scale h4.underweight.on { background: #2aace1; } #bmi .results .scale h4.normal.on { background: #62bb46; } #bmi .results .scale h4.overweight.on { background: #d13100; } #bmi .results .scale h4.obese.on { background: #f47d20; } #bmi .results .scale h4 + h4 { border-left: 1px solid #fff; } #bmi .results .scroller h3 { font-size: 18px; margin-bottom: .5em; } #bmi .results .scroller p { font-size: 15px; margin-bottom: 1em; line-height: 1.4em; } #bmi .results .scroller ul { font-size: 15px; padding-right: 3em; } #bmi .results .scroller ul li { line-height: 1.4em; margin-bottom: .5em; } #bmi .results .content > div { display: none; } #bmi .results .content div:first-child { display: block; } #bmi .container { width: 100%; height: 350px; } #bmi .questionset { position: absolute; top: 0; left: 0; width: 100%; transition: all .5s ease; } #bmi .questionset.set2 { transform: translateX(100%); } #bmi .questionset.set1.off { transform: translateX(-100%); } #bmi .questionset.set2.on { transform: translateX(0); }