@charset "UTF-8";
/* CSS Document */

body {
	background: #333333;
}
p, label, div, input {
	font-family: 'Open Sans';
	margin: 0;
}

#form-BMI {
	position: absolute;
	left: 45px;
	top: 150px;	
	width: 195px;
}
#form-BMI input[type=text] {
	display: block;
	width: 100%;
	height: 35px;
	background: #FFFFFF;
	border: 1px solid #7F7F7F;
	font-family: 'Open Sans';
	color: #7F7F7F;
	font-size: 1em;
	padding: 5px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin-bottom: 15px;
}
#form-BMI label {
	display: block;
	color: #7F7F7F;
	width: 100%;
	margin-bottom: 5px;
}
#form-BMI input[type=submit] {
	display: block;
	width: 100%;
	height: 35px;
	background: #00c0ff;
	border-radius: 5px;
	font-family: 'Open Sans';
	color: #FFFFFF;
	font-size: 1em;
	padding: 5px;
	text-align: center;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	cursor: pointer;
	margin-bottom: 15px;
}
#form-BMI #BMI-result {
	display: block;
	width: 100%;
	height: 35px;
	font-family: 'Open Sans';
	color: #7F7F7F;
	font-size: 1em;
}
.has-error {
	border: 2px solid #ff4600 !important;
}
#BMI-chart-wrap {
	position: relative;
	width: 560px;
	height: 460px;
}
#chart-dot-wrap {
	position: absolute;
	right: 59px;
	top: 107px;
	width: 628px;
	height: 470px;
}
#chart-dot {
	width: 16px;
	height: 16px;
	margin-left: -8px;
	margin-bottom: -8px;
	border-radius: 8px;
	background: #000000;
	position: absolute;
	z-index: 100;
	left: 0px;
	bottom: 0px;
	-webkit-animation: fadeInOut 1s infinite;
	animation: fadeInOut 1s infinite;
	display: none;
}
@keyframes fadeInOut {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fadeInOut {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
#captions {
	bottom: 45px;
	left: 45px;
	width: 934px;
	height: 50px;
	vertical-align: bottom;
	top: auto;
	border-top: 1px solid #7F7F7F;
}
#captions table {
	color: #FFFFFF;
	width: 100%;
	position: absolute;
	bottom: 0px;
}
#captions table td {
	vertical-align: top;
	font-size: 0.9em;
}
.dot {
	width: 16px;
	height: 16px;
	display: inline-block;
	border-radius: 8px;
	margin-right: 5px;
}
#yellow-dot {
	background: #ffd700;
}
#orange-dot {
	background: #ffa019;
}
#red-dot {
	background: #ff4600;
}
#brown-dot {
	background: #b94600;
}
#chart {
	position: absolute;
	right: 45px;
	top: 100px;
	width: 695px;
	height: 540px;
}
#chart text {
	font-family: "Open Sans";
}
#chart #h-axis text, #chart #v-axis text {
	font-size: 14px;
}
#chart text#h-axis-title, #chart text#v-axis-title {
	font-size: 14px;
}