html {
  font-family: sans-serif; }

body {
  margin: 0; }

#app {
  height: 100vh;
  display: -ms-flexbox;
  display: flex; }

#app .training-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1; }

#app .supplements-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1; }

#app .schedule-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1; }

#app .payments-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1; }

#loading {
  background: white;
  width: 100%;
  text-align: center; }

#loading .title {
  color: #656565;
  font-size: 1.7em; }

#loading .message {
  color: white;
  font-weight: 100;
  font-size: 0.8em;
  margin-top: 20px; }

#loading .logo {
  width: 80%;
  padding-top: 200px; }

#login {
  background: white;
  height: 100vh;
  width: 100%;
  text-align: center; }

#input {
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #bbb;
  border-radius: 3px;
  color: #333;
  font-weight: 100;
  display: block;
  font-size: 1.3em;
  line-height: 2em;
  height: 2em;
  margin: auto;
  padding-left: 20px;
  width: 75%;
  margin-bottom: 5px; }

#button {
  background: linear-gradient(90deg, #ed2e50, #a82d42);
  border: 1px solid #FFFFFF;
  border-radius: 3px;
  text-align: center;
  color: white;
  -webkit-user-select: none;
  -ms-user-select: none;
      user-select: none;
  cursor: pointer;
  display: block;
  font-size: 1.3em;
  line-height: 2em;
  height: 2em;
  margin: auto;
  margin-top: 30px;
  width: 80%; }

#login .logo-first {
  font-size: 1em;
  font-weight: 100;
  margin-top: 5%; }

#login img {
  margin-top: 5%;
  margin-bottom: 5%;
  width: 80%; }

#login .forgot-password {
  font-size: 1em;
  font-weight: 100;
  margin-top: 5%; }

#login .wrong-password {
  padding-bottom: 10px;
  color: gray;
  font-weight: 100; }

#training-list {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding-top: 94px;
  position: fixed;
  top: 0;
  bottom: 0; }

#supplement-list {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding-top: 92px;
  position: fixed;
  top: 0;
  bottom: 0; }

#supplement-list .supplement .value p {
  margin: 0; }

#schedule-list {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding-top: 92px;
  position: fixed;
  top: 0;
  bottom: 0; }

#schedule-list .schedule .am {
  border-bottom: 1px solid #ed2e50; }

#schedule-list .schedule .pm {
  padding-top: 10px; }

#payments-list {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding-top: 92px;
  position: fixed;
  top: 0;
  bottom: 0; }

#payments-list .payment {
  display: -ms-flexbox;
  display: flex;
  background: whitesmoke;
  margin: 5px;
  padding: 5px;
  -ms-flex-direction: row;
      flex-direction: row;
  opacity: 1;
  border-radius: 10px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-pack: justify;
      justify-content: space-between; }

#payments-list .payment .date {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  min-width: 16%; }

#payments-list .payment .date .day,
#payments-list .payment .date .month,
#payments-list .payment .date .year {
  -ms-flex-positive: 0;
      flex-grow: 0;
  text-align: center;
  font-size: 1em;
  margin-right: 5px; }

#payments-list .payment .date .month {
  font-size: 1em;
  color: #ed2e50; }

#payments-list .payment .price {
  font-weight: bolder; }

#training-list .training,
#supplement-list .supplement,
#schedule-list .schedule {
  display: -ms-flexbox;
  display: flex;
  background: whitesmoke;
  margin: 5px;
  padding: 5px;
  -ms-flex-direction: row;
      flex-direction: row;
  opacity: 0.5;
  border-radius: 10px;
  -ms-flex-negative: 0;
      flex-shrink: 0; }

#training-list .training.active,
#supplement-list .supplement.active,
#schedule-list .schedule.active {
  opacity: 1;
  border-bottom: 5px solid #ed2e50; }

#supplement-list .supplement .date,
#schedule-list .schedule .date {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }

#training-list .training .date .day,
#training-list .training .date .month,
#supplement-list .supplement .date .day,
#supplement-list .supplement .date .month,
#schedule-list .schedule .date .day,
#schedule-list .schedule .date .month {
  -ms-flex-positive: 0;
      flex-grow: 0;
  text-align: center;
  font-weight: bolder;
  font-size: 1.4em; }

#training-list .training .date .month,
#supplement-list .supplement .date .month,
#schedule-list .schedule .date .month {
  font-size: 1.2em;
  color: #ed2e50; }

#training-list .training .info,
#supplement-list .supplement .info,
#schedule-list .schedule .info {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-positive: 1;
      flex-grow: 1;
  padding-left: 10px;
  padding-top: 2px;
  overflow: hidden;
  max-width: 80%; }

#supplement-list .supplement,
#schedule-list .schedule {
  opacity: 0.8; }

#training-list .training .info .description,
#supplement-list .supplement .info .description,
#schedule-list .schedule .info .description {
  font-size: 0.7em;
  color: grey;
  font-weight: 300; }

#training-list .training .button {
  display: -ms-flexbox;
  display: flex; }

#training-list #button {
  background: #f3f3f3;
  color: #ed2e50;
  margin: 0;
  box-shadow: 1px 1px 3px #888888;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%; }

#training {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  padding-top: 90px; }

#training .title {
  font-size: 2em;
  color: #444444;
  padding: 10px; }

#training .description {
  font-size: 0.8em;
  color: black;
  padding: 5px;
  padding-left: 15px;
  padding-bottom: 2px;
  font-weight: 100; }

#training .workout {
  display: -ms-flexbox;
  display: flex;
  background: whitesmoke;
  margin: 5px;
  padding: 5px;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-radius: 10px; }

#training .workout .details {
  -ms-flex-positive: 1;
      flex-grow: 1;
  max-width: 90%;
  overflow: hidden; }

#training .workout .steps {
  -ms-flex-positive: 1;
      flex-grow: 1;
  padding-left: 5px; }

#training .workout .steps .step .title {
  font-weight: 400;
  font-size: 0.8em;
  color: #cc6e67; }

#training .workout .steps .step .title span {
  font-weight: bold; }

#training .workout .steps .step {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  line-height: 25px; }

#training .workout .steps .step img {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin-right: 10px; }

#training #button {
  background: #f3f3f3;
  color: #ed2e50;
  margin: 0;
  box-shadow: 1px 1px 3px #888888;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  -ms-flex-item-align: start;
      align-self: flex-start;
  -ms-flex-negative: 0;
      flex-shrink: 0; }

#workout .menu #button,
#training .menu #button {
  -ms-flex-item-align: end;
      align-self: flex-end;
  width: 40px;
  border-radius: 50%;
  height: 40px;
  line-height: 40px;
  background: whitesmoke;
  color: #ed2e50;
  box-shadow: 1px 1px 3px #888888;
  margin: 10px; }

#training .menu {
  height: 70px;
  display: -ms-flexbox;
  display: flex;
  bottom: 0;
  left: 0;
  position: fixed; }

#training .workout .title {
  font-size: 1.2em;
  color: black;
  padding: 0px; }

#training .workout .description {
  font-size: 0.7em;
  color: grey;
  padding: 0px 0px 0px 3px; }

#workout {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1;
  background: linear-gradient(45deg, #ed2e50, #a82d42);
  padding-top: 90px; }

#workout .step img {
  width: 100%; }

#workout .menu {
  height: 70px;
  display: -ms-flexbox;
  display: flex;
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100%; }

#workout .step {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-direction: column;
      flex-direction: column; }

#workout .step.hidden {
  display: none; }

#workout .step .header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  background: linear-gradient(180deg, #3a4651, #2b3238);
  color: #627485; }

#workout .step .title {
  font-size: 1em;
  padding: 10px;
  -ms-flex-positive: 1;
      flex-grow: 1;
  font-weight: bold; }

#workout .step .title span {
  font-weight: normal;
  color: #5c6d7d;
  font-size: small; }

#workout .step .step-number {
  font-size: 0.7em;
  padding-right: 10px;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center; }

#workout .step .description {
  padding: 10px;
  font-size: 1em;
  font-weight: 100;
  background: white;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1;
  margin: 6px 6px 3px 6px;
  border-radius: 7px;
  -ms-flex-direction: column;
      flex-direction: column; }

#user-menu {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-align: self-start;
      align-items: self-start;
  height: 50px;
  line-height: 40px;
  padding: 5px;
  background: linear-gradient(180deg, #3a4651, #2b3238);
  color: #627485;
  position: fixed;
  Z-INDEX: 1;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%; }

#breadcrumbs {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
  -ms-flex-align: self-start;
      align-items: self-start;
  height: 30px;
  line-height: 20px;
  background: linear-gradient(353deg, #3a4651, #2b3238);
  color: #98a4b0;
  position: fixed;
  Z-INDEX: 1;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  margin-top: 60px;
  font-size: larger;
  font-variant: petite-caps; }

#breadcrumbs .text {
  padding-right: 10px;
  line-height: 25px; }

#user-menu .avatar {
  display: -ms-flexbox;
  display: flex; }

#user-menu .avatar img {
  border-radius: 50%;
  max-width: 40px;
  max-height: 40px;
  width: 40px;
  height: 40px;
  background-position: center center;
  background-repeat: no-repeat; }

#user-menu .user-details {
  padding-left: 10px;
  -ms-flex-positive: 1;
      flex-grow: 1; }

#user-menu .user-details .first-name {
  height: 15px;
  line-height: 20px;
  font-size: small;
  color: whitesmoke; }

#user-menu .user-details .last-name {
  height: 20px;
  line-height: 20px;
  font-weight: 900;
  color: whitesmoke; }

#user-menu .user-details .club-name {
  height: 10px;
  line-height: 10px;
  font-weight: 100;
  color: whitesmoke;
  font-size: small;
  color: #ed2e50;
  padding-top: 1px; }

#user-menu .action-bar {
  padding-right: 5px;
  display: -ms-flexbox;
  display: flex; }

#user-menu .action-bar .active {
  color: #fdf6f2; }

#user-menu .action-bar .badge.bg-green {
  background: #68757f !important;
  border: 1px solid #433739 !important;
  color: #fff;
  display: inline-block;
  min-width: 11px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #777;
  border-radius: 50%;
  font-size: 10px;
  font-weight: normal;
  line-height: 13px;
  padding: 2px 3px;
  position: relative;
  right: 6px;
  top: -12px; }

#user-menu .user-menu-box {
  position: fixed;
  z-index: 1;
  background: red;
  width: 100%;
  top: 50px;
  background: linear-gradient(180deg, #3a4651, #2b3238);
  left: 0;
  opacity: 0.99;
  overflow-y: scroll;
  max-height: 91vh;
  -webkit-overflow-scrolling: touch; }

#user-menu .message-list {
  padding-left: 10px; }

#user-menu .message-list .message {
  border-bottom: 1px solid #84675e;
  margin-bottom: 10px; }

#user-menu .message-list .message .subject {
  line-height: 20px;
  font-weight: bold;
  color: #e6816c; }

#user-menu .message-list .message .body {
  font-size: 0.9em; }

#user-menu .message-list .message .body p,
#user-menu .message-list .message .body li {
  font-size: 0.9em;
  line-height: 15px; }

#user-menu .message-list .message span {
  color: #7c8b98;
  font-size: small; }

#user-menu .message-list .message .sender {
  line-height: 15px;
  font-size: small;
  color: #7c8b98;
  font-size: 0.8em; }

#user-menu .message-list .message #button {
  background: #f3f3f3;
  color: #ed2e50;
  margin: 0;
  box-shadow: 1px 1px 3px #888888;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  float: right;
  margin-right: 10px;
  display: inline-block; }