/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  box-sizing: border-box; }

/* manrope-regular - latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/manrope-v8-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local(""), url("../fonts/manrope-v8-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/manrope-v8-latin-regular.woff2") format("woff2"), url("../fonts/manrope-v8-latin-regular.woff") format("woff"), url("../fonts/manrope-v8-latin-regular.ttf") format("truetype"), url("../fonts/manrope-v8-latin-regular.svg#Manrope") format("svg");
  /* Legacy iOS */ }
body {
  font-family: 'Manrope', sans-serif; }

.hidden {
  opacity: 0 !important;
  animation: unset !important;
  pointer-events: none !important;
  transition: opacity 0.5s linear !important; }

.faded-in {
  opacity: 1;
  transition: opacity 0.5s linear; }

.faded-out {
  opacity: 0;
  transition: opacity 0.5s linear; }

body {
  background: #00a08b; }

a {
  text-decoration: none;
  color: inherit; }
  a:hover {
    text-decoration: underline; }

b {
  font-weight: bold; }

i {
  font-style: italic; }

header {
  position: relative;
  z-index: 10;
  height: 80px;
  background: #fff;
  box-shadow: 0 0px 83px black;
  border-bottom: 1px solid #938a8a;
  display: flex;
  line-height: 30px;
  padding: 0 10px;
  font-size: 12px;
  color: #666666; }
  header > div:last-child {
    margin-left: auto; }
  header img {
    height: 80px;
    margin: 0px;
    line-height: 0; }
  header .exercise-title {
    line-height: 80px;
    font-size: 30px;
    margin-right: 15px;
    letter-spacing: 2px;
    color: #000;
    font-weight: bold; }

main {
  position: relative;
  height: calc(100vh - 80px - 62px);
  background-image: url(../images/b7-bg-pattern.png);
  overflow: hidden; }

footer {
  position: relative;
  z-index: 10;
  height: 62px;
  background: #fff;
  box-shadow: 0 0px 80px #000000cf;
  border-top: 1px solid #938a8a;
  line-height: 30px;
  padding: 0 10px;
  font-size: 12px;
  color: #666666; }
  footer select {
    border: 0;
    color: inherit;
    font-size: inherit;
    outline: none; }
  footer > div {
    display: flex; }
    footer > div > div:first-child {
      display: flex;
      gap: 10px; }
      footer > div > div:first-child > *:after {
        content: '';
        padding-left: 14px;
        border-right: 1px solid #ccc; }
      footer > div > div:first-child > *:last-child:after {
        display: none; }
    footer > div > div:last-child {
      margin-left: auto; }

.session-info {
  display: flex;
  gap: 10px; }
  .session-info > *:after {
    content: '';
    padding-left: 10px;
    border-right: 1px solid #ccc; }
  .session-info > *:last-child:after {
    display: none; }

.session-settings {
  margin-left: -3px; }

#debug-layer {
  pointer-events: none; }
  #debug-layer .right-data-block {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    text-align: right;
    padding: 20px;
    font-size: 12px;
    line-height: 1.3;
    background: #6f6f6f;
    background: linear-gradient(90deg, rgba(111, 111, 111, 0) 80%, rgba(0, 0, 0, 0.8) 100%);
    display: grid;
    grid-template-rows: auto min-content; }
  #debug-layer #chart-wrapper {
    width: 800px;
    max-width: 60%;
    margin: auto;
    position: absolute;
    bottom: 10%;
    left: 0;
    right: 0; }
    #debug-layer #chart-wrapper > div {
      max-height: 100px;
      margin-bottom: 10px; }

#exercise-intro-layer .exercise-name-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; }
  #exercise-intro-layer .exercise-name-wrapper > div > div:nth-child(1) {
    margin-top: 100px;
    font-size: 34px;
    font-weight: bold;
    letter-spacing: 2px; }
  #exercise-intro-layer .exercise-name-wrapper > div > div:nth-child(2) {
    margin-top: 10px;
    font-size: 26px; }
  #exercise-intro-layer .exercise-name-wrapper > div > div:nth-child(3) {
    margin-top: 70px; }

#exercise-overlay-layer .repetitions {
  position: absolute;
  right: 0;
  top: 0;
  margin: 50px 100px;
  display: grid;
  grid-template-areas: "done total" "done label"; }
  #exercise-overlay-layer .repetitions > div:nth-child(1) {
    grid-area: done;
    font-weight: bold;
    font-size: 62px;
    line-height: 62px;
    margin-bottom: -6px;
    margin-right: 7px; }
  #exercise-overlay-layer .repetitions > div:nth-child(2) {
    font-size: 32px;
    line-height: 40px;
    padding-left: 12px; }
    #exercise-overlay-layer .repetitions > div:nth-child(2):before {
      content: '';
      background: #fff;
      position: absolute;
      width: 4px;
      height: 24px;
      margin-top: 9px;
      border-radius: 2px;
      margin-left: -12px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); }
  #exercise-overlay-layer .repetitions > div:nth-child(3) {
    grid-area: label;
    font-size: 15px;
    letter-spacing: 1px; }
#exercise-overlay-layer .pose {
  position: absolute;
  right: 0;
  top: 65px;
  margin: 50px 100px;
  max-width: 170px;
  text-align: center; }
  #exercise-overlay-layer .pose img {
    max-width: 70%; }
    #exercise-overlay-layer .pose img:nth-child(1) {
      filter: grayscale(100%) brightness(99);
      position: absolute;
      z-index: 1; }
    #exercise-overlay-layer .pose img:nth-child(2) {
      filter: grayscale(100%) brightness(0);
      transform: scaleX(1.1) scaleY(1.04);
      opacity: 0.3;
      transform-origin: center; }

#gui-element-layer {
  pointer-events: none; }

#layer-evaluation {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; }
  #layer-evaluation > div > div:nth-child(1) {
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0px 60px 60px 60px; }
  #layer-evaluation > div > div:nth-child(2) {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 20px; }
  #layer-evaluation > div > div:nth-child(3) {
    display: flex;
    justify-content: center;
    gap: 20px; }
    #layer-evaluation > div > div:nth-child(3) > div > div:nth-child(2) {
      margin-top: 10px;
      background: #fff;
      height: 100px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      overflow: hidden;
      border: 2px solid #fff;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto min-content; }
      #layer-evaluation > div > div:nth-child(3) > div > div:nth-child(2) > div:nth-child(1) {
        display: grid;
        align-items: end; }
        #layer-evaluation > div > div:nth-child(3) > div > div:nth-child(2) > div:nth-child(1) div {
          border-top-left-radius: 10px;
          border-top-right-radius: 10px; }
          #layer-evaluation > div > div:nth-child(3) > div > div:nth-child(2) > div:nth-child(1) div.very-good {
            background: #0c9801;
            background: linear-gradient(0deg, #0c9801 0%, #03ff07 100%); }
          #layer-evaluation > div > div:nth-child(3) > div > div:nth-child(2) > div:nth-child(1) div.good {
            background: #986401;
            background: linear-gradient(0deg, #986401 0%, #ffa803 100%); }
          #layer-evaluation > div > div:nth-child(3) > div > div:nth-child(2) > div:nth-child(1) div.ok {
            background: #980101;
            background: linear-gradient(0deg, #980101 0%, #ff2003 100%); }
      #layer-evaluation > div > div:nth-child(3) > div > div:nth-child(2) > div:nth-child(2) {
        font-size: 12px;
        padding: 5px 10px;
        color: #000; }

#preloader-layer {
  background-repeat: no-repeat;
  background-position: center center;
  pointer-events: none; }

.button {
  border: 1px solid #fff;
  display: inline-block;
  padding: 10px 30px;
  text-transform: uppercase;
  transition: background 0.5s;
  cursor: pointer; }
  .button:hover {
    background: #ffffff38; }

.layer-manager {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); }
  .layer-manager .layer {
    opacity: 1;
    transition: opacity .5s;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99; }
    .layer-manager .layer.inactive {
      opacity: 0; }

.linear-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  text-align: center; }
  .linear-progress > div {
    display: block;
    height: 100px;
    width: 500px;
    position: relative;
    margin-bottom: 20%; }
    .linear-progress > div .linear-progress-bar {
      background: #ffffffcf;
      height: 10px;
      margin-bottom: 5px; }
    .linear-progress > div .linear-progress-message {
      display: flex;
      background: #ffffff61;
      padding: 15px;
      min-width: 500px; }
      .linear-progress > div .linear-progress-message > div {
        font-size: 35px;
        line-height: 26px;
        padding-bottom: 3px; }
        .linear-progress > div .linear-progress-message > div:nth-child(1) {
          font-weight: bold;
          letter-spacing: 3px;
          text-transform: uppercase; }
        .linear-progress > div .linear-progress-message > div:nth-child(2) {
          margin-left: auto; }

.overlay-wrapper .webcam-overlay {
  background: #00a08b;
  background-image: url(../images/b7-bg-pattern.png);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  opacity: 1;
  transition: opacity 2s; }
  .overlay-wrapper .webcam-overlay.preview {
    opacity: 0.8; }
  .overlay-wrapper .webcam-overlay.inactive {
    opacity: 0; }
  .overlay-wrapper .webcam-overlay.test {
    opacity: 0 !important; }

.pose-overlay, .pose-underlay {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0; }
  .pose-overlay > *, .pose-underlay > * {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: transparent center center no-repeat;
    background-size: contain;
    opacity: 0;
    transition: opacity .8s; }

.pose-underlay > * {
  filter: grayscale(100%) brightness(99); }
  .pose-underlay > *.active {
    opacity: 1; }

.pose-overlay {
  transition: opacity .8s, filter .5s; }
  .pose-overlay > *.active {
    opacity: 0.8; }
  .pose-overlay.match {
    filter: grayscale(50%) sepia(200%) hue-rotate(90deg) saturate(1.5); }
  .pose-overlay.pulse {
    animation: pose-overlay-pulse 2s infinite; }

@keyframes pose-overlay-pulse {
  0% {
    opacity: 0.4; }
  50% {
    opacity: 0.9; }
  100% {
    opacity: 0.4; } }
.radial-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; }
  .radial-progress > div {
    display: block;
    height: 300px;
    width: 300px;
    border-radius: 100%;
    position: relative; }
    .radial-progress > div svg {
      transform: rotate(-90deg);
      filter: drop-shadow(0px 0px 10px #00000066); }
      .radial-progress > div svg circle {
        stroke-dashoffset: 0;
        stroke: transparent;
        stroke-width: 15px; }
      .radial-progress > div svg #bar {
        stroke: #ffffffcf; }
    .radial-progress > div .radial-progress-message {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      flex-direction: column;
      border-radius: 100%;
      background: #ffffff61;
      margin: 25px; }
      .radial-progress > div .radial-progress-message > div:nth-child(1) {
        margin-top: -6px;
        font-size: 75px;
        line-height: 85px; }
      .radial-progress > div .radial-progress-message > div:nth-child(2) {
        font-weight: bold;
        letter-spacing: 3px;
        text-transform: uppercase;
        font-size: 25px; }

.trainer-chat-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  height: 100%;
  min-width: 450px;
  max-width: 600px;
  padding: 50px 100px 50px 50px;
  width: 25vw;
  background: #000000;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%); }
  .trainer-chat-wrapper .trainer-wrapper {
    text-align: center; }
    .trainer-chat-wrapper .trainer-wrapper > div:nth-child(1) img {
      border-radius: 50%;
      background: #fff;
      width: 128px;
      box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.5); }
    .trainer-chat-wrapper .trainer-wrapper > div:nth-child(2) {
      margin-top: 12px;
      font-size: 80%; }
    .trainer-chat-wrapper .trainer-wrapper > div:nth-child(3) {
      font-weight: bold;
      font-size: 30px;
      line-height: 40px; }
  .trainer-chat-wrapper .chat-wrapper {
    text-align: center;
    text-shadow: none;
    display: grid; }
    .trainer-chat-wrapper .chat-wrapper .chat-message > div {
      display: inline-block;
      color: #222;
      background: #fff;
      padding: 10px 15px;
      line-height: 1.3;
      margin-bottom: 10px;
      border-radius: 3px;
      font-size: 14px;
      max-width: 400px;
      position: relative;
      box-shadow: 1px 10px 29px rgba(0, 0, 0, 0.5); }
    .trainer-chat-wrapper .chat-wrapper .chat-message:first-child {
      margin-top: 10px; }
      .trainer-chat-wrapper .chat-wrapper .chat-message:first-child > div:before {
        content: '';
        background: #fff;
        width: 14px;
        height: 14px;
        position: absolute;
        margin-left: calc(50% - 20px);
        margin-top: -15px;
        display: block;
        transform: rotate(45deg);
        transform-origin: center; }
    .trainer-chat-wrapper .chat-wrapper .chat-message img {
      max-width: 100%; }

.webcam-wrapper {
  height: 100%;
  width: 100%;
  position: relative; }
  .webcam-wrapper #webcam-canvas-wrapper {
    min-height: 100%;
    min-width: 100%;
    position: relative; }
    .webcam-wrapper #webcam-canvas-wrapper > * {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0; }
    .webcam-wrapper #webcam-canvas-wrapper.estimation > *:nth-child(2) {
      background: rgba(0, 0, 0, 0.5); }
      .webcam-wrapper #webcam-canvas-wrapper.estimation > *:nth-child(2) > * {
        display: none; }
    .webcam-wrapper #webcam-canvas-wrapper.person > *:nth-child(1) {
      display: none; }
    .webcam-wrapper #webcam-canvas-wrapper.bg_person > *:nth-child(2) {
      background: rgba(0, 0, 0, 0.5); }

/*# sourceMappingURL=main.css.map */