#bgImage {
  padding: 0px;
  margin: 0px;
  line-height: normal;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -o-user-select: none;
  position: relative;
  background: url(img/2sb_bg.png) no-repeat;
  width: 370px;
  height: 680px;
  border: none;
  background-color: #3E4858;
  opacity: 1;
}
#coordinateGrid {
  position: absolute;
  left: 32px;
  top: 54px;
  width: 186px;
  height: 136px;
  pointer-events: none;
}
#coordinateCanvas {
  position: absolute;
  left: 36px;
  top: 58px;
  width: 186px;
  height: 136px;
  pointer-events: none;
  z-index: 1;
}
.dot {
  overflow: hidden;
  position: absolute;
  height: 8px;
  width: 8px;
  border-radius: 80%;
  display: inline-block;
  z-index: 0;
}
#redDot {
  background-color: #CE5454;
  left: 0px;
  top: 0px;
}
#greenDot {
  background-color: #80B162;
  top: 50px;
}
#blueDot {
  background-color: #5A78B8;
  top: 100px;
  left: 182px;
}
.dial {
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;
}
#ageDial {
  top: 226px;
  left: 124px;
  z-index: 0;
}
#weightDial {
  top: 226px;
  left: 244px;
  z-index: 0;
}
#heartrateDial1 {
  top: 360px;
  left: 210px;
  z-index: 1;
}
#heartrateDial2 {
  top: 525px;
  left: 210px;
  z-index: 2;
}
#wattDial1 {
  top: 360px;
  left: 40px;
  z-index: 1;
}
#wattDial2 {
  top: 525px;
  left: 40px;
  z-index: 2;
}
#timeRemain {
  line-height: 18px;
  overflow: hidden;
  position: absolute;
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  font-family: arial;
  width: 93px;
  text-align: center;
  z-index: 2;
  top: 631px;
  left: 388px;
  pointer-events: none;
}
#timeRemainCaptions {
  overflow: hidden;
  position: absolute;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  font-family: arial;
  width: 60px;
  top: 657px;
  left: 406px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}
.popper {
  background-image: url(img/popper.png);
  background-repeat: no-repeat;
  height: 120px;
  width: 120px;
  position: absolute;
  top: 0px;
  visibility: visible;
  left: 0px;
  z-index: 0;
  pointer-events: none;
}
#bluePopper {
  background-image: url(img/popper_blue.png);
}
#redPopper {
  background-image: url(img/popper_red.png);
}
#yellowPopper {
  background-image: url(img/popper_yellow.png);
}
#greenPopper {
  background-image: url(img/popper_green.png);
}
#pinkPopper {
  background-image: url(img/popper_pink.png);
}
.results {
  overflow: hidden;
  position: absolute;
  top: 139px;
  color: #444444;
  font-size: 36px;
  font-family: arial;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: none;
  height: 40px;
  opacity: 1;
  pointer-events: none;
  left: 250px;
}
#basalResult {
  left: 25px;
}
#totalResult {
  left: 201px;
}
#calcTitle {
  overflow: hidden;
  position: absolute;
  color: #6B7C98;
  font-size: 80%;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  width: 100px;
  top: 9px;
  left: 175px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: none;
  height: auto;
  pointer-events: none;
}
.resultCaptions {
  overflow: hidden;
  position: absolute;
  color: #444444;
  font-size: 12px;
  font-family: arial;
  width: 60px;
  top: 0px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: none;
  height: 20px;
  pointer-events: none;
}
#redCaption {
    font-size: 9px;
    width: 20px;
    height: 10px;
    top: 144px;
    left: 36px;
    color: #949494;
    font-weight: bold;
}
#greenCaption {
  font-size: 9px;
  width: 20px;
  height: 10px;
  top: 144px;
  left: 66px;
  color: #949494;
  font-weight: bold;
}
#blueCaption {
  font-size: 9px;
  ;
  width: 20px;
  height: 10px;
  top: 144px;
  left: 173px;
  color: #949494;
  font-weight: bold;
}
#resultCaption1 {
  top: 127px;
  left: 271px;
}
#resultCaption2 {
  top: 177px;
  left: 270px;
}
.resultUnits {
  overflow: hidden;
  position: absolute;
  color: #444444;
  font-size: 16px;
  font-family: arial;
  width: 40px;
  top: 74px;
  margin-left: auto;
  margin-right: auto;
  text-align: right;
  border: none;
  height: 20px;
  pointer-events: none;
}
#resultUnits1 {
  left: 106px;
  text-align: left;
}
#resultUnits2 {
  left: 219px;
  text-align: left;
}
#eval {
  overflow: hidden;
  position: absolute;
  color: #444444;
  font-size: 12px;
  font-family: arial;
  width: 130px;
  top: 97px;
  left: 236px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: none;
  height: 20px;
  pointer-events: none;
}
.dialValue {
  overflow: hidden;
  position: absolute;
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  font-family: arial;
  width: 68px;
  top: 40px;
  left: 26px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  z-index: 2;
  border: none;
  pointer-events: none;
}
.unitsCaption {
  overflow: hidden;
  position: absolute;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  font-family: arial;
  width: 60px;
  top: 71px;
  left: 31px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}
.dialCaptions {
  overflow: hidden;
  position: absolute;
  color: #ffffff;
  font-size: 12px;
  font-family: arial;
  width: 105px;
  top: 84px;
  left: 8px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: none;
  height: 20px;
  pointer-events: none;
}
.bigDialCaptions {
  overflow: hidden;
  position: absolute;
  color: #ffffff;
  font-size: 16px;
  font-family: arial;
  width: 105px;
  top: 128px;
  left: 8px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border: none;
  height: 20px;
  pointer-events: none;
}
.dialHeadlines {
  line-height: 18px;
  overflow: hidden;
  position: absolute;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  font-family: arial;
  width: 93px;
  text-align: left;
  z-index: 2;
  pointer-events: none;
  height: 42px;
}
#dialHead1 {
  top: 306px;
  left: 15px;
}
#dialHead2 {
  top: 306px;
  left: 267px;
}
#dialHead3 {
  top: 446px;
  left: 15px;
}
#dialHead4 {
  top: 446px;
  left: 267px;
}
#dialHead5 {
  top: 587px;
  left: 15px;
}
#dialHead6 {
  top: 587px;
  left: 267px;
}
.dialTexts {
  overflow: hidden;
  position: absolute;
  color: #ffffff;
  font-size: 12px;
  font-family: arial;
  width: 105px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  border: none;
  height: 82px;
  pointer-events: none;
}
#dialText1 {
  top: 345px;
  left: 17px;
}
#dialText2 {
  top: 345px;
  left: 269px;
}
#dialText3 {
  top: 483px;
  left: 17px;
}
#dialText4 {
  top: 483px;
  left: 269px;
}
#dialText5 {
  top: 607px;
  left: 269px;
}
.dialRing {
  position: absolute;
  background: url(img/dial_dots.png) no-repeat scroll 0px 0px;
  height: 120px;
  width: 120px;
  left: 0px;
  top: 0px;
  z-index: 2;
  pointer-events: auto;
}
#ageDialRing {
  background: url(img/dial_dots_blue.png) no-repeat scroll 0px 0px;
}
#weightDialRing {
  background: url(img/dial_dots_blue.png) no-repeat scroll 0px 0px;
}
.dialBg {
  position: absolute;
  box-shadow: none;
  background: url(img/dial_bg.png) no-repeat scroll 0px 0px;
  height: 128px;
  width: 128px;
  left: 0px;
  top: 0px;
  z-index: 1;
  pointer-events: none;
}
#unitSelector {
  position: absolute;
  background: url(img/usSelected.png) no-repeat scroll 0px 0px;
  height: 20px;
  width: 150px;
  left: 6px;
  top: 5px;
  z-index: 1;
  pointer-events: none;
}
#metricSelector {
  position: absolute;
  height: 20px;
  width: 75px;
  left: 5px;
  top: 7px;
  z-index: 1;
  pointer-events: auto;
}
#usSelector {
  position: absolute;
  height: 20px;
  width: 75px;
  left: 80px;
  top: 7px;
  z-index: 1;
  pointer-events: auto;
}
#energyUnitSelector {
  position: absolute;
  background: url(img/kcalSelected.png) no-repeat scroll 0px 0px;
  height: 20px;
  width: 150px;
  left: 354px;
  top: 5px;
  z-index: 1;
  pointer-events: auto;
}
#genderSelector {
  position: absolute;
  background: url(img/male_selected.png) no-repeat scroll 0px 0px;
  height: 69px;
  width: 114px;
  left: 0px;
  top: 251px;
  z-index: 1;
  pointer-events: none;
}
#maleSelector {
  position: absolute;
  height: 69px;
  width: 57px;
  left: 0px;
  top: 250px;
  z-index: 1;
  pointer-events: auto;
}
#femaleSelector {
  position: absolute;
  height: 69px;
  width: 57px;
  left: 57px;
  top: 250px;
  z-index: 1;
  pointer-events: auto;
}
#arrow {
  position: absolute;
  top: 54px;
  left: 293px;
  height: 70px;
  width: 14px;
  background: url(img/arrow.png) no-repeat scroll 0px 0px;
  z-index: 0;
}