/* style.css */


/* BASIC STYLINGS
============================================================================= */
html{
    background: #fff !important;
}

body {
  padding-top: 20px;
  background: #fff;
  color: #222;
  font-size: 1.2em;
}


/* form styling */

#form-container {
  background: #2f2f2f;
  margin-bottom: 20px;
  border-radius: 5px;
}

#form-container .page-header {
  margin: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#status-buttons {
  font-size: 1.1em;
}


/* style.css */


/* ANIMATION STYLINGS
============================================================================= */

#bmform {
  position: relative;
  /*min-height: 300px;
    overflow: hidden;*/
  padding: 30px;
}

.container {
  width: 100%;
  left: 0 !important;
  right: 0 !important;
}


/* basic styling for entering and leaving */


/* left and right added to ensure full width */

.container.ng-enter, .container.ng-leave {
  position: absolute;
  transition: 0.5s all ease;
  -moz-transition: 0.5s all ease;
  -webkit-transition: 0.5s all ease;
}


/* enter animation */

.container.forward.ng-enter {
  -webkit-animation: slideInRight 0.5s both ease;
  -moz-animation: slideInRight 0.5s both ease;
  animation: slideInRight 0.5s both ease;
}


/*leave animation*/

.container.forward.ng-leave {
  -webkit-animation: slideOutLeft 0.5s both ease;
  -moz-animation: slideOutLeft 0.5s both ease;
  animation: slideOutLeft 0.5s both ease;
}


/* back animation */

.container.goback.ng-enter {
  -webkit-animation: slideInLeft 0.5s both ease;
  -moz-animation: slideInLeft 0.5s both ease;
  animation: slideInLeft 0.5s both ease;
}


/*leave animation*/

.container.goback.ng-leave {
  -webkit-animation: slideOutRight 0.5s both ease;
  -moz-animation: slideOutRight 0.5s both ease;
  animation: slideOutRight 0.5s both ease;
}


/* ANIMATIONS
============================================================================= */


/* slide in from the right */

@keyframes slideInRight {
  from {
    transform: translateX(200%);
  }
  to {
    transform: translateX(0);
  }
}

@-moz-keyframes slideInRight {
  from {
    -moz-transform: translateX(200%);
  }
  to {
    -moz-transform: translateX(0);
  }
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translateX(200%);
  }
  to {
    -webkit-transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  to {
    transform: translateX(-200%);
  }
}

@-moz-keyframes slideOutLeft {
  to {
    -moz-transform: translateX(-200%);
  }
}

@-webkit-keyframes slideOutLeft {
  to {
    -webkit-transform: translateX(-200%);
  }
}

.container.ng-leave-active, .container.ng-enter-active {
  /*-webkit-animation: none !important;*/
  /*-moz-animation: none !important;*/
  /*animation: none !important;*/
  /*transform: none !important;*/
  /*-moz-transform: none !important;*/
  /*-webkit-transform: none !important;*/
}

@keyframes slideInLeft {
  from {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(0);
  }
}

@-moz-keyframes slideInLeft {
  from {
    -moz-transform: translateX(-200%);
  }
  to {
    -moz-transform: translateX(0);
  }
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translateX(-200%);
  }
  to {
    -webkit-transform: translateX(0);
  }
}

@keyframes slideOutRight {
  to {
    transform: translateX(200%);
  }
}

@-moz-keyframes slideOutRight {
  to {
    -moz-transform: translateX(200%);
  }
}

@-webkit-keyframes slideOutRight {
  to {
    -webkit-transform: translateX(200%);
  }
}

#logo {
  height: auto;
  width: 100%;
  display: inline-block;
}

.image-wrapper {
  max-width: 280px;
  text-align: center;
  margin: 0 auto 30px auto;
}

footer .btn .glyphicon-arrow-right:before {
  font-size: 0.8em;
}

footer .btn.btn-primary {
  color: #0ce3ac;
  background: transparent;
  border: 0;
  padding: 6px 0;
  margin-bottom: 10px;
}

footer .btn.btn-primary:hover {
  color: #70b9eb;
}

footer p {
  margin-bottom: 5px;
}

.row.ng-scope .btn-block .glyphicon {
  top: 2px;
}

#form-container {
  background: transparent;
}

.glyphicon-arrow-right:before, .glyphicon-circle-arrow-right:before {
  padding-left: 5px;
}

.page-header p {
  display: block;
  margin: 0 auto 30px auto;
}

.form-gender input.form-control {
  margin-top: 0.6em;
}

html {
  height: 100%;
  font-size: 100%;
}

body, .container-main, .container-main-inner, .sticky-container {
  display: flex;
  flex-direction: column;
}

@media only screen and (max-width: 767px) {
  body, .container-main, .container-main-inner, .sticky-container {
    height: 100%;
  }
}

.main-content, .sticky-content {
  /* By setting flex-grow to 1, the main content will take up
    all of the remaining space on the page.
    The other elements have flex-grow: 0 and won't contest the free space. */
  /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 1 0 auto;
}

footer, .sticky-footer {
  /* Like the header, the footer will have a static height - it shouldn't grow or shrink.  */
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 0 0 auto;
}


/* Vartical centered align */

.container>.form-group.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.container>.form-group.row.no-center {
  display: block;
  justify-content: inherit;
  align-items: inherit;
}

.gender {
  width: 100%;
  margin-top: 0.9em;
  margin-bottom: 0.9em;
}

.adjustment {
  border: 1px solid #eee;
  border-radius: 7px;
  width: 100%;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}

.height, .weight {
  border: 1px solid #eee;
  border-radius: 7px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0.5em;
}

#bmform {
  padding: 0;
}

.container.sticky-content {
  margin-bottom: 0.9em;
}

.container.sticky-content .row {
  margin-bottom: 0.9em;
}

.gender label, .height label, .weight label, .adjustment label, .adjustment label {
  width: 100%;
  text-align: center;
  margin-bottom: 0;
}

.gender label>input, .height label>input, .weight label>input, .adjustment label>input {
  display: none;
  width: 100%;
  float: none;
}

.gender label>input+span {
  cursor: pointer;
  opacity: 0.5;
  float: none;
  display: block;
  padding: 0.8em;
  border: 1px solid #222;
  border-radius: 7px;
}

.weight label>input+span, .height label>input+span, .adjustment label>input+span {
  cursor: pointer;
  opacity: 0.5;
  float: none;
  display: block;
  padding: 0.2em;
  border: 1px solid #222;
  border-radius: 7px;
}

.gender label>input:checked+span, .weight label>input:checked+span, .height label>input:checked+span, .adjustment label>input:checked+span {
  opacity: 1;
  float: none;
}

.form-group.macro .input-group {
  display: block;
}

.form-group.macro .input-group .col-xs-6 {
  height: 2.2em;
}

.form-group.macro .col-xs-3 .input-group-addon {
  height: 5.6em;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.form-group.macro .col-xs-9 .input-group-addon {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  line-height: 2.2em;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.form-group.macro .input-group-addon:first-child, .form-group.macro2 .input-group-addon:first-child {
  padding: 0;
}

.form-group.macro .input-group-addon:first-child label, .form-group.macro2 .input-group-addon:first-child label {
  margin-bottom: 0;
}

.form-group.macro2 .input-group-addon:first-child input[type=checkbox] {
  opacity: 0;
  width: 36px;
  height: 30px;
  position: relative;
  z-index: 5;
}

.form-group.macro2 .control-label {
  display: block !important;
}

.form-group.macro2 .input-group {
  margin-bottom: 15px;
}

.form-group.macro .input-group-addon:first-child input[type=checkbox] {
  width: 57px;
  height: 50px;
  opacity: 0;
  position: relative;
  z-index: 5;
}

.form-group.macro2 .input-group-addon:first-child input[type=checkbox]+label:before {
  font-family: 'fontawesome';
  display: inline-block;
  content: '\f13e';
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 1;
}

.form-group.macro .input-group-addon:first-child input[type=checkbox]+label:before {
  top: 36px;
  left: 24px;
  font-family: 'fontawesome';
  display: inline-block;
  content: '\f13e';
  position: absolute;
  z-index: 1;
}

.form-group.macro .input-group-addon:first-child input[type=checkbox]:checked+label:before, .form-group.macro2 .input-group-addon:first-child input[type=checkbox]:checked+label:before {
  content: '\e807';
}

.form-group.macro2 input.form-control, .form-group.macro input.form-control {
  font-size: 0.8em;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center;
}

#pie {
  margin-bottom: 15px;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  background: #eee !important;
}

.icon-male, .icon-female {
  font-size: 99%;
}

.icon-calendar, .icon-venus-mars {
  font-size: 3em;
  line-height: 150%;
}

input.form-control {
  border: 1px solid #eee;
  font-size: 1.2em;
}

select.form-control {
  border: 1px solid #eee;
  font-size: 0.8em;
}

.radio-inline.gender {
  font-size: 1em;
  padding: 0;
}

.pull-left, .pull-right {
  margin-top: 15px;
  margin-bottom: 15px;
}

.form-adjustment .btn-large.pull-left,
.form-adjustment .btn-large.pull-right {
    width: 49%;
    font-size: 0.9em;
    margin-top: 0;
    margin-bottom: 0.6em;
    background: transparent;
    border: 1px solid #222;
    color: #222;
}

.form-adjustment .btn-large.pull-left:hover,
.form-adjustment .btn-large.pull-right:hover {
    color: #222;
}

.rzslider .rz-bubble.rz-limit, .rzslider .rz-bubble {
  color: #fff;
}

.btn-info {
  font-weight: 600;
}

.icon-male:before, .icon-female:before {
  text-align: left;
}

.col-sm-12 {
  text-align: center;
}

.gender label {
  margin-bottom: 0;
  font-size: 0.8em;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  background: #fff;
}

.navbar-default {
  background-color: #fff;
}

a.list-group-item:nth-child(even) {
  background-color: #f5f5f5;
}

a.list-group-item:nth-child(odd) {
  background-color: #fff;
}

.list-group.formula .list-group-item.even {
  background-color: #f5f5f5;
}

.list-group.formula .list-group-item.odd {
  background-color: #fff;
}

a.list-group-item:nth-child(even) {
  background-color: #f5f5f5;
}

a.list-group-item:nth-child(odd) {
  background-color: #fff;
}

a.list-group-item {
  text-align: left;
  font-weight: 400;
  color: #222;
  font-size: 1em;
}

.list-group-item>.badge {
  padding: 6px 17px;
  white-space: normal;
}

.list-group.formula .list-group-item.even {
  background-color: #f5f5f5;
}

.list-group.formula .list-group-item.odd {
  background-color: #fff;
}

.formula.protein .clearfix {
  height: 30px;
  clear: both;
}

input.form-control, select, .select2-container--default .select2-selection--single {
  border: 1px solid #eee;
}

.select2-container--default .select2-selection--single {
  padding: 20px 10px;
  height: 100%;
  text-align: left;
}

span.select2 {
  margin-bottom: 25px;
  width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 25px;
}

.container>.form-group.row {
  display: block;
}

.progress {
  height: 10px;
}

.progress-bar {
  line-height: 10px;
}

.label {
  font-size: 1.1em;
}

.rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value {
  bottom: -45px;
}

h3, .h3 {
  font-size: 1.2em;
  margin-top: 0;
  text-align: center;
}

.container {
  max-width: 780px;
  width: 100%;
}

.form-group.form-height .rzslider, .form-group.form-gender .rzslider {
  height: 2em;
}

.rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value {
  font-size: 0.8em;
}

.clearfix {
  clear: both;
}

.form-fat .clearfix {
  height: 2.5em;
}

.form-adjustment div.clearfix {
  height: 2em;
}

.form-adjustment a.list-group-item:hover {
  color: #222;
}

.form-adjustment .btn-large:last-child {
  margin-bottom: 1em;
}

.form-fat .rzslider {
  margin-top: 10px;
}

@media screen and (min-width: 768px) {
  .form-fat .col-sm-9.col-sm-offset-3 {
    padding-left: 25px;
    padding-right: 30px;
  }
}

.radio-inline label {
  margin: 0 !important;
}

.radio-inline.height, .radio-inline.weight {
  margin-left: 0;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  margin-left: 0;
  margin-right: 0;
}

.icon-resize-vertical, .icon-person, .glyphicon-scale {
  margin-bottom: 8px;
}

.icon-resize-vertical, .icon-person, .icon-gauge {
  font-size: 3.2em;
  display: inline-block;
  line-height: 100%;
}

.icon-clipboard, .icon-math, .glyphicon-wrench, .glyphicon-equalizer {
  font-size: 3em;
}

.radio-inline, .checkbox-inline {
  padding-left: 0;
}

.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}

.form-fat input[type="number"] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.form-fat .input-group-addon {
  font-size: 1em;
  border-bottom-right-radius: 4px !important;
  border-top-right-radius: 4px !important;
  border: 2px solid #303030;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.radio-inline.gender, .radio-inline.height, .radio-inline.weight, .radio-inline.adjustment {
  width: 95%;
}

.radio-inline {
  border: 0;
}

.btn-sm.btn-primary {
  font-size: 0.8em;
}

.nopadding:first-child .radio-inline.gender {
  float: left;
}

.nopadding:last-child .radio-inline.gender {
  float: right;
}

.nopadding .radio-inline.adjustment.left {
  float: left;
}

.nopadding .radio-inline.adjustment.right {
  float: right;
}

.back-btn {
  margin-right: 10px;
}

.glyphicon-refresh:before {
  font-weight: 600;
}

.icon-gauge:before {
  margin-top: -5px;
  display: block;
}

#form-views.container {
  padding-left: 0;
  padding-right: 0;
}

.rzslider .rz-bubble.rz-limit, .rzslider .rz-bubble {
  display: none;
}

.icon-percent {
  font-size: 2em;
  line-height: 100%;
}

.icon-pitch {
  font-size: 3em;
  line-height: 100%;
}

.form-height .rzslider, .form-gender .rzslider {
  margin: 15px 0 15px 0;
}

.form-height label {
  margin-bottom: 0;
}

.form-adjustment .wrapper .rzslider {
  min-height: 50px;
  margin: 35px 0 15px 0;
}

.form-adjustment .rzslider {
  margin: 20px 0 15px 0;
}

.form-adjustment .rzslider .legend-wrapper {
  clear: both;
  margin-top: 30px;
  margin-bottom: 30px;
}

.form-adjustment .rzslider .legend-wrapper span.rz-tick-value {
  display: block;
  position: relative;
  font-size: 0.85em;
}

.form-adjustment .rzslider .legend-wrapper {
  width: 100%;
}

.glyphicon-scale {
  font-size: 2.4em;
}

.icon-resize-vertical:before, .icon-person:before {
  width: 0.5em;
}

.form-group.form-height label {
  clear: both;
  width: 100%;
}

.form-group.formula .list-group div {
  position: relative;
}

.form-group.formula .list-group input:hover {
  cursor: pointer;
}

.form-group.formula .list-group input[type="radio"] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.form-group.formula .list-group input[type="radio"]:checked+span.name {
  color: #0ce3ac;
}

a.list-group-item.empty span.badge {
  background: #b9b9b9;
}

.macro.new .form-control {
  border-radius: 0;
}


/*.macro.new .input-group-addon {*/


/*display: block;*/


/*height: 100%;*/


/*width: 100%;*/


/*padding-top: 13px;*/


/*padding-bottom: 13px;*/


/*}*/

.optional {
  font-size: 12px;
  color: #b9b9b9;
}

@media only screen and (max-width: 1200px) {}

@media only screen and (max-width: 992px) {
  .form-group.macro .input-group-addon:first-child input[type=checkbox]+label:before {
    left: 47%;
  }
}

@media only screen and (min-width: 768px) {
  .nopadding:first-child .radio-inline.height, .nopadding:first-child .radio-inline.weight, .nopadding:last-child .radio-inline.height, .nopadding:last-child .radio-inline.weight {
    float: none;
  }
  .icon-clipboard, .icon-math, .glyphicon-wrench, .glyphicon-equalizer {
    font-size: 5em;
    line-height: 100%;
  }
}

@media screen and (max-width: 767px) {
  .form-height .form-control, .form-gender .form-control {
    height: 100%;
    padding: 16px 15px;
  }
  .height, .weight {
    margin-top: 0;
    margin-bottom: 0.4em;
  }
  .icon-pitch {
    font-size: 3em;
    line-height: 100%;
  }
  .icon-pitch:before {
    margin-bottom: 15px;
  }
  .form-height label {
    font-size: 0.8em;
    display: block;
  }
  .form-height .nopadding {
    line-height: 100%;
  }
  .icon-gauge:before {
    width: 1.2em;
  }
  .form-group.form-adjustment .list-group-item:last-child {
    margin-bottom: 20px;
  }
  h3.ng-binding {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;
  }
  .btn-sm.btn-primary {
    font-size: 1em;
  }
  .form-fat .rzslider {
    margin-top: 18px;
  }
  .form-group.form-adjustment label, .form-group.formula label {
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 480px) {
  .icon-resize-vertical, .icon-person, .icon-gauge {
    font-size: 3em;
    line-height: 100%;
  }
  .height, .weight {
    font-size: 0.8em;
  }
  .glyphicon-scale {
    font-size: 2.7em;
  }
}

@media only screen and (max-width: 320px) {
  .rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value {
    font-size: 0.6em;
    line-height: 100%;
  }
  input.form-control {
    font-size: 1em;
    line-height: 100%;
  }
  .icon-male:before, .icon-female:before {
    text-align: center;
  }
  .image-wrapper {
    max-width: 240px;
  }
}

canvas{
    background: #fff !important;
    background-color: #fff !important;
    margin: 0;
}

#cisForm {
    padding: 10px;
    width: 1000px;
    margin: 0;
    background: #fff !important;
}

.buttons-actions .pull-right:last-child {
  margin-right: 15px;
}