button {
  font-family: "Manrope", Helvetica Neue, Helvetica, sans-serif; }

.button__gradient {
  text-align: center;
  color: white;
  cursor: pointer;
  font-size: 15px;
  width: 100%;
  clear: both;
  display: block;
  text-decoration: none;
  border: none;
  border-radius: 300px;
  height: 50px;
  line-height: 50px;
  font-weight: 500;
  letter-spacing: .5px;
  background: #03238D; }

.button__teal {
  text-align: center;
  color: white;
  cursor: pointer;
  font-size: 15px;
  width: 100%;
  clear: both;
  display: block;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  height: 50px;
  text-transform: uppercase;
  line-height: 50px;
  font-weight: 600;
  letter-spacing: .5px;
  background: #8bc9ba; }

.button__red {
  text-align: center;
  color: white;
  cursor: pointer;
  font-size: 15px;
  width: 100%;
  clear: both;
  display: block;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  height: 50px;
  text-transform: uppercase;
  line-height: 50px;
  font-weight: 600;
  letter-spacing: .5px;
  background: #d86969; }

.button__grey {
  text-align: center;
  color: #8C9897;
  cursor: pointer;
  font-size: 15px;
  width: 100%;
  clear: both;
  display: block;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  height: 50px;
  text-transform: uppercase;
  line-height: 50px;
  font-weight: 600;
  letter-spacing: .5px;
  background: #e1e5ee; }

.button__white {
  text-align: center;
  color: #8C9897;
  cursor: pointer;
  font-size: 15px;
  width: 100%;
  clear: both;
  display: block;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  height: 50px;
  text-transform: uppercase;
  line-height: 50px;
  font-weight: 600;
  letter-spacing: .5px;
  background: white; }

.button__outline {
  text-align: center;
  color: #03238d;
  cursor: pointer;
  font-size: 15px;
  width: 100%;
  clear: both;
  display: block;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  height: 50px;
  text-transform: uppercase;
  line-height: 50px;
  font-weight: 600;
  letter-spacing: .5px;
  border: 1px solid #03238d; }

.button__small {
  line-height: 30px;
  height: 30px;
  display: inline-block;
  width: auto;
  padding: 0 20px;
  font-size: 12px; }

.navigation {
  width: 100%;
  max-height: 40px;
  background: white;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.11);
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  position: fixed;
  z-index: 10; }
  .navigation.nav-hide {
    display: none; }
  @media (min-width: 600px) {
    .navigation {
      box-shadow: none;
      width: auto;
      border-bottom: 1px solid #dee2ed;
      margin: 0 50px;
      padding: 30px 0;
      max-height: 90px;
      position: relative; }
      .navigation.nav-hide {
        display: block; } }

.navigation__logo {
  width: 96px;
  margin-left: 15px;
  margin-top: 7px;
  float: left; }
  @media (min-width: 600px) {
    .navigation__logo {
      width: 120px;
      margin-top: 0; } }

.navigation--is-open {
  max-height: 100vh;
  background-color: white; }

.navigation__hamburger {
  margin-left: calc(100% - 40px);
  width: 40px;
  padding: 10px; }

.navigation__dropdown {
  margin-bottom: 10px; }
  @media (min-width: 600px) {
    .navigation__dropdown {
      margin-top: 30px; } }

.navigation__dropdown a {
  color: #03238d;
  font-size: 16px;
  margin-left: 10px;
  line-height: 40px;
  display: block;
  text-align: left;
  text-decoration: none;
  font-weight: 400; }

.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.noUi-target {
  position: relative;
  direction: ltr;
  margin-top: 70px; }

.noUi-base,
.noUi-connects {
  width: 94%;
  margin-left: 3%;
  height: 100%;
  position: relative;
  z-index: 1; }

/* Wrapper for all connect elements.
 */
.noUi-connects {
  overflow: hidden;
  z-index: 0; }

.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0; }

/* Offset direction
 */
html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
  left: auto;
  right: 0; }

/* Give origins 0 height/width so they don't interfere with clicking the
 * connect elements.
 */
.noUi-vertical .noUi-origin {
  width: 0; }

.noUi-horizontal .noUi-origin {
  height: 0; }

.noUi-handle {
  position: absolute;
  transform: translate3d(0, 0, 0); }

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s; }

.noUi-state-drag * {
  cursor: inherit !important; }

/* Slider size and handle placement
 */
.noUi-horizontal {
  height: 6px; }

.noUi-horizontal .noUi-handle {
  width: 30px;
  height: 30px;
  left: -15px;
  top: -13px; }

.noUi-vertical {
  width: 13px; }

.noUi-vertical .noUi-handle {
  width: 30px;
  height: 30px;
  left: -15px;
  top: -13px; }

html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
  right: -16px;
  left: auto; }

/* Styling
 * Giving the connect element a border radius causes issues with using transform: scale
 */
.noUi-target {
  background: #e1e2e7;
  border-radius: 30px;
  border: 0px; }

.noUi-connects {
  border-radius: 30px; }

.noUi-connect {
  background: #3FB8AF; }

/* Handles and cursors
 */
.noUi-draggable {
  cursor: ew-resize; }

.noUi-vertical .noUi-draggable {
  cursor: ns-resize; }

.noUi-handle {
  border: 3px solid #88d8bd;
  border-radius: 100%;
  background: #FFF;
  cursor: pointer;
  outline: none;
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; }

.noUi-active {
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; }

/* Handle stripes
 */
.noUi-handle:before {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  background: #88d8bd;
  left: 0;
  top: 0;
  border-radius: 100%;
  border: 3px solid white; }

.noUi-handle:after {
  left: 17px; }

.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px; }

.noUi-vertical .noUi-handle:after {
  top: 17px; }

/* Disabled state
 */
[disabled] .noUi-connect {
  background: #B8B8B8; }

[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed; }

/* Base
 *
 */
.noUi-pips,
.noUi-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.noUi-pips {
  position: absolute;
  color: #999; }

/* Values
 *
 */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
  font-size: 13px; }

.noUi-value-sub {
  color: #ccc;
  font-size: 10px; }

/* Markings
 *
 */
.noUi-marker {
  position: absolute;
  background: #CCC;
  display: none; }

.noUi-marker-sub {
  background: #AAA; }

.noUi-marker-large {
  background: #AAA; }

/* Horizontal layout
 *
 */
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 60px;
  top: 100%;
  left: 2%;
  width: 96%; }

.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%); }

.noUi-rtl .noUi-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%); }

.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px; }

.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px; }

.noUi-marker-horizontal.noUi-marker-large {
  height: 15px; }

/* Vertical layout
 *
 */
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%; }

.noUi-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%, 0);
  padding-left: 25px; }

.noUi-rtl .noUi-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%); }

.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px; }

.noUi-marker-vertical.noUi-marker-sub {
  width: 10px; }

.noUi-marker-vertical.noUi-marker-large {
  width: 15px; }

.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px 5px;
  font-weight: bold;
  text-align: center;
  max-width: 80px;
  line-height: 1; }
  .noUi-tooltip:after, .noUi-tooltip:before {
    top: 100%;
    left: 50%;
    content: " ";
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none; }
  .noUi-tooltip:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #ffffff;
    border-width: 5px;
    margin-left: -5px; }
  .noUi-tooltip:before {
    border-color: rgba(217, 217, 217, 0);
    border-top-color: #d9d9d9;
    border-width: 6px;
    margin-left: -6px; }
  .noUi-tooltip img {
    width: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px; }

.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 35px; }

.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%; }

.coloured-slider .noUi-target {
  margin-top: 40px;
  margin-bottom: 40px;
  background: #fbcb39; }

.coloured-slider .noUi-target:before {
  content: ' ';
  display: block;
  width: 22%;
  height: 100%;
  position: absolute;
  background: #eb3233;
  border-radius-top-left: 50px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px; }

.coloured-slider .noUi-target:after {
  content: ' ';
  display: block;
  right: 0;
  top: 0;
  width: 22%;
  height: 100%;
  position: absolute;
  background: #4bb452;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px; }

.coloured-slider__legenda {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  position: relative; }

.coloured-slider__legenda-item:first-child:after {
  content: ' ';
  position: absolute;
  height: 22px;
  width: 1px;
  background: #bcbcbc;
  top: -7px;
  left: 1px;
  transform: translateY(-100%); }

.coloured-slider__legenda-item:last-child:after {
  content: ' ';
  position: absolute;
  height: 22px;
  width: 1px;
  background: #bcbcbc;
  top: -7px;
  right: 1px;
  transform: translateY(-100%); }

.normal-slider .noUi-target {
  margin-top: 40px;
  margin-bottom: 40px; }

.normal-slider__legenda {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  position: relative; }

.normal-slider__legenda-item:first-child:after {
  content: ' ';
  position: absolute;
  height: 22px;
  width: 1px;
  background: #bcbcbc;
  top: -7px;
  left: 1px;
  transform: translateY(-100%); }

.normal-slider__legenda-item:last-child:after {
  content: ' ';
  position: absolute;
  height: 22px;
  width: 1px;
  background: #bcbcbc;
  top: -7px;
  right: 1px;
  transform: translateY(-100%); }

.checkbox-container {
  display: block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer; }

.checkbox {
  position: absolute;
  top: 4px;
  left: 0;
  height: 14px;
  width: 14px;
  border: 1px solid #8C9897;
  border-radius: 3px; }

.checkbox-container input:checked ~ .checkbox {
  background-color: #88d8bd;
  border: 1px solid #88d8bd; }

.checkbox:after {
  content: "";
  position: absolute;
  display: none; }

.checkbox-container input:checked ~ .checkbox:after {
  display: block; }

.checkbox-container .checkbox:after {
  left: 4px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.radio-container {
  display: block;
  position: relative;
  padding-left: 25px;
  padding-top: 5px;
  padding-bottom: 5px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

/* Hide the browser's default radio button */
.radio-container input {
  position: absolute;
  opacity: 0; }

/* Create a custom radio button */
.radio {
  position: absolute;
  top: 9px;
  left: 0;
  height: 14px;
  width: 14px;
  border: 1px solid #8C9897;
  border-radius: 50%; }

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .radio {
  background-color: #88d8bd;
  border: 1px solid #88d8bd; }

.radio-container .bg {
  position: absolute;
  width: 104%;
  left: -2%;
  top: -10%;
  height: 120%;
  background: #e6e9f8;
  border-radius: 5px;
  z-index: -1;
  opacity: 0;
  transition: .3s ease opacity; }

.radio-container input:checked ~ .bg {
  opacity: 1; }

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio:after {
  content: "";
  position: absolute;
  display: none; }

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .radio:after {
  display: block; }

/* Style the indicator (dot/circle) */
.radio-container .radio:after {
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white; }

.ios-save {
  position: fixed;
  display: flex;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  color: white;
  flex-direction: column;
  opacity: 0;
  transform: translateX(-100%);
  transition: .3s ease opacity; }
  .active .ios-save {
    opacity: 1;
    transform: translateX(0); }

.ios-save__message svg {
  display: inline-block;
  width: 26px;
  vertical-align: sub; }

.ios-save__message {
  text-align: center;
  line-height: 25px;
  margin-bottom: 30px; }

.ios-save__arrow {
  text-align: center;
  margin-bottom: 15px; }

.ios-save__arrow svg {
  width: 25px;
  height: auto; }

.ios-save__icon {
  text-align: center;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }

.ios-save__icon img {
  border-radius: 11px;
  margin-bottom: 15px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); }

.ios-save__close {
  padding-right: 15px;
  padding-top: 15px;
  text-align: right; }

.modal {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 12; }
  .modal.modal--active {
    display: block; }
  .modal.modal--visible .modal__window {
    transform: translate3d(-50%, -50%, 0);
    opacity: 1; }
  .modal.modal--visible .modal__background {
    opacity: 1; }
  .modal .modal__background {
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0;
    transition: .3s ease opacity; }
  .modal .modal__window {
    position: absolute;
    display: block;
    z-index: 2;
    opacity: 0;
    top: 50%;
    left: 50%;
    width: calc(100% - 30px);
    max-width: 370px;
    transform: translate3d(-50%, -30%, 0);
    background: white;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    transition: .3s ease all; }
  .modal .modal__content {
    max-width: 400px;
    width: 100%;
    display: block;
    padding: 15px 15px 15px 15px;
    border-radius: 3px;
    margin: 0 auto;
    flex-grow: 1;
    position: relative; }
  .modal .modal__paragraph {
    line-height: 1.5; }
  .modal .modal__question {
    color: #03238d;
    padding: 20px 0px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 4px; }
  .modal .modal__buttons {
    padding-top: 15px;
    display: flex; }
    .modal .modal__buttons .button {
      border-radius: 0 !important;
      outline: none !important; }

.exercise-final__stats {
  padding: 20px 15px;
  display: flex;
  position: relative; }
  @media (max-width: 340px) {
    .exercise-final__stats {
      padding: 10px 5px; } }
  @media (min-width: 600px) {
    .exercise-final__stats {
      box-shadow: 0px 0px 30px #e7e7e7;
      margin: 0 30px;
      border-radius: 10px;
      padding: 15px 10px; } }

.exercise-final__stats-item {
  width: 50%;
  text-align: center; }

.exercise-final__stats-item-value {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 5px;
  color: #03238d; }
  @media (max-width: 340px) {
    .exercise-final__stats-item-value {
      font-size: 18px; } }
  @media (min-width: 600px) {
    .exercise-final__stats-item-value {
      font-size: 30px; } }

.exercise-final__stats-item-label {
  font-size: 12px; }
  @media (min-width: 600px) {
    .exercise-final__stats-item-label {
      font-size: 14px; } }

.exercise-final__stats:before {
  content: ' ';
  display: block;
  position: absolute;
  bottom: 0;
  width: calc(100% - 30px);
  border-bottom: 1px solid #e1e2e7;
  left: 15px; }
  @media (min-width: 600px) {
    .exercise-final__stats:before {
      display: none; } }

.weekly-question {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  background: white;
  display: none;
  opacity: 1;
  flex-direction: column;
  transition: .3s ease opacity; }
  @media (min-width: 600px) {
    .weekly-question {
      top: 90px;
      height: calc(100% - 90px); } }
  .weekly-question.weekly-question--active {
    display: flex; }
  .weekly-question.weekly-question--fadeOut {
    opacity: 0; }
  .weekly-question .weekly-question__content {
    position: relative;
    flex-grow: 1;
    max-width: 400px;
    width: 100%;
    display: block;
    padding: 15px 15px 15px 15px;
    border-radius: 3px;
    margin: 0 auto; }
  .weekly-question .weekly-question__buttons {
    padding: 15px;
    padding-top: 0px;
    max-width: 400px;
    margin: 0 auto;
    width: 100%; }
  .weekly-question .weekly-question__questions {
    font-weight: bold;
    color: #03238d;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    padding: 15px 15px; }
  .weekly-question .weekly-question__changegoal {
    position: absolute;
    background: #03238d;
    padding: 9px 11px;
    text-align: center;
    cursor: pointer;
    color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    top: 15px;
    right: 15px;
    z-index: 10;
    font-weight: bold;
    font-size: 11px;
    line-height: 14px;
    text-transform: uppercase; }

body {
  font: 100% "Manrope", Helvetica Neue, Helvetica, sans-serif;
  margin: 0;
  background-color: white;
  color: #8C9897;
  letter-spacing: 0.5px;
  font-weight: 300; }

main {
  padding-top: 40px; }
  main.nav-hidden {
    padding-top: 0px; }
    main.nav-hidden .exercise__back {
      top: 0px; }
    main.nav-hidden .exercise__icon-back {
      fill: black !important; }
  @media (min-width: 600px) {
    main {
      padding-top: 20px; }
      main.nav-hidden .exercise__back {
        top: 20px; } }

p {
  font-size: .85rem;
  line-height: 1.4; }
  @media (max-width: 340px) {
    p {
      font-size: .82rem; } }

input {
  font-size: .85rem; }

*, ::before, ::after {
  box-sizing: border-box; }

.margin-bottom-6 {
  margin-bottom: 48px; }

.margin-bottom-2 {
  margin-bottom: 16px; }

.margin-bottom-3 {
  margin-bottom: 20px; }

.margin-bottom-4 {
  margin-bottom: 32px; }

@media (min-width: 600px) {
  .margin-bottom-desktop-4 {
    margin-bottom: 32px; } }

.questionnaire {
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  margin: 0 auto; }
  @media (min-width: 600px) {
    .questionnaire {
      position: relative;
      height: auto; } }

.questionnaire__question,
.exercise-feedback__general {
  font-weight: bold;
  padding-bottom: 20px;
  color: #03238d; }

.input-radio__item {
  margin-bottom: 10px; }

.questionnaire__icon-back,
.exercise__icon-back {
  width: 20px;
  fill: black;
  cursor: pointer; }

.questionnaire__icon-back {
  cursor: pointer; }

main[data-active="first"] .exercise__back,
main[data-active="nextExercise"] .exercise__back {
  position: absolute;
  z-index: 10; }
  @media (min-width: 600px) {
    main[data-active="first"] .exercise__back,
    main[data-active="nextExercise"] .exercise__back {
      position: relative; } }
  main[data-active="first"] .exercise__back svg,
  main[data-active="nextExercise"] .exercise__back svg {
    fill: white; }
    @media (min-width: 600px) {
      main[data-active="first"] .exercise__back svg,
      main[data-active="nextExercise"] .exercise__back svg {
        fill: black; } }

.questionnaire__logo {
  width: 200px;
  display: block;
  margin: 0 auto;
  padding-bottom: 24px;
  padding-top: 24px; }

.questionnaire__body {
  position: relative; }

.questionnaire__body__neck {
  position: absolute;
  top: 23px;
  left: 0;
  border-bottom: 1px solid #88d8bd;
  width: 80%;
  padding-bottom: 3px; }

.questionnaire__body__back {
  position: absolute;
  top: 31%;
  left: 0;
  border-bottom: 1px solid #88d8bd;
  width: 80%;
  padding-bottom: 3px; }

.questionnaire__body__none {
  position: absolute;
  bottom: 0px;
  left: 0; }

.questionnaire__body-img {
  max-width: 45%;
  display: block;
  float: right;
  position: relative;
  z-index: 1; }

.pain-none-label {
  display: inline-flex; }

.questionnaire__body-img--male {
  display: none; }

.questionnaire__body-img--is-male .questionnaire__body-img--male {
  display: block; }

.questionnaire__body-img--is-male .questionnaire__body-img--female {
  display: none; }

.questionnaire__input {
  display: inline-block;
  width: 100%; }

.questionnaire__track {
  width: 800vw;
  transform: translate3d(0, 0, 0);
  transition: transform 0.3s ease-in-out;
  height: 100%; }

.questionnaire__slide {
  width: 100vw;
  float: left;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }
  @media (min-width: 600px) {
    .questionnaire__slide {
      display: block; } }

.questionnaire__slide__back,
.contact_form__back,
.exercise__back {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  padding: 15px 15px 0px 15px; }
  @media (min-width: 600px) {
    .questionnaire__slide__back,
    .contact_form__back,
    .exercise__back {
      max-width: inherit;
      width: calc(100% - 100px);
      padding: 0px 0px; } }

.exercise-detail__skip {
  position: absolute;
  top: 0px;
  right: 5px;
  z-index: 11; }
  .exercise-detail__skip div {
    line-height: 30px;
    font-size: 14px;
    cursor: pointer;
    padding: 10px; }
  @media (min-width: 600px) {
    .exercise-detail__skip {
      top: -20px;
      right: 50px; } }

.questionnaire__slide__content, .questionnaire__modal__content {
  max-width: 400px;
  width: 100%;
  display: block;
  padding: 15px 15px 15px 15px;
  border-radius: 3px;
  margin: 0 auto;
  flex-grow: 1;
  position: relative; }

.questionnaire__button {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px 15px 15px; }
  @media (min-width: 600px) {
    .questionnaire__button {
      margin-top: 40px; } }

.questionnaire__cta {
  margin-left: -15px;
  margin-right: -15px;
  border-top: 2px solid #e1e2e7;
  cursor: pointer; }

.questionnaire__cta__split {
  width: 50%;
  float: left;
  height: 40px;
  font-size: .85rem;
  text-align: center;
  line-height: 40px;
  text-transform: uppercase;
  color: #8C9897; }

.questionnaire__cta__split:first-child {
  border-right: 1px solid #e1e2e7; }

.questionnaire__cta__split:last-child {
  border-left: 1px solid #e1e2e7; }

.questionnaire__input,
.questionnaire__question {
  line-height: 22px; }

.age__slider,
.pain__slider,
.time__slider,
.sitting__slider,
.standing__slider {
  width: 232px;
  margin: 0; }

.pain__slider {
  margin-bottom: 24px; }

.pain__icon {
  width: 50px;
  margin: 8px 0 8px 91px; }

.time__display,
.standing__display,
.sitting__display {
  width: 232px;
  text-align: center;
  font-size: 24px;
  margin-top: 8px;
  margin-bottom: 8px; }

.sitting__display {
  font-size: 16px; }

.age__display {
  font-size: 50px;
  line-height: 50px;
  text-align: center;
  width: 232px;
  margin-bottom: 16px;
  margin-top: 16px; }

.gender-split, .double-choice__item {
  width: 45%;
  float: left; }
  .gender-split label, .double-choice__item label {
    transition: .5s ease all;
    height: 80px;
    border: 1px solid #8C9897;
    border-radius: 5px;
    padding-top: 5px;
    text-align: center;
    width: 100%;
    display: block;
    cursor: pointer; }

.gender-split--male, .double-choice__item:last-child {
  float: right; }

.gender-split--active label, .double-choice__item--active label {
  background-color: #03238d;
  border-color: #03238d;
  color: white; }

#genderMale,
#genderFemale,
#goal_pain_relief,
#goal_prevention {
  display: none; }

.welcome {
  max-width: 280px;
  margin: 0 auto; }

.welcome__logo {
  width: 200px;
  display: block;
  margin: 0 auto;
  padding-bottom: 24px;
  padding-top: 24px; }

.welcome__message {
  line-height: 22px; }

.welcome__message a {
  color: #03238d; }

.welcome__message ul {
  padding-left: 18px;
  line-height: 32px; }

.signup {
  margin-top: 32px; }
  @media (min-width: 600px) {
    .signup {
      margin-top: 0; } }

.signup__label {
  margin-bottom: 8px;
  font-size: 12px;
  color: #03238d;
  font-weight: bold;
  margin-top: 20px;
  text-transform: uppercase; }

.signup__input {
  margin-bottom: 8px;
  height: 40px;
  border-radius: 3px;
  box-shadow: none;
  border: 1px solid #8C9897;
  padding: 10px; }

.signup__textarea {
  margin-bottom: 8px;
  border-radius: 3px;
  box-shadow: none;
  border: 1px solid #8C9897;
  padding: 10px;
  width: 100%; }

.signup__agb {
  font-size: .85rem;
  margin-top: 20px;
  line-height: 18px; }

.signup__message {
  font-size: .85rem;
  margin-bottom: 20px;
  line-height: 18px; }

.signup__label,
.signup__input,
.signup__submit {
  width: 100%;
  display: block; }

.signup__submit {
  box-shadow: none;
  border: none;
  width: 100%;
  font-size: 16px; }

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%; }

input[type=range]:focus {
  outline: none; }

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #e1e2e7;
  border-radius: 25px;
  border: 0px solid #000101; }

input[type=range]::-webkit-slider-thumb {
  box-shadow: none;
  border: 0px solid #000000;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background: #88d8bd;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px; }

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #e1e2e7; }

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #e1e2e7;
  border-radius: 25px;
  border: 0px solid #000101; }

input[type=range]::-moz-range-thumb {
  box-shadow: none;
  border: 0px solid #000000;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background: #88d8bd;
  cursor: pointer; }

input[type=range].gradient-slider::-ms-fill-lower {
  background: #ff9c01;
  background: -moz-linear-gradient(left, #ff9c01 0%, #ff9c01 20%, #fce506 20%, #fce506 20%, #fce506 80%, #97e489 80%, #fce506 80%, #97e489 80%, #97e489 80%, #97e489 100%);
  background: -webkit-linear-gradient(left, #ff9c01 0%, #ff9c01 20%, #fce506 20%, #fce506 20%, #fce506 80%, #97e489 80%, #fce506 80%, #97e489 80%, #97e489 80%, #97e489 100%);
  background: linear-gradient(to right, #ff9c01 0%, #ff9c01 20%, #fce506 20%, #fce506 20%, #fce506 80%, #97e489 80%, #fce506 80%, #97e489 80%, #97e489 80%, #97e489 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c01', endColorstr='#97e489',GradientType=1 );
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; }

input[type=range].gradient-slider::-ms-fill-upper {
  background: #ff9c01;
  background: -moz-linear-gradient(left, #ff9c01 0%, #ff9c01 20%, #fce506 20%, #fce506 20%, #fce506 80%, #97e489 80%, #fce506 80%, #97e489 80%, #97e489 80%, #97e489 100%);
  background: -webkit-linear-gradient(left, #ff9c01 0%, #ff9c01 20%, #fce506 20%, #fce506 20%, #fce506 80%, #97e489 80%, #fce506 80%, #97e489 80%, #97e489 80%, #97e489 100%);
  background: linear-gradient(to right, #ff9c01 0%, #ff9c01 20%, #fce506 20%, #fce506 20%, #fce506 80%, #97e489 80%, #fce506 80%, #97e489 80%, #97e489 80%, #97e489 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c01', endColorstr='#97e489',GradientType=1 );
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; }

input[type=range].gradient-slider::-moz-range-track {
  width: 100%;
  height: 8.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ff9c01;
  background: -moz-linear-gradient(left, #ff9c01 0%, #ff9c01 20%, #fce506 20%, #fce506 20%, #fce506 80%, #97e489 80%, #fce506 80%, #97e489 80%, #97e489 80%, #97e489 100%);
  background: -webkit-linear-gradient(left, #ff9c01 0%, #ff9c01 20%, #fce506 20%, #fce506 20%, #fce506 80%, #97e489 80%, #fce506 80%, #97e489 80%, #97e489 80%, #97e489 100%);
  background: linear-gradient(to right, #ff9c01 0%, #ff9c01 20%, #fce506 20%, #fce506 20%, #fce506 80%, #97e489 80%, #fce506 80%, #97e489 80%, #97e489 80%, #97e489 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c01', endColorstr='#97e489',GradientType=1 );
  border-radius: 25px;
  border: 0px solid #000101; }

input[type=range].gradient-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ff9c01;
  background: -moz-linear-gradient(left, #ff9c01 0%, #ff9c01 20%, #fce506 20%, #fce506 20%, #fce506 80%, #97e489 80%, #fce506 80%, #97e489 80%, #97e489 80%, #97e489 100%);
  background: -webkit-linear-gradient(left, #ff9c01 0%, #ff9c01 20%, #fce506 20%, #fce506 20%, #fce506 80%, #97e489 80%, #fce506 80%, #97e489 80%, #97e489 80%, #97e489 100%);
  background: linear-gradient(to right, #ff9c01 0%, #ff9c01 20%, #fce506 20%, #fce506 20%, #fce506 80%, #97e489 80%, #fce506 80%, #97e489 80%, #97e489 80%, #97e489 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c01', endColorstr='#97e489',GradientType=1 );
  border-radius: 25px;
  border: 0px solid #000101; }

input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; }

input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; }

input[type=range]::-ms-thumb {
  box-shadow: none;
  border: 0px solid #000000;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background: #88d8bd;
  cursor: pointer; }

input[type=range]:focus::-ms-fill-lower {
  background: #e1e2e7; }

input[type=range]:focus::-ms-fill-upper {
  background: #e1e2e7; }

input[type=text], input[type=password], input[type=email] {
  -webkit-appearance: none; }

.input-error {
  border-color: #dc7054; }

.signup__errors {
  display: none;
  color: #dc7054;
  margin-bottom: 8px; }

.signup__errors ul {
  margin-top: 0;
  padding-left: 16px;
  font-size: 12px; }

.signup__errors--is-active {
  display: block; }

.exercise,
.exercise-overview,
.exercise-welcome,
.exercise-final {
  flex-direction: column;
  display: flex;
  min-height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }
  @media (min-width: 600px) {
    .exercise,
    .exercise-overview,
    .exercise-welcome,
    .exercise-final {
      height: auto;
      position: relative;
      display: block; } }

.exercise-welcome,
.exercise-final {
  padding-top: 40px; }
  @media (min-width: 600px) {
    .exercise-welcome,
    .exercise-final {
      padding-top: 0; } }

.exercise__info {
  padding: 24px 0; }

.exercise__description {
  line-height: 22px; }

.exercise__headline,
.login__headline {
  font-weight: bold;
  line-height: 22px;
  margin-bottom: 16px; }

.exercise__next,
.exercise__skip,
.exercise__feedback {
  height: 30px;
  box-shadow: none;
  border: none;
  color: white;
  background-color: #03238d;
  border: 1px solid #03238d;
  width: 100%;
  border-radius: 3px;
  text-transform: uppercase;
  margin-top: 24px;
  font-weight: bold;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  cursor: pointer; }

.password_reset__submit {
  font-size: 13px; }

.feedback__textarea {
  width: 100%;
  height: 100px; }

.password_reset__submit,
.do_password_reset__submit {
  margin-top: 0; }

.login__reset {
  margin-top: 16px;
  font-size: 12px;
  text-align: center; }

.login__reset a {
  color: #8C9897; }

.exercise__skip {
  background-color: white;
  color: #03238d; }

.exercise__skip--hide {
  display: none; }

.exercise__next--show {
  display: inline-block; }

.login {
  width: 100%;
  max-width: 400px;
  display: block;
  background-color: white;
  padding: 24px;
  border-radius: 3px;
  margin: 0 auto; }

.login__submit {
  margin-top: 0; }

.login label {
  margin-bottom: 8px;
  font-size: .85rem;
  font-weight: bold;
  display: block;
  color: #03238d;
  text-transform: uppercase; }

.login input {
  margin-bottom: 16px;
  height: 40px;
  border: 1px solid #8C9897;
  width: 100%;
  border-radius: 3px;
  padding: 10px; }

.login .alert {
  color: #dc7054;
  font-size: 12px;
  margin-bottom: 8px; }

.login .alert .close {
  display: none; }

.exercise-final__header {
  background: #88d8bd url("/static/img/welcome-header.jpg") no-repeat center center;
  background-size: cover;
  color: white;
  height: 150px;
  flex-grow: 1;
  position: relative; }
  @media (max-width: 340px) {
    .exercise-final__header {
      height: 110px; } }
  @media (min-width: 600px) {
    .exercise-final__header {
      height: auto;
      background-image: none;
      background-color: white;
      color: #03238d; } }
  .exercise-final__header .exercise-final__header-icon {
    position: absolute;
    right: 15px;
    bottom: 15px; }
    @media (min-width: 600px) {
      .exercise-final__header .exercise-final__header-icon {
        position: relative;
        margin-top: 30px;
        bottom: inherit;
        right: inherit; } }
    .exercise-final__header .exercise-final__header-icon svg {
      width: 39px;
      fill: white; }
      @media (min-width: 600px) {
        .exercise-final__header .exercise-final__header-icon svg {
          width: 80px;
          fill: #88d8bd; } }

.exercise-feedback__header {
  margin-bottom: 16px;
  background: #88d8bd url("/static/img/bg-light.jpg") no-repeat top right;
  background-size: cover;
  color: white;
  height: 150px; }
  @media (min-width: 600px) {
    .exercise-feedback__header {
      height: auto;
      background-image: none;
      background-color: white;
      color: #03238d; } }

.exercise-feedback__header,
.exercise-final__header {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 15px;
  flex-direction: column; }

@media (min-width: 600px) {
  .exercise-final__header {
    text-align: center; } }

.exercise-overview__header {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; }
  @media (min-width: 600px) {
    .exercise-overview__header {
      margin-top: 0;
      display: block; } }

.exercise-welcome__header {
  margin-bottom: 16px;
  background: #88d8bd url("/static/img/welcome-header.jpg") no-repeat center center;
  background-size: cover;
  color: white;
  justify-content: flex-end;
  padding-bottom: 15px;
  flex-direction: column;
  flex-grow: 1;
  display: flex; }
  @media (min-width: 600px) {
    .exercise-welcome__header {
      margin-top: 0px;
      height: auto;
      background-image: none;
      background-color: white;
      color: #03238d; } }

.exercise-detail__body {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  background: white; }

.exercise-detail__header {
  margin-bottom: 16px;
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column; }
  @media (min-width: 600px) {
    .exercise-detail__header {
      margin-top: 0;
      background-image: none;
      background-color: inherit;
      color: #8C9897;
      text-align: center; } }

.exercise-overview__exercise {
  background: white;
  display: block;
  clear: both;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e1e2e7;
  padding: 15px 0px; }
  @media (min-width: 600px) {
    .exercise-overview__exercise {
      align-items: center;
      padding-bottom: 15px; } }
  .exercise-overview__exercise.exercise-overview__exercise--active {
    cursor: pointer; }

.login__separator {
  width: 100%;
  border-top: 1px solid #8C9897;
  margin-top: 36px;
  text-align: center; }

.login__text {
  letter-spacing: 0.5px;
  margin: 20px 0;
  font-size: 12px;
  text-align: center; }

.gender-icon {
  display: block;
  margin: 7px auto; }

.gender-icon g {
  fill: #8C9897; }

.gender-split--active .gender-icon g {
  fill: white; }

.login__separator__text {
  position: relative;
  top: -10px;
  background-color: white;
  display: inline;
  text-transform: uppercase;
  color: #03238d;
  padding: 10px;
  font-size: .85rem;
  font-weight: 600; }

.exercise-overview__exercise-image {
  width: 40%;
  float: left;
  margin-right: 16px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-radius: 3px; }
  .exercise-overview__exercise-image:before {
    content: ' ';
    padding-top: 80%;
    position: relative;
    width: 100%;
    display: block; }
    @media (max-height: 600px) {
      .exercise-overview__exercise-image:before {
        padding-top: 60%; } }
    @media (min-width: 600px) {
      .exercise-overview__exercise-image:before {
        display: none; } }
  .exercise-overview__exercise-image img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    display: block;
    height: 100%;
    object-fit: cover; }
    @media (min-width: 600px) {
      .exercise-overview__exercise-image img {
        object-fit: normal;
        position: relative; } }
  .exercise-overview__exercise-image .exercise-overview__exercise-done, .exercise-overview__exercise-image .exercise-overview__exercise-play, .exercise-overview__exercise-image .exercise-overview__exercise-skipped {
    position: absolute;
    display: none;
    width: 100%;
    z-index: 1;
    height: 100%;
    left: 0;
    top: 0; }
    .exercise-overview__exercise-image .exercise-overview__exercise-done img, .exercise-overview__exercise-image .exercise-overview__exercise-play img, .exercise-overview__exercise-image .exercise-overview__exercise-skipped img {
      width: 26px;
      height: 26px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%); }
  .exercise-overview__exercise-image .exercise-overview__exercise-done, .exercise-overview__exercise-image .exercise-overview__exercise-skipped {
    background: linear-gradient(to right, rgba(62, 100, 171, 0.75) 0%, rgba(139, 202, 186, 0.76) 100%); }
  @media (min-width: 600px) {
    .exercise-overview__exercise-image {
      width: 20%;
      max-width: 200px;
      height: auto; } }
  .exercise-overview__exercise-image img {
    max-width: 100%;
    max-height: 100%; }

.exercise-overview__exercise--active .exercise-overview__exercise-play {
  display: block; }

.exercise-overview__exercise--done .exercise-overview__exercise-done {
  display: block; }

.exercise-overview__exercise--skipped .exercise-overview__exercise-skipped {
  display: block; }

.exercise__position {
  padding: 0 15px;
  font-size: 14px;
  padding-top: 20px;
  text-transform: uppercase; }

.exercise-overview__exercise__title,
.exercise__headline {
  color: #03238d;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-bottom: 4px; }

.exercise-overview__exercise__title-cat {
  color: #88d8bd;
  font-size: .85rem; }

.exercise-overview__exercise__description {
  color: #88d8bd;
  letter-spacing: 0.5px;
  font-size: 12px;
  margin-bottom: 10px; }

.exercise-overview__exercise__devices {
  font-size: 12px;
  letter-spacing: 0.5px; }

.exercise-overview__description,
.exercise-overview__list,
.exercise-overview__button,
.exercise-welcome__button,
.exercise-welcome__headline,
.exercise-final__button,
.exercise-final__headline,
.exercise-welcome__description,
.exercise-final__description,
.exercise__info,
.exercise-feedback__title,
.exercise-welcome__body,
.exercise-final__body,
.exercise-initial,
.contact_form,
.questionnaire__description,
.feedback {
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
  padding: 0 15px; }

.exercise__headline,
.exercise__description,
.exercise__video,
.exercise__sportstype {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  padding: 0 15px; }
  @media (min-width: 600px) {
    .exercise__headline,
    .exercise__description,
    .exercise__video,
    .exercise__sportstype {
      padding: 0 50px; } }

.exercise__sportstype {
  font-size: 12px;
  text-align: center; }
  .exercise__sportstype div {
    display: inline-block; }
  .exercise__sportstype span {
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 5px;
    font-weight: bold; }

.exercise__headline {
  padding-top: 10px !important; }

.exercise-feedback__body {
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
  padding: 0 15px; }
  @media (min-width: 600px) {
    .exercise-feedback__body {
      max-width: 1060px;
      padding: 0 50px;
      display: flex;
      align-items: stretch; }
      .exercise-feedback__body > div {
        padding: 0 15px;
        flex-shrink: 0;
        width: 33.333333%; } }

@media (min-width: 600px) {
  .exercise-welcome__button,
  .exercise-welcome__headline,
  .exercise-welcome__description,
  .exercise-welcome__body,
  .exercise-overview__description,
  .exercise-overview__button,
  .exercise-overview__list {
    padding: 0 50px;
    margin: 0; } }

@media (min-width: 600px) {
  .exercise-welcome__body,
  .exercise-overview__list,
  .exercise-welcome__description,
  .exercise-welcome__title {
    max-width: inherit; } }

.exercise__info,
.exercise-overview__button,
.exercise-welcome__button,
.exercise-final__button {
  padding-bottom: 15px; }
  @media (min-width: 600px) {
    .exercise__info,
    .exercise-overview__button,
    .exercise-welcome__button,
    .exercise-final__button {
      margin-top: 30px; } }

.exercise-final__body {
  text-align: center;
  padding-bottom: 50px;
  padding-left: 0;
  padding-right: 0; }
  @media (max-width: 340px) {
    .exercise-final__body {
      padding-bottom: 15px; } }
  @media (min-width: 600px) {
    .exercise-final__body {
      display: flex;
      flex-direction: column;
      padding-bottom: 0px; }
      .exercise-final__body .exercise-final__stats {
        order: 1;
        margin-bottom: 15px; }
      .exercise-final__body .exercise-final__headline {
        order: 0;
        margin-bottom: 15px; }
      .exercise-final__body .exercise-final__description {
        order: 2; } }

.exercise__video {
  margin-bottom: 50px; }
  .exercise__video div {
    position: relative;
    width: 100%;
    padding-top: 58%; }
    .exercise__video div iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }

.exercise-initial {
  margin-top: 20px;
  margin-bottom: 30px; }

.exercise-initial .exercise-feedback__element {
  border-bottom: none; }

.exercise-initial .exercise-feedback__submit {
  margin-top: 30px; }

.exercise-feedback__exercise .exercise-feedback__exercise-info {
  margin-bottom: 15px; }

.exercise-feedback__exercise .exercise-feedback__exercise-image img {
  width: 100%;
  border-radius: 3px; }

.exercise-overview__title {
  font-weight: bold;
  font-size: 22px;
  color: #03238d; }
  @media (min-width: 600px) {
    .exercise-overview__title {
      padding-top: 10px;
      margin-bottom: 15px; } }

.exercise__headline,
.exercise-feedback__title,
.exercise-welcome__headline,
.exercise-final__headline,
.contact_form__headline {
  font-weight: bold;
  font-size: 22px;
  padding-top: 20px;
  line-height: 30px; }
  @media (min-width: 600px) {
    .exercise__headline,
    .exercise-feedback__title,
    .exercise-welcome__headline,
    .exercise-final__headline,
    .contact_form__headline {
      color: #03238d; } }

.exercise-final__headline {
  color: #03238d; }

.contact_form__headline {
  color: #03238d; }

.exercise-final__description,
.exercise-welcome__description,
.exercise__description {
  letter-spacing: 0.5px; }

@media (min-width: 600px) {
  .exercise-final__description,
  .exercise-welcome__description {
    color: #8C9897; } }

.exercise-feedback {
  display: none; }

.exercise-feedback__general-slider {
  width: 100%;
  margin: 0 auto; }

.exercise-feedback__element {
  border-bottom: 1px solid #e1e2e7;
  padding-bottom: 15px;
  margin-bottom: 15px;
  padding: 15px 0; }
  @media (min-width: 600px) {
    .exercise-feedback__element {
      display: flex;
      flex-direction: column;
      border-bottom: 0; } }

@media (min-width: 600px) {
  .exercise-feedback__slider {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; } }

.exercise-feedback__element .exercise-overview__exercise {
  border-bottom: none;
  margin-bottom: 8px; }

.exercise-feedback__question {
  margin-bottom: 10px;
  margin-top: 15px;
  font-size: .85rem;
  font-weight: bold;
  color: #03238d; }

.exercise-feedback__submit {
  margin-top: 30px;
  margin-bottom: 15px;
  padding: 0 15px; }

.exercise-welcome__body h3 {
  color: #03238d; }

.color-secondary {
  color: #03238d; }

.color-primary {
  color: #88d8bd; }

.exercise-final__circle {
  width: 125px;
  height: 125px;
  margin: 20px auto;
  position: relative; }
  .exercise-final__circle .exercise-final__circle-num {
    text-align: center;
    font-size: 38px;
    font-weight: bold; }
  .exercise-final__circle .exercise-final__circle-text {
    font-size: 13px;
    text-align: center;
    color: #8C9897; }

.feedback {
  font-size: 12px;
  margin-top: 80px;
  line-height: 1.5;
  text-align: center; }
  .feedback a {
    color: #8C9897; }

.contact_form__button {
  margin-top: 20px; }

.contact_form__errors {
  color: #dc7054;
  font-size: 13px; }

.contact_form__message {
  display: none;
  text-align: center; }

.select {
  position: relative;
  height: 40px;
  background: white; }
  .select:after {
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    right: 10px;
    bottom: 0;
    margin: auto;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #8C9897 transparent transparent transparent;
    pointer-events: none; }
  .select:before {
    width: 30px;
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    background: none;
    content: '';
    pointer-events: none; }
  .select:hover:before {
    background: none; }
  .select select {
    font-size: .85rem;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    height: 100%;
    width: 100%;
    cursor: pointer;
    outline: none;
    padding-right: 35px;
    padding-left: 15px;
    border: 1px solid #8C9897;
    border-radius: 3px;
    -moz-appearance: none;
    -webkit-appearance: none; }
    .select select:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 #000; }
    .select select::-ms-expand {
      display: none; }
    .select select:focus {
      border-color: #88d8bd; }

@media all and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
  .select select {
    padding-right: 0; }
  .select:after, .select:before {
    display: none; } }

.bodyparts {
  margin: 0 auto;
  padding: 0 0;
  background-color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  user-select: none;
  cursor: default; }
  @media (min-width: 600px) {
    .bodyparts {
      position: relative; } }

svg.body path {
  fill: red;
  fill-opacity: 0;
  stroke: #6f6f6f;
  stroke-opacity: 0.4;
  cursor: pointer;
  transition: .3s ease all; }
  svg.body path.js-bodypart {
    stroke: red;
    stroke-opacity: 0.6;
    stroke-width: 2px; }
  @media (min-width: 600px) {
    svg.body path.js-bodypart:hover {
      fill-opacity: 0.1; } }
  svg.body path.js-bodypart.active {
    fill-opacity: 0.5; }
  svg.body path.js-bodypart.active--2 {
    fill: #91f67f;
    fill-opacity: 0.7; }
  svg.body path.js-bodypart.active--4 {
    fill: #efff48;
    fill-opacity: 0.7; }
  svg.body path.js-bodypart.active--6 {
    fill: #fcc906;
    fill-opacity: 0.7; }
  svg.body path.js-bodypart.active--8 {
    fill: #f89713;
    fill-opacity: 0.7; }
  svg.body path.js-bodypart.active--10 {
    fill: #ea390d;
    fill-opacity: 0.7; }

.bodyparts.bodyparts--inactive {
  display: none; }

.bodyparts svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 10px;
  padding-top: 5px; }
  @media (min-width: 600px) {
    .bodyparts svg {
      position: relative;
      padding-top: 0;
      height: calc(100vh - 330px); } }

.go_bck, .go_frt {
  fill: #72B8FC;
  opacity: 0.7;
  transition: fill 0.1s ease;
  cursor: pointer; }

.go_bck:hover, .go_frt:hover {
  opacity: 1; }

#organs-tip {
  display: none;
  padding: 5px;
  border: 1px solid #404040;
  color: #404040;
  z-index: 1000;
  float: left;
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  word-break: keep-all;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); }

#organs-tip p {
  margin: 0 !important;
    margin-color: #404040 !important; }

#organs-tip img {
  float: left;
  padding: 3px; }

@media screen and (min-width: 768px) {
  .bodyparts svg {
    height: calc(100vh - 325px); } }

.questionnaire__slide--body {
  position: relative; }

.questionnaire__slide--body .questionnaire__button {
  opacity: 0.3; }
  @media (min-width: 600px) {
    .questionnaire__slide--body .questionnaire__button {
      margin-top: 0; } }

.questionnaire__slide--sport .questionnaire__button {
  opacity: 0.3; }

.questionnaire__slide--sport-active .questionnaire__button {
  opacity: 1;
  visibility: inherit; }

.questionnaire__question--pain, .questionnaire__question--pain-again, .questionnaire__question--nopain {
  display: none; }

.questionnaire__slide--nopain .questionnaire__question--pain {
  display: none; }

.questionnaire__slide--nopain .questionnaire__question--nopain {
  display: block; }

.questionnaire__slide--nopain .questionnaire__question--pain-again {
  display: none; }

.questionnaire__slide--pain .questionnaire__question--pain {
  display: block; }

.questionnaire__slide--pain .questionnaire__question--nopain {
  display: none; }

.questionnaire__slide--pain .questionnaire__question--pain-again {
  display: none; }

.questionnaire__slide--pain.questionnaire__slide--pain-again .questionnaire__question--pain {
  display: none; }

.questionnaire__slide--pain.questionnaire__slide--pain-again .questionnaire__question--nopain {
  display: none; }

.questionnaire__slide--pain.questionnaire__slide--pain-again .questionnaire__question--pain-again {
  display: block; }

.questionnaire__description {
  text-align: center;
  padding: 0px 15px; }
  .questionnaire__description .questionnaire__question {
    margin-bottom: 0; }

.questionnaire__slide--body-active .questionnaire__button {
  opacity: 1;
  visibility: inherit; }

.questionnaire__back, .weekly-question__back {
  position: absolute;
  background: white;
  padding: 9px;
  text-align: center;
  cursor: pointer;
  color: black;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  bottom: 15px;
  right: 15px;
  z-index: 10; }
  .questionnaire__back span, .weekly-question__back span {
    display: block;
    text-transform: uppercase;
    color: black;
    font-size: 10px;
    line-height: 10px; }

.questionnaire__modal {
  position: absolute;
  display: none;
  opacity: 0;
  top: 50%;
  z-index: 11;
  left: 50%;
  width: calc(100% - 30px);
  max-width: 370px;
  transform: translate3d(-50%, -30%, 0);
  background: white;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  transition: .3s ease all; }
  .questionnaire__modal.questionnaire__modal--active {
    display: block; }
  .questionnaire__modal.questionnaire__modal--visible {
    transform: translate3d(-50%, -50%, 0);
    opacity: 1; }
  .questionnaire__modal.questionnaire__modal--edit .questionnaire__modal__buttons .js-button__modal-delete {
    display: block; }
  .questionnaire__modal .questionnaire__modal__buttons {
    padding-top: 15px;
    display: flex; }
    .questionnaire__modal .questionnaire__modal__buttons .js-button__modal-delete {
      display: none; }
    .questionnaire__modal .questionnaire__modal__buttons .button {
      border-radius: 0 !important;
      outline: none !important; }

.button-list {
  padding: 0;
  margin: 0;
  list-style: none; }
  .button-list .button-list__item {
    display: inline-block;
    border: 1px solid #f0f0f3;
    border-radius: 3px;
    padding: 5px 10px;
    margin-right: 5px;
    color: black;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    margin-top: 10px; }
    .button-list .button-list__item.button-list__item--active {
      background: #e6e9f8;
      border: 1px solid #e6e9f8;
      color: #6e758f; }

.button-list--toggle .button-list__item {
  padding-right: 22px; }

.button-list--toggle .button-list__item:after {
  content: 'X';
  position: absolute;
  right: 5px; }

.bodyparts__indicators {
  position: absolute;
  top: 58%;
  font-size: 13px;
  letter-spacing: 0.4px;
  background: #f5f5f5;
  padding: 5px 10px;
  border-radius: 5px; }

.bodypars__indicator--right {
  right: 20px; }
  @media (min-width: 600px) {
    .bodypars__indicator--right {
      right: 0px; } }

.bodypars__indicator--left {
  left: 20px; }
  @media (min-width: 600px) {
    .bodypars__indicator--left {
      left: 0px; } }