html {
    height:100%;
}

#body-div {
    min-height:100%;
    padding-bottom:70px;
    float:left;
    margin-bottom:20px;
    width:100%;
}

footer {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:80px;
    width:100%;
}

body {
    width:100%;
    position:absolute;
    min-height:100%;
    font-family: 'Segoe UI', 'Microsoft YaHei UI', '΢ÈíÑźÚ', 'ºÚÌå', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
    width:100%;
    position:absolute;
    min-height:100%;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

input {
    height:34px;
    border-radius:17px;
    border:1px solid #eee;
    width:100%;
    padding:0 15px;
}

/* Carousel */
.carousel-caption {
    z-index: 10 !important;
}

    .carousel-caption p {
        font-size: 20px;
        line-height: 1.4;
    }

@media (min-width: 768px) {
    .carousel-caption {
        z-index: 10 !important;
    }
}

.m-font {
    font-size: 1.6em;
}

.l-font {
    font-size: 1.8em;
}

.hero-img {
    margin-top:10px;
    margin-bottom:10px;
}

.nav-title {
    padding:5px;
    height:50px;
}

.age-div {
    background-repeat:no-repeat;
    width:320px;
    height:42px;
    margin:0 auto;
    padding-top:5px;
    background-position:center;
    background-size:75%;
}

.age-1 {
    text-align:right;
}

.age-2 {
    text-align:left;
}

.progressbar {
    /*line-height:0;*/
    position: relative;
    width: 100%;
    top:50px;
    height: 6px;
    background-color: #eee;
}

#innerBar {
    position: absolute;
    width: 0;
    height: 100%;
    background:url('progressbar.png') no-repeat;
}

.col5 {
    float:left;
    width:20%;
    padding-left:5px;
    padding-right:5px;
    text-align:center;
}

.col4 {
    float:left;
    width:25%;
    padding-left:5px;
    padding-right:5px;
    text-align:center;
}

.col11 {
    float:left;
    width:9.09%;
    padding-left:2px;
    padding-right:2px;
    text-align:center;
}

.modal-content {
    border:2px solid #4eceac;
}

.accent-color {
    color:#4eceac;
}

.strip-div {
    background:url('strip.png') no-repeat;
    background-position:center;
    margin-top:10px;
    padding-top:5px;
    min-height:66px;
}

.xxl-font {
    font-size:2.5em;
}

.xl-font {
    font-size:1.4em;
}

.persons-div {
    margin-top:20px;
    margin-bottom:10px;
}

.persons-div div {
    padding-left:2px;
    padding-right:2px;
}

@media (max-width: 570px) {
    .hero-img {
        width: 90%;
    }

    .bottom-img {
        width: 60%;
    }

    .m-font {
        font-size: 1.1em;
    }

    .l-font {
        font-size: 1.2em;
    }

    .nav-title {
        padding:12px 0;
    }

    .tile-icon {
        width:100%;
    }

    .strip-div {
        background-size:100%;
        min-height:42px;
    }
}

@media (max-width: 350px) {
    .age-div {
        background-position:center;
        background-size:75%;
        width:100%;
    }
    .strip-div {
        font-size:1em;
        padding-top:8px;
    }
}

.tile-div {
    margin-top:10px;
    margin-bottom:10px;
}

.tile-text {
    font-size:1.4em;
    padding-top:10px;
    width:100%;
}

.tile-subtext {
    padding-top:4px;
    color:#9fa0a0;
}

.btn-themed {
  color: #fff;
  background-color: #4eceac;
  border-color: #4eceac;
  border-radius:17px;
}
.btn-themed:focus,
.btn-themed.focus {
  color: #fff;
  background-color: #4eceac;
  border-color: #4eceac;
}
.btn-themed:hover {
  color: #fff;
  background-color: #4eceac;
  border-color: #4eceac;
}
.btn-themed:active,
.btn-themed.active,
.open > .dropdown-toggle.btn-themed {
  color: #fff;
  background-color: #1cab85;
  border-color: #1cab85;
}
.btn-themed:active:hover,
.btn-themed.active:hover,
.open > .dropdown-toggle.btn-themed:hover,
.btn-themed:active:focus,
.btn-themed.active:focus,
.open > .dropdown-toggle.btn-themed:focus,
.btn-themed:active.focus,
.btn-themed.active.focus,
.open > .dropdown-toggle.btn-themed.focus {
  color: #fff;
  background-color: #1cab85;
  border-color: #1cab85;
}
.btn-themed:active,
.btn-themed.active,
.open > .dropdown-toggle.btn-themed {
  background-image: none;
}
.btn-themed.disabled,
.btn-themed[disabled],
fieldset[disabled] .btn-themed,
.btn-themed.disabled:hover,
.btn-themed[disabled]:hover,
fieldset[disabled] .btn-themed:hover,
.btn-themed.disabled:focus,
.btn-themed[disabled]:focus,
fieldset[disabled] .btn-themed:focus,
.btn-themed.disabled.focus,
.btn-themed[disabled].focus,
fieldset[disabled] .btn-themed.focus,
.btn-themed.disabled:active,
.btn-themed[disabled]:active,
fieldset[disabled] .btn-themed:active,
.btn-themed.disabled.active,
.btn-themed[disabled].active,
fieldset[disabled] .btn-themed.active {
  background-color: #c9caca;
  border-color: #c9caca;
}
.btn-themed .badge {
  color: #5cb85c;
  background-color: #fff;
}
.btn-themed.btn-lg {
    border-radius:20px;
}

.btn-clear {
  color: #4eceac;
  background-color: transparent;
  border-color: #4eceac;
  border-radius:17px;
}
.btn-clear:focus,
.btn-clear.focus {
  color: #4eceac;
  background-color: transparent;
  border-color: #1cab85;
}
.btn-clear:hover {
  color: #4eceac;
  background-color: transparent;
  border-color: #4eceac;
}
.btn-clear:active,
.btn-clear.active,
.open > .dropdown-toggle.btn-clear {
  color: #fff;
  background-color: #1cab85;
  border-color: #1cab85;
}
.btn-clear:active:hover,
.btn-clear.active:hover,
.open > .dropdown-toggle.btn-clear:hover,
.btn-clear:active:focus,
.btn-clear.active:focus,
.open > .dropdown-toggle.btn-clear:focus,
.btn-clear:active.focus,
.btn-clear.active.focus,
.open > .dropdown-toggle.btn-clear.focus {
  color: #fff;
  background-color: #1cab85;
  border-color: #1cab85;
}
.btn-clear:active,
.btn-clear.active,
.open > .dropdown-toggle.btn-clear {
  background-image: none;
}
.btn-clear.disabled,
.btn-clear[disabled],
fieldset[disabled] .btn-clear,
.btn-clear.disabled:hover,
.btn-clear[disabled]:hover,
fieldset[disabled] .btn-clear:hover,
.btn-clear.disabled:focus,
.btn-clear[disabled]:focus,
fieldset[disabled] .btn-clear:focus,
.btn-clear.disabled.focus,
.btn-clear[disabled].focus,
fieldset[disabled] .btn-clear.focus,
.btn-clear.disabled:active,
.btn-clear[disabled]:active,
fieldset[disabled] .btn-clear:active,
.btn-clear.disabled.active,
.btn-clear[disabled].active,
fieldset[disabled] .btn-clear.active {
  background-color: #c9caca;
  border-color: #c9caca;
}
.btn-clear .badge {
  color: #5cb85c;
  background-color: #fff;
}
.btn-clear.btn-lg {
    border-radius:20px;
}

.btn-orange {
  color: #fff;
  background-color: #ffca65;
  border-color: #ffca65;
  border-radius:17px;
}
.btn-orange:focus,
.btn-orange.focus {
  color: #fff;
  background-color: #ffca65;
  border-color: #ffca65;
}
.btn-orange:hover {
  color: #fff;
  background-color: #ffca65;
  border-color: #ffca65;
}
.btn-orange:active,
.btn-orange.active,
.open > .dropdown-toggle.btn-orange {
  color: #fff;
  background-color: #ffa95d;
  border-color: #ffa95d;
}
.btn-orange:active:hover,
.btn-orange.active:hover,
.open > .dropdown-toggle.btn-orange:hover,
.btn-orange:active:focus,
.btn-orange.active:focus,
.open > .dropdown-toggle.btn-orange:focus,
.btn-orange:active.focus,
.btn-orange.active.focus,
.open > .dropdown-toggle.btn-orange.focus {
  color: #fff;
  background-color: #ffa95d;
  border-color: #ffa95d;
}
.btn-orange:active,
.btn-orange.active,
.open > .dropdown-toggle.btn-orange {
  background-image: none;
}
.btn-orange.disabled,
.btn-orange[disabled],
fieldset[disabled] .btn-orange,
.btn-orange.disabled:hover,
.btn-orange[disabled]:hover,
fieldset[disabled] .btn-orange:hover,
.btn-orange.disabled:focus,
.btn-orange[disabled]:focus,
fieldset[disabled] .btn-orange:focus,
.btn-orange.disabled.focus,
.btn-orange[disabled].focus,
fieldset[disabled] .btn-orange.focus,
.btn-orange.disabled:active,
.btn-orange[disabled]:active,
fieldset[disabled] .btn-orange:active,
.btn-orange.disabled.active,
.btn-orange[disabled].active,
fieldset[disabled] .btn-orange.active {
  background-color: #c9caca;
  border-color: #c9caca;
}
.btn-orange .badge {
  color: #5cb85c;
  background-color: #fff;
}
.btn-orange.btn-lg {
    border-radius:20px;
}

.navbar-inverse {
    background-color:#4eceac;
    border:0;
}

.paper {
    margin-top:70px;
    background:#fff;
    border-radius:3px;
    box-shadow: #CED2DB 3px 3px 3px 0;
    padding: 10px 10px 17px 10px;
}

hr {
    margin-top:17px;
    margin-bottom:17px;
}

.white-text {
    color:#fff;
}

.yello-text {
    color:#ffca65;
}

.gray-text {
    color:#898989;
}

.cyan-text {
    color:#4eceac;
}

.blue-text {
    color:#59aeef;
}

#intro-div {
    padding-left:5%;
    padding-right:5%;
    margin-bottom:40px;
}

#age-list {
    font-size:1.4em;
}

#bar-canvas {
    height:140px;
}

a, a:hover, a:focus, a:visited {
    text-decoration:none;
}

.vertical-top {
    vertical-align:top;
}

.product-table tr{
    border-bottom:1px solid #eee;
}

.product-table p {
    margin-top:5px;
    margin-bottom:5px;
}

.thin-padding {
    padding-left:5px;
    padding-right:5px;
}

.text-div {
    margin:10px 15px;
}

.point-text {
    float:left;
    text-align:center;
    color:#fff;
    top:-56px;
    position:relative;
    z-index:999;
    width:100%;
}

.orange-back {
    background-color:#ffa95d;
    color:#fff;
    border:2px solid #ffa95d;
    border-radius:12px;
    padding:0 2px;
}

.history-title {
    padding-top:10px;
}

.history-subtitle {
    padding-top:10px;
}

.accent-1 {
    color:#fa6470;
}

.accent-2 {
    color:#ffa95d;
}

.accent-3 {
    color:#ffca65;
}

.accent-4 {
    color:#4eceac;
}

.accent-5 {
    color:#81d9e1;
}

.accent-6 {
    color:#6ec1f2;
}

.accent-7 {
    color:#3a93bb;
}

.accent-8 {
    color:#b2f7eb;
}

.accent-9 {

}

.level-1 {
    background-color:#edfaf7;
}

.level-2 {
    background-color:#dcf5ee;
}

.level-3 {
    background-color:#c1eee2;
}

.level-4 {
    background-color:#a6e6d5;
}

.level-5 {
    background-color:#83ddc5;
}

.level-6 {
    background-color:#4eceac;
}

.level-7 {
    background-color:#39b795;
}

.level-8 {
    background-color:#1cab85;
}

.level-9 {
    background-color:#169a77;
}

.level-10 {
    background-color:#0f7c5f;
}

.level-11 {
    background-color:#027053;
}

.level-div {
    margin:10px 20px;
    border:1px solid #4eceac;
    height:32px;
}

.level {
    width:16px;
    height:16px;
    border-radius:8px;
    margin-top:10px;
}

.dot {
    width:12px;
    height:12px;
    border-radius:6px;
    margin-top:6px;
    margin-right:5px;
}

.pointer {
    position:relative;
    top:-2px;
    float:left;
    line-height:10px;
}

.float-right {
    float:right;
}

.navbar-collapse.collapse {
display: block!important;
}

.navbar-nav>li, .navbar-nav {
float: left !important;
}

.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}

.navbar-right {
float: right!important;
}

.donut-number {
    width:100%;
    line-height:97px;
    font-size:2.2em;
    text-align:center;
    float:left;
    position:absolute;
    left:0;
    display:inline !important;
}

.result-paper {
    margin-top:10px;
}

#spinner {
    position: fixed;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 64px;
    -ms-flex-pack: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    align-items: center;
    top:calc(50% - 64px);
}

.tile-link, .tile-link:hover, .tile-link:focus {
    color:#333;
}

.list-group-item {
    border:0;
}

.filter-label {
    background:#e5e5e5;
    line-height:38px;
    margin-bottom:10px;
}

.product-icon {
    width:100%;
    padding:20px;
}

.avata-login {
   border-radius: 50%;
   border:2px solid #f3f3f3;
}

#login-paper .btn {
    padding:0;
}

#login-paper ul {
    list-style:none;
    padding:20px 10%;
}

#login-paper ul li {
    padding:10px 0;
}

#login-paper input[type="checkbox"],
#login-paper .checkbox {
    width:auto;
}

.float-left {
    float:left;
}

.field-validation-error,
.validation-summary-errors ul li {
    color:#a94442;
    background-color: #f2dede;
    border:1px solid #ebccd1;
    width:100%;
    display:block;
    padding: 5px 15px !important;
    border-radius:17px;
}
.modal-dialog {
    width:calc(100% + 17px);
}
.captchaInput {
    width:calc(100% - 140px);
}
.smsCodeInput {
    width:calc(100% - 170px);
}
.verifyCode {
    margin-left:12px;
}
.smsButton {
    margin-left:10px;
}
.verifyCodeDiv {
    height:34px;
}
.captchaImg {
    cursor:pointer;
}
#regForm ul,
#resetForm ul{
    padding-top:0;
}
#smsForm ul {
    padding-bottom:0;
    margin-bottom:0;
}
.validation-summary-errors ul{
    padding: 15px !important;
    margin-bottom: 20px !important;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    border-radius: 4px;
}
.validation-summary-errors ul li{
    padding: 0;
    border:0;
}

.hasCheckBox input,
.hasCheckBox label {
    vertical-align:middle;
    margin-top:0;
    margin-bottom:0;
    line-height:34px;    
}

.hasCheckBox {
    padding-left:15px !important;
}

@media (min-width: 992px) {
    .paper,
    #intro-div,
    .modal-dialog {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    .gender-div {
        padding-left:calc((100% - 800px) / 2);
        padding-right:calc((100% - 800px) / 2);
    }
    .history-share {
        padding-left:calc((100% - 600px) / 2);
        padding-right:calc((100% - 600px) / 2);
    }
    .full-width {
        max-width: 100%;
    }
    .donut-canvas,
    .donut-number {
        max-width:200px;
    }
    .donut-number {
        margin-left:15px;
    }
}
@media (min-width: 500px) {
    .tile-div {
        padding-left:calc((100% - 496px) / 2);
        padding-right:calc((100% - 496px) / 2);
    }
    
    .tile-wrapper {
        width:496px;
    }
    .tile-text {
        padding-top:30px;
    }
}



.hide{ display:none;}
.show{ display:block;}
/*.main dl{ border-bottom:#ddd 1px solid; padding:10px 0; width:100%; float:left;}*/
.col-xs-12 dd{ float:left; display:inline; margin:0 10px 10px 0;}
.col-xs-12 dd a{ display:inline-block; width:110px;height:40px;font:bold 16px/40px 'Microsoft YaHei';color:#333;text-align:center;background:url(test.jpg); cursor:pointer;}
.col-xs-12 dd a:hover{ text-decoration:none;}
.col-xs-12 dd a.on{background:url(test_cur.jpg); color:#fff; text-decoration:none;}