@charset "UTF-8";
:root {
  --primary-color: #fff;
  --secondary-color: #fff;
  --white: #FFFFFF;
  --bg: #171b24;
  --fg: #ffffff;
  --primary-yellow: #dcff02;
  --primary-yellow-dark: #a3bd00;
  --dark-gray: #252525;
  --dark-gray-alternative: #1c1c1e;
  --blue: #00ADB5;
  /* --font: 'Alexandria', sans-serif;   */
  /*    --font: 'Bradesco Sans', sans-serif;*/
  --c2-bg: #22262E;
  --c2-primary: #272B35;
  --c2-primary-2: #4C5367;
  --c2-orange: #ff5a2f;
  --c2-red: #ff3f4c;
  --c2-white: #F8F7FC;
  --c2-white-2: #d6d9df;
  --c2-white-3: #777E90;
  /*    --font: 'Raleway', sans-serif;*/
  --font: "Alexandria", sans-serif;
  --c2-btn-radius: .75rem;
  --c2-input-radius: .75rem;
  --safe-bottom-area: 34px;
  --safe-top-area: 47px;
  --tab-height: 49px;
  --header-height: 25vh;
  --header-sticky-height: 91px;
  --padding-w: 0.625rem;
  --c2-font-1: "Barlow";
  --c2-font-2: "Manrope";
  --c2-success: #8BC34A;
  --c2-danger: #F44336;
  --fa: "Font Awesome 6 Pro";
}

.fade-in.lazyload {
  opacity: 1;
}
.fade-in.lazyloading {
  opacity: 0;
}
.fade-in.lazyloaded {
  opacity: 1;
  transition: opacity ease 500ms;
}

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

img {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  touch-action: none !important;
}

/*
.lazyload,
.lazyloading {
    opacity: 0;
}

.lazyloaded {
    opacity: 1;
    transition: opacity 300ms;
}


.fade-box .lazyload,
.fade-box .lazyloading {
    opacity: 0;
    transition: opacity 400ms;
}

.fade-box img.lazyloaded {
    opacity: 1;
}

.blur-up {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    transition: filter 400ms, -webkit-filter 400ms;

    .lazyloaded {
        -webkit-filter: blur(0);
        filter: blur(0);
    }
}


    */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-size: 16px;
}

body {
  background-color: var(--c2-bg);
  color: var(--fg);
  font-family: var(--font);
}

.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
  background: var(--c2-bg);
}

div#swal2-html-container {
  text-align: center;
  color: var(--c2-white-3);
}

.swal2-styled.swal2-confirm, .swal2-styled.swal2-deny {
  height: 50px;
  background: var(--primary-yellow);
  border-radius: 25px;
  padding: 0 1.5rem;
  min-width: 30vw;
}

.swal2-styled.swal2-confirm {
  color: var(--c2-bg);
}

.swal2-styled.swal2-deny {
  background: var(--c2-red);
}

.swal2-actions {
  margin-top: 3rem;
}

.swal2-icon.swal2-question.swal2-icon-show {
  margin-bottom: 3rem;
}

h2#swal2-title {
  font-size: 1.5rem;
}

main.home {
  display: flex;
  flex-flow: row nowrap;
  width: 100vw;
  overflow-x: hidden;
  position: relative;
  height: 100vh;
  transition: transform ease-in-out 0.2s;
}
main.home .transition-1 {
  width: 100vw;
  height: 100vh;
  transition: transform ease-in-out 0.2s;
  flex-shrink: 0;
  position: absolute;
  left: 0;
  top: 0;
}
main.home .transition-2 {
  width: 100vw;
  height: 200vh;
  transition: transform ease-in-out 0.2s;
  transform: translateX(100%);
  flex-shrink: 0;
  position: absolute;
  left: 0;
  top: 0;
}
main.home.translate .transition-1 {
  transform: translateX(-100%);
}
main.home.translate .transition-2 {
  transform: translateX(0);
}

/* Button */
.bk-button {
  border: none;
  outline: none;
  height: 3.5rem;
  padding: 0 3rem;
  background-color: var(--primary-yellow);
  color: var(--dark-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: var(--c2-btn-radius);
}
.bk-button.bk-block {
  width: 100%;
}

a.bk-link {
  color: var(--primary-yellow);
  text-decoration: none;
  font-weight: bold;
}

input, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  font-size: 0.9rem;
  font-weight: bold;
}

/* Form */
.form {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
  row-gap: 1rem;
}
.form .button-group {
  margin-top: 1.5rem;
}
.form .form-group .input input {
  border: none;
  outline: none;
  background: var(--c2-primary);
  color: #eee;
  height: 3.5rem;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  transition: border ease-in-out 0.2s;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: var(--c2-input-radius);
}
.form .form-group .input input:focus {
  box-shadow: none;
  outline: none;
  border-bottom-color: var(--primary-yellow);
}
.form .form-group.iconed .input {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
}
.form .form-group.iconed .input input {
  padding-left: 3rem;
}
.form .form-group.iconed .input i {
  position: absolute;
  display: flex;
  width: 3rem;
  align-items: center;
  justify-content: center;
}

section#UserActivitiesHome {
  padding-top: var(--safe-top-area);
}

section.login-section {
  /* Login */
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
section.login-section .login-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}
section.login-section .login-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
section.login-section .login-bg:after {
  content: "";
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
section.login-section #LoginForm, section.login-section #RegisterForm, section.login-section #ResetForm {
  z-index: 2;
}
section.login-section #LoginForm input, section.login-section #RegisterForm input, section.login-section #ResetForm input {
  background: inherit;
  border: 1px solid var(--white);
}
section.login-section .login {
  width: 100vw;
  position: relative;
  height: 100vh;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 10vh;
  padding-bottom: 50px;
  overflow-x: hidden;
  overflow-y: auto;
}
section.login-section .login .sign-up {
  display: flex;
  justify-content: center;
  margin-top: auto;
  margin-bottom: 0;
}
section.login-section .login .logo {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 10vh;
}
section.login-section .login .logo .logo-container {
  max-width: 35vw;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
section.login-section .login .logo .logo-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
section.login-section #RegisterForm .form.login {
  padding-top: 5vh !important;
}
section.login-section #RegisterForm .form.login .logo {
  margin-bottom: 2.5vh !important;
}
section.login-section #RegisterForm .form.login .logo .logo-container {
  max-height: unset;
  max-width: 100%;
  display: flex;
  overflow: hidden;
  height: 50px;
}
section.login-section #ResetForm h5.title {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.4;
}
section.login-section #ResetForm .reset-pwd a {
  border: 2px solid;
  height: 3.5rem;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: var(--c2-btn-radius);
  background: rgba(0, 0, 0, 0.5);
}

/* Tabs */
aside#Tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--tab-height) + var(--safe-bottom-area));
  background: var(--c2-primary);
  padding-bottom: var(--safe-bottom-area);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 99;
}
aside#Tabs .tabs {
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
  width: 100%;
}
aside#Tabs .tabs .tab {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  flex: 1 1 0%;
  text-decoration: none;
  color: var(--white);
  font-family: var(--c2-font-1);
  gap: 0.25rem;
}
aside#Tabs .tabs .tab span.text {
  font-size: 0.6rem;
}
aside#Tabs .tabs .tab i {
  font-size: 1.2rem;
}
aside#Tabs .tabs .tab.active {
  color: var(--primary-yellow);
  font-weight: 800;
}
aside#Tabs .tabs .tab.active i {
  font-weight: 900;
}

.user-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column nowrap;
  position: relative;
  padding: 0 1.5rem;
  padding-top: 1rem;
  gap: 1rem;
}
.user-content .home-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}
.user-content .home-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.user-content .home-bg:after {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}
.user-content .bk-container {
  padding-bottom: 2rem;
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
}
.user-content .image-container {
  width: 40vw;
  max-width: 220px;
  aspect-ratio: 1;
  background: var(--white);
  border-radius: 100%;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.user-content .image-container.placeholder {
  display: flex;
  padding: 1rem;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
}
.user-content .image-container.placeholder img {
  display: none;
}
.user-content .image-container.placeholder i {
  color: var(--c2-primary);
}
.user-content .image-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.user-content button.sign-out {
  background: var(--c2-red);
  outline: none;
  border: none;
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 1.5rem;
  margin-top: 1rem;
  font-size: 0.85rem;
}
.user-content .title-container {
  display: flex;
  flex-flow: column nowrap;
}
.user-content .title-container .name {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.user-content .title-container .name span.full-name {
  font-size: 1.75rem;
  font-weight: 500;
}
.user-content .title-container .name span.mail {
  opacity: 0.7;
  font-size: 0.85em;
  font-weight: 300;
}
.user-content .title-container .rating {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  color: var(--primary-yellow);
}

section {
  --gap: 1.5rem;
  padding-bottom: calc(var(--tab-height) + var(--safe-bottom-area) + 1.5rem);
}
section .container-title {
  margin-bottom: 1.5rem;
  font-size: 2rem;
  font-weight: bold;
  color: var(--primary-yellow);
  position: sticky;
  top: 0;
  padding-top: var(--safe-top-area);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
section .container-title span {
  font-size: 0.75em;
  color: var(--white);
}
section .bk-card {
  background: var(--c2-primary);
  color: var(--white);
  padding: 1rem 1.5rem;
}
section .bk-card.bk-rounded {
  border-radius: 0.75rem;
  overflow: hidden;
}
section .bk-card.bk-box-shadow {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
section .bk-card.bk-iconed {
  position: relative;
}
section .bk-card.bk-iconed .icon {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  display: flex;
  padding: 1rem;
  font-size: 3rem;
  align-items: center;
  justify-content: center;
}
section .bk-card .content {
  display: flex;
  flex-flow: column nowrap;
}
section .bk-card .content span.title {
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--c2-white-3);
  text-transform: uppercase;
}
section .bk-card .content span.value {
  color: var(--c2-orange);
  font-size: 1.4rem;
}
section .bk-card-group {
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
}
section .header {
  aspect-ratio: 4/3;
  width: 100%;
  display: flex;
  position: relative;
}
section .header.stats {
  position: sticky;
  top: -35vw;
  overflow: hidden;
  z-index: 8;
}
section .header.stats .title {
  font-size: 0.85rem;
  font-weight: normal;
  line-height: 1.2;
}
section .header.stats .title span {
  font-size: 1.5rem;
  color: var(--primary-yellow);
  display: flex;
}
section .header.blog {
  position: sticky;
  top: -35vw;
}
section .header:after {
  background: linear-gradient(to bottom, transparent 0%, #23262c 75%);
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: -1rem;
  right: 0;
  height: 85%;
}
section .header.video {
  z-index: 0;
}
section .header.video:after {
  content: "";
}
section .header .title {
  color: var(--white);
  z-index: 3;
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  right: 1rem;
  padding-top: 1rem;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
}
section .header .cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
section .header .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section .bk-container {
  padding: 0 var(--gap);
}
section .bk-container .article {
  color: var(--c2-white-2);
  padding-top: 0.75rem;
}
section .bk-container .article p {
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.3rem;
  margin-bottom: 2.2rem;
}
section .bk-container .article h2 {
  font-size: 1.25rem;
  color: var(--c2-white);
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
  line-height: 1.75rem;
}
section .bk-container .article a {
  text-decoration: underline;
  color: var(--primary-yellow);
  font-weight: bold;
}
section .bk-container .article img {
  width: 100% !important;
  height: auto;
  border-radius: 0.75rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}
section .bk-container .article ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
section .bk-container .article ul li {
  font-weight: normal;
  font-size: 0.8rem;
  border-left: 4px solid var(--c2-orange);
  padding-left: 1rem;
  background: var(--c2-primary);
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}
section .bk-container .blogs {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--gap);
}
section .bk-container .blogs .blog-item {
  display: flex;
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  color: var(--white);
  text-decoration: none;
  width: 100%;
  aspect-ratio: 342/273;
}
section .bk-container .blogs .blog-item .blog-image-container {
  aspect-ratio: 5/4;
  display: flex;
  min-height: 1px;
  width: 100%;
}
section .bk-container .blogs .blog-item .blog-image-container .blog-image {
  width: 100%;
  height: 100%;
  display: flex;
}
section .bk-container .blogs .blog-item .blog-image-container .blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section .bk-container .blogs .blog-item .bookmark {
  position: absolute;
  right: 1rem;
  top: 1rem;
  background: var(--c2-red);
  color: var(--white);
  aspect-ratio: 1;
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
}
section .bk-container .blogs .blog-item .blog-title-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.5rem;
  height: 70%;
  background: linear-gradient(to bottom, transparent 0%, #000 100%);
  padding-top: var(--gap);
  padding-bottom: var(--gap);
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  gap: 0.25rem;
  align-items: baseline;
}
section .bk-container .blogs .blog-item .blog-title-container h2.blog-title {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 1.25rem;
}
section .bk-container .blogs .blog-item .blog-title-container span.date {
  display: inline-flex;
  background: var(--c2-orange);
  color: var(--white);
  font-weight: normal;
  padding: 0.125rem 0.5rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  border-radius: 1rem;
}
section .bk-container .blogs .blog-item .blog-title-container p.desc {
  font-size: 0.75rem;
  line-height: 1rem;
  max-height: 3rem;
  overflow: hidden;
  margin: 0;
  padding: 0;
  opacity: 0.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.nav-page {
  height: 3rem;
  background: var(--c2-bg);
  align-items: center;
  display: flex;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  position: sticky;
  top: var(--header-sticky-height);
  z-index: 9;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.nav-page.not-horizontal {
  overflow: unset !important;
  white-space: unset !important;
  padding: 0;
}
.nav-page.is-pinned {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.nav-page .nav-item {
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 0;
  background-color: var(--primary-yellow);
  transition: transform ease-in-out 0.3s;
}
.nav-page ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  flex-flow: row nowrap;
  margin: 0;
  padding: 0;
  height: 100%;
}
.nav-page ul li {
  display: flex;
  height: 100%;
  align-items: center;
  font-family: var(--c2-font-1);
}
.nav-page ul li a {
  color: var(--white);
  text-decoration: none;
}
.nav-page ul li.active a {
  color: var(--primary-yellow);
  font-weight: bold;
}

.prg-header {
  display: flex;
  position: sticky;
  min-height: 1px;
  width: 100%;
  height: var(--header-height);
  overflow: hidden;
  align-items: flex-end;
  top: calc((var(--header-height) - var(--header-sticky-height)) * -1);
  padding-top: var(--safe-top-area);
  z-index: 10;
}
.prg-header.shadow {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.prg-header.is-pinned {
  box-shadow: none;
}
.prg-header.is-pinned .container-title {
  font-size: 1.5rem;
}
.prg-header .background {
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.prg-header .background:after {
  background: linear-gradient(to bottom, transparent 0%, #23262c 85%);
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  right: 0;
  height: 65%;
}
.prg-header .background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prg-header.home .background {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: Blur(5px);
  -webkit-backdrop-filter: Blur(5px);
  -moz-backdrop-filter: Blur(5px);
}
.prg-header.home .background img {
  opacity: 0.35;
}
.prg-header .container-title {
  margin-bottom: 0.75rem;
}
.prg-header .title {
  margin: 0;
  width: 100%;
  display: flex;
  padding: 0;
  transition: all ease-in-out 2s;
}

/* Program Detayı */
.prg-details ul.days {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  flex-flow: row nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  margin: 0;
  padding: 0 1.5rem;
}
.prg-details ul.days li.day-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  border-radius: 1rem;
  padding: 0rem 1rem;
}
.prg-details ul.days li.day-item a {
  color: var(--white);
  text-decoration: none;
}
.prg-details ul.days li.day-item.active {
  background: var(--c2-red);
}
.prg-details .swiper-wrapper {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.prg-details .swiper-wrapper .swiper-slide {
  padding: 0 1.5rem;
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
}
.prg-details .swiper-wrapper .training-item {
  display: flex;
  border-radius: 0.75rem;
  background: var(--c2-primary);
  padding: 1rem 1.5rem;
  color: var(--c2-white);
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
}
.prg-details .swiper-wrapper .training-item a.bk-program {
  background: var(--primary-yellow);
  color: var(--c2-primary);
  font-size: 0.85rem;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  gap: 1rem;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
  align-items: center;
  line-height: 1;
}
.prg-details .swiper-wrapper .training-item a.bk-program .text {
  display: inline-flex;
}
.prg-details .swiper-wrapper .training-item .training-container .title:not(:empty) {
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.2rem;
}
.prg-details .swiper-wrapper .training-item .training-container .notes:not(:empty) {
  color: var(--c2-orange);
  font-size: 0.75rem;
  line-height: 1rem;
  display: flex;
  margin-top: 1rem;
  align-items: center;
  gap: 0.5rem;
}
.prg-details .swiper-wrapper .training-item .training-container .notes:not(:empty) i {
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.prg-details .swiper-wrapper .training-item .training-container .desc:not(:empty) {
  color: var(--c2-white-3);
  font-size: 0.7rem;
  line-height: 1rem;
  margin-top: 0.5rem;
}
.prg-details .swiper-wrapper .training-item .training-container .break:not(:empty), .prg-details .swiper-wrapper .training-item .training-container .info:not(:empty), .prg-details .swiper-wrapper .training-item .training-container .time:not(:empty) {
  font-size: 0.8rem;
}
.prg-details .swiper-wrapper .training-item .training-container .break:not(:empty) i, .prg-details .swiper-wrapper .training-item .training-container .info:not(:empty) i, .prg-details .swiper-wrapper .training-item .training-container .time:not(:empty) i {
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-yellow);
}
.prg-details .swiper-wrapper .training-item .training-container .break:not(:empty), .prg-details .swiper-wrapper .training-item .training-container .time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.prg-details .swiper-wrapper .training-item .training-container .info:not(:empty) {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  display: flex;
  flex-flow: column nowrap;
  gap: 0.25rem;
  color: var(--c2-white-2);
}
.prg-details .swiper-wrapper .training-item .training-container .info:not(:empty) .sets, .prg-details .swiper-wrapper .training-item .training-container .info:not(:empty) .service {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.prg-details .swiper-wrapper .training-item .training-container .info:not(:empty) .sets .text, .prg-details .swiper-wrapper .training-item .training-container .info:not(:empty) .service .text {
  line-height: 1rem;
  display: flex;
  align-items: center;
}
.prg-details .swiper-wrapper .training-item .training-container .info:not(:empty) .sets .text span, .prg-details .swiper-wrapper .training-item .training-container .info:not(:empty) .service .text span {
  display: inline-flex;
  font-size: 0.5rem;
  height: 1rem;
  line-height: 1rem;
  padding: 0 0.5rem;
  background: var(--bs-gray-700);
  border-radius: 0.5rem;
  align-items: center;
  margin-left: 0.25rem;
  margin-right: 1rem;
}
.prg-details .swiper-wrapper .training-item.with-image {
  flex-flow: row-reverse nowrap;
  justify-content: space-between;
  align-items: center;
}
.prg-details .swiper-wrapper .training-item.with-image .training-image {
  width: 20vw;
  height: 20vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.prg-details .swiper-wrapper .training-item.with-image .training-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}
.prg-details .swiper-wrapper .training-item.with-image .training-btn-container {
  margin-top: 1rem;
}
.prg-details .swiper-wrapper .training-item.meal-plan {
  padding: 1rem;
  flex-flow: column nowrap;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.prg-details .swiper-wrapper .training-item.meal-plan a.bk-program {
  border-radius: 1rem;
}
.prg-details .swiper-wrapper .training-item.meal-plan .training-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.prg-details .swiper-wrapper .training-item.meal-plan .training-bg:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: var(--c2-primary);
  opacity: 0.9;
}
.prg-details .swiper-wrapper .training-item.meal-plan .training-bg:before {
  content: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  backdrop-filter: Blur(5px);
}
.prg-details .swiper-wrapper .training-item.meal-plan .training-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: Blur(10px);
}
.prg-details .swiper-wrapper .training-item.meal-plan .area-1, .prg-details .swiper-wrapper .training-item.meal-plan .area-2 {
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
  width: 100%;
  z-index: 2;
}
.prg-details .swiper-wrapper .training-item.meal-plan .training-image {
  width: 25vw;
  height: 25vw;
  flex: 0 0 auto;
  /* background: #fff; */
  align-items: center;
  display: flex;
  justify-content: center;
  /* padding: 0.5rem; */
  border-radius: 1rem;
}
.prg-details .swiper-wrapper .training-item.meal-plan .training-image img.contain {
  object-fit: contain;
}
.prg-details .swiper-wrapper .training-item.meal-plan .training-image img.cover {
  object-fit: cover;
  background: #fff;
}
.prg-details .swiper-wrapper .training-item.meal-plan .training-container {
  flex: 1 1 auto;
  width: 100%;
}
.prg-details .swiper-wrapper .training-item.meal-plan .training-container .title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--c2-white-2);
  text-transform: none;
}
.prg-details .swiper-wrapper .training-item.meal-plan .training-container .info {
  color: var(--c2-white-3);
}
.prg-details ul.content {
  display: flex;
  list-style: none;
  flex-flow: column nowrap;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0 var(--padding-w);
  margin-top: 1.5rem;
}
.prg-details ul.content li {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--padding-w);
}
.prg-details ul.content li:not(.active) {
  visibility: hidden;
  z-index: -1;
  display: none;
}
.prg-details ul.content li .active {
  display: flex;
  visibility: visible;
  z-index: 2;
}
.prg-details ul.content .training-item {
  display: flex;
  border-radius: 0.75rem;
  background: var(--c2-primary);
  padding: 1rem 1.5rem;
  color: var(--c2-white);
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
}
.prg-details ul.content .training-item a.bk-program {
  background: var(--primary-yellow);
  color: var(--c2-primary);
  font-size: 0.85rem;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  padding: 0.75rem 1.5rem;
  gap: 1rem;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
  align-items: center;
  line-height: 1;
}
.prg-details ul.content .training-item a.bk-program .text {
  display: inline-flex;
}
.prg-details ul.content .training-item .training-container .title:not(:empty) {
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.2rem;
}
.prg-details ul.content .training-item .training-container .notes:not(:empty) {
  color: var(--c2-orange);
  font-size: 0.75rem;
  line-height: 1rem;
  display: flex;
  margin-top: 1rem;
  align-items: center;
  gap: 0.5rem;
}
.prg-details ul.content .training-item .training-container .notes:not(:empty) i {
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.prg-details ul.content .training-item .training-container .desc:not(:empty) {
  color: var(--c2-white-3);
  font-size: 0.7rem;
  line-height: 1rem;
  margin-top: 0.5rem;
}
.prg-details ul.content .training-item .training-container .break:not(:empty), .prg-details ul.content .training-item .training-container .info:not(:empty), .prg-details ul.content .training-item .training-container .time:not(:empty) {
  font-size: 0.8rem;
}
.prg-details ul.content .training-item .training-container .break:not(:empty) i, .prg-details ul.content .training-item .training-container .info:not(:empty) i, .prg-details ul.content .training-item .training-container .time:not(:empty) i {
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-yellow);
}
.prg-details ul.content .training-item .training-container .break:not(:empty), .prg-details ul.content .training-item .training-container .time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.prg-details ul.content .training-item .training-container .info:not(:empty) {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  display: flex;
  flex-flow: column nowrap;
  gap: 0.25rem;
  color: var(--c2-white-2);
}
.prg-details ul.content .training-item .training-container .info:not(:empty) .sets, .prg-details ul.content .training-item .training-container .info:not(:empty) .service {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.prg-details ul.content .training-item .training-container .info:not(:empty) .sets .text, .prg-details ul.content .training-item .training-container .info:not(:empty) .service .text {
  line-height: 1rem;
  display: flex;
  align-items: center;
}
.prg-details ul.content .training-item .training-container .info:not(:empty) .sets .text span, .prg-details ul.content .training-item .training-container .info:not(:empty) .service .text span {
  display: inline-flex;
  font-size: 0.5rem;
  height: 1rem;
  line-height: 1rem;
  padding: 0 0.5rem;
  background: var(--bs-gray-700);
  border-radius: 0.5rem;
  align-items: center;
  margin-left: 0.25rem;
  margin-right: 1rem;
}
.prg-details ul.content .training-item.with-image {
  flex-flow: row-reverse nowrap;
  justify-content: space-between;
  align-items: center;
}
.prg-details ul.content .training-item.with-image .training-image {
  width: 20vw;
  height: 20vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.prg-details ul.content .training-item.with-image .training-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}
.prg-details ul.content .training-item.with-image .training-btn-container {
  margin-top: 1rem;
}
.prg-details ul.content .training-item.meal-plan {
  padding: 1rem;
  flex-flow: column nowrap;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.prg-details ul.content .training-item.meal-plan a.bk-program {
  border-radius: 1rem;
}
.prg-details ul.content .training-item.meal-plan .training-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.prg-details ul.content .training-item.meal-plan .training-bg:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: var(--c2-primary);
  opacity: 0.9;
}
.prg-details ul.content .training-item.meal-plan .training-bg:before {
  content: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  backdrop-filter: Blur(5px);
}
.prg-details ul.content .training-item.meal-plan .training-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: Blur(10px);
}
.prg-details ul.content .training-item.meal-plan .area-1, .prg-details ul.content .training-item.meal-plan .area-2 {
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
  width: 100%;
  z-index: 2;
}
.prg-details ul.content .training-item.meal-plan .training-image {
  width: 25vw;
  height: 25vw;
  flex: 0 0 auto;
  /* background: #fff; */
  align-items: center;
  display: flex;
  justify-content: center;
  /* padding: 0.5rem; */
  border-radius: 1rem;
}
.prg-details ul.content .training-item.meal-plan .training-image img.contain {
  object-fit: contain;
}
.prg-details ul.content .training-item.meal-plan .training-image img.cover {
  object-fit: cover;
  background: #fff;
}
.prg-details ul.content .training-item.meal-plan .training-container {
  flex: 1 1 auto;
  width: 100%;
}
.prg-details ul.content .training-item.meal-plan .training-container .title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--c2-white-2);
  text-transform: none;
}
.prg-details ul.content .training-item.meal-plan .training-container .info {
  color: var(--c2-white-3);
}

.macro {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* padding-top: 1rem; */
  /* background: var(--c2-bg); */
  /* border-radius: 1rem; */
  /* padding: 1rem; */
  margin-top: 1rem;
  width: 100%;
  column-gap: 1rem;
}
.macro .item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}
.macro .item .icon {
  color: var(--c2-orange) !important;
  font-size: 1.5rem;
}
.macro .item .value i {
  color: var(--c2-white-3);
  font-size: 0.75em;
  margin-left: 0.25rem;
  font-style: normal;
}
.macro .item span.desc {
  /*            color: var(--c2-white-3);
  font-size: .65rem;
  text-transform: uppercase;*/
  background: var(--c2-primary-2);
  font-size: 0.5rem;
  text-transform: uppercase;
  padding: 0.125rem 0.75rem;
  border-radius: 1rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
}
.macro.total {
  margin-bottom: 1.5rem;
  margin-top: 0;
}
.macro.total .item:not(:last-child) {
  position: relative;
}
.macro.total .item:not(:last-child):after {
  width: 1px;
  height: auto;
  display: flex;
  position: absolute;
  top: -0.5rem;
  bottom: -0.5rem;
  right: -0.5rem;
  background: var(--c2-primary-2);
  min-height: 1px;
  content: "";
  opacity: 0.3;
}
.macro.total .item .value {
  font-size: 1.3rem;
}
.macro.total .item .value i {
  font-size: 0.75rem;
}
.macro.total .item .icon {
  font-size: 2rem;
}
.macro.total .item .icon i {
  font-weight: 900;
  opacity: 0.7;
}
.macro.total .item:hover .icon i, .macro.total .item:focus .icon i, .macro.total .item :focus-within .icon i {
  opacity: 1;
}

.supplement-view {
  padding: 0 1.5rem;
  padding-bottom: 1rem;
}
.supplement-view .supp-img {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.supplement-view .supp-img img {
  width: 50%;
  height: auto;
  border-radius: 1.5rem;
}
.supplement-view .meal-img {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.supplement-view .meal-img img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 1.5rem;
}
.supplement-view .details {
  display: flex;
  gap: 0.75rem;
  flex-flow: column nowrap;
}
.supplement-view .details .ingredients {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.75rem;
  background: var(--c2-bg);
  border-radius: 1rem;
  padding: 1rem 1.5rem;
}
.supplement-view .details .ingredients.hidden {
  display: none;
}
.supplement-view .details .ingredients .title {
  font-size: 0.85rem;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--c2-white-2);
}
.supplement-view .details .ingredients .content {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--c2-white-3);
}

section#AntrenmanDetail {
  padding-top: var(--safe-top-area);
}
section#AntrenmanDetail a.back {
  color: var(--white);
  font-size: 1.4rem;
  width: 3rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
section#AntrenmanDetail .container-first {
  height: 97px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
}
section#AntrenmanDetail .container-first .title {
  all: unset;
}
section#AntrenmanDetail .header {
  aspect-ratio: unset;
  flex-flow: column nowrap;
  position: sticky;
  top: 0;
  background: var(--c2-primary);
}
section#AntrenmanDetail .header:after {
  content: none;
}
section#AntrenmanDetail .header .cover {
  position: relative;
  aspect-ratio: 16/9 !important;
  overflow: hidden;
  background: var(--c2-primary);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
section#AntrenmanDetail .header .cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1) hue-rotate(192deg) contrast(1.25);
  mix-blend-mode: screen !important;
}
section#AntrenmanDetail .bk-prg-container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
}
section#AntrenmanDetail .bk-prg-container .title {
  font-size: 1.25rem;
  line-height: 1.6rem;
  text-transform: uppercase;
  font-weight: bold;
}
section#AntrenmanDetail .bk-prg-container .desc {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--c2-white-2);
  line-height: 1rem;
  margin-top: 0.5rem;
}
section#AntrenmanDetail .bk-prg-container .notes {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--c2-red);
}
section#AntrenmanDetail .bk-prg-container .sets {
  margin-top: 1rem;
  display: flex;
  flex-flow: column nowrap;
  gap: 0.75rem;
}
section#AntrenmanDetail .bk-prg-container .sets .set-item {
  background: var(--c2-primary);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
section#AntrenmanDetail .bk-prg-container .sets .set-item .play {
  background: var(--primary-yellow);
  min-width: 15vw;
  height: 15vw;
  border-radius: 15vw;
  align-items: center;
  justify-content: center;
  display: flex;
  color: var(--c2-bg);
  font-size: 1.3rem;
  gap: 1rem;
  transition: all ease-in-out 0.2s;
}
section#AntrenmanDetail .bk-prg-container .sets .set-item .play:hover, section#AntrenmanDetail .bk-prg-container .sets .set-item .play:focus {
  padding-left: 1rem;
  padding-right: 1rem;
}
section#AntrenmanDetail .bk-prg-container .sets .set-item .play:hover:after, section#AntrenmanDetail .bk-prg-container .sets .set-item .play:focus:after {
  content: "Başlat";
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
}
section#AntrenmanDetail .bk-prg-container .sets .set-item .num, section#AntrenmanDetail .bk-prg-container .sets .set-item .rep {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  min-width: 10vw;
}
section#AntrenmanDetail .bk-prg-container .sets .set-item .num span.text, section#AntrenmanDetail .bk-prg-container .sets .set-item .rep span.text {
  color: var(--c2-orange);
  font-size: 2rem;
}
section#AntrenmanDetail .bk-prg-container .sets .set-item span.info {
  color: var(--c2-white-3);
  font-size: 0.75rem;
  font-weight: 300;
}

/* Loader */
.loader {
  position: fixed;
  z-index: -1;
  display: none;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: Blur(10px);
  -moz-backdrop-filter: Blur(10px);
  -webkit-backdrop-filter: Blur(10px);
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.loader .loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  flex-flow: column nowrap;
  gap: 1.5rem;
}
.loader .loader-container .loader-content {
  animation: pulse 2s linear infinite;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  gap: 1.5rem;
  padding: 2rem;
}
.loader .loader-container img {
  max-width: 30vw;
  height: auto;
}
.loader .loader-container .loader-text {
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* Backdrop */
.bk-modal-backdrop {
  position: fixed;
  z-index: 101;
  left: 0;
  top: 0;
  width: 100vw;
  height: 0;
  backdrop-filter: Blur(20px);
  -webkit-backdrop-filter: Blur(20px);
  -moz-backdrop-filter: Blur(20px);
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  transition: all ease 0.3s;
}

.bk-modal-window {
  position: fixed;
  bottom: 0;
  max-height: 95vh;
  min-height: 10vh;
  left: 0;
  right: 0;
  background-color: var(--c2-primary);
  z-index: 102;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  display: flex;
  flex-flow: column nowrap;
  transition: transform ease-in-out 0.3s;
  transform: translateY(110%);
  padding-bottom: var(--safe-bottom-area);
  height: auto;
}
.bk-modal-window.sending:after {
  content: "Lütfen bekleyin, işleminiz yapılıyor ...";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: Blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25vw;
  text-align: center;
}
.bk-modal-window.light {
  background: var(--c2-white);
  color: var(--c2-white-3);
}
.bk-modal-window.light .bk-modal-heading .modal-title {
  color: var(--c2-bg);
}
.bk-modal-window .form .form-group {
  background: var(--c2-bg) !important;
}
.bk-modal-window .form button {
  height: 40px;
  background: var(--primary-yellow);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: bold;
}
.bk-modal-window select {
  background: var(--c2-primary-2);
  color: var(--white);
  padding: 1rem;
  border: none;
  border-radius: 1rem;
}
.bk-modal-window textarea {
  border-radius: 1rem;
  border: none;
  background: var(--c2-primary-2);
  color: var(--c2-white);
  font-size: 0.85rem;
  padding: 1rem;
}
.bk-modal-window .bk-modal-heading {
  padding-top: 2rem;
  /* display: flex; */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-flow: row nowrap;
}
.bk-modal-window .bk-modal-heading:before {
  position: absolute;
  content: "";
  background: #cecece;
  height: 3px;
  width: 2.5rem;
  border-radius: 3px;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}
.bk-modal-window .bk-modal-body {
  height: 100%;
  flex-shrink: 1;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 98;
  position: relative;
}
.bk-modal-window .bk-modal-footer {
  flex: 0 0 auto;
  height: auto;
  display: flex;
  background: transparent;
  padding-bottom: 1rem;
  padding-top: 1rem;
  z-index: 99;
  position: relative;
}
.bk-modal-window .bk-modal-footer .bk-modal-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
}
.bk-modal-window .bk-modal-footer .bk-modal-btn a {
  background: var(--primary-yellow);
  color: var(--c2-bg);
  font-weight: bold;
  display: flex;
  width: 100%;
  height: 40px;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.85rem;
  gap: 0.75rem;
}
.bk-modal-window .bk-modal-footer .bk-modal-btn a:hover {
  background: var(--primary-yellow-dark);
}
.bk-modal-window .modal-title {
  margin-bottom: 0;
  line-height: 1.5;
  color: var(--primary-yellow);
  text-transform: uppercase;
}
.bk-modal-window .modal-close {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bk-modal-window .modal-close a.close-modal {
  color: var(--white);
  background: var(--c2-bg);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 100%;
}

body.bk-modal-visible {
  overflow: hidden;
}
body.bk-modal-visible .bk-modal-window {
  transform: translate(0);
}
body.bk-modal-visible .bk-modal-backdrop {
  height: 100vh;
}
body.loading {
  overflow: hidden;
}
body.loading .loader {
  z-index: 102;
  display: block;
}

/* Profile */
.profile-container {
  padding: 0 1.5rem;
  padding-bottom: 1rem;
  display: flex;
  gap: 1rem;
  width: 100%;
  display: flex;
}
.profile-container button.sign-out {
  outline: none;
  border: none;
  background: var(--c2-red);
  color: #fff;
  font-size: 0.75rem;
  border-radius: 12px;
  height: 24px;
  padding: 0.25rem 0.75rem;
  margin-right: 0;
  margin-left: 0;
  margin-top: 0.5rem;
  gap: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-container a#setProfilePhoto {
  display: flex;
  align-items: center;
}
.profile-container .profile-content .mail {
  color: var(--c2-white-2);
  font-weight: 300;
  font-size: 0.8rem;
}
.profile-container .profile-content .full-name {
  font-size: 1.25rem;
}
.profile-container .profile-content .name {
  margin-bottom: 0.5rem;
}
.profile-container .image-container {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  gap: 1rem;
  flex: 0 0 auto;
  overflow: visible;
  position: relative;
}
.profile-container .image-container i.user-ph {
  display: none;
}
.profile-container .image-container .edit {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--c2-primary-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
  aspect-ratio: 1;
  color: var(--c2-white);
  font-size: 0.65rem;
}
.profile-container .image-container.bk-placeholder {
  background: var(--c2-red);
}
.profile-container .image-container.bk-placeholder img {
  display: none;
}
.profile-container .image-container.bk-placeholder i.user-ph {
  display: flex;
  font-size: 1.5rem;
  color: var(--c2-white-2);
  text-decoration: none;
}
.profile-container .image-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  overflow: hidden;
  display: flex;
  flex: 0 0 auto;
  border: 3px solid var(--c2-white-2);
}

.weight {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  gap: 1rem;
}
.weight .seperator {
  width: 1px;
  height: auto;
  flex: 0 0 auto;
  background: var(--c2-white-3);
  opacity: 0.3;
}
.weight .item {
  display: flex;
  flex-flow: column;
  flex: 1 0 auto;
}
.weight .item div.tag {
  color: var(--c2-white-3);
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: bold;
  display: inline-flex;
  justify-content: center;
}
.weight .item div.value {
  font-size: 1.6rem;
  color: var(--c2-white);
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.25rem;
}
.weight .item div.value span.v2 {
  font-size: 0.75rem;
  color: var(--c2-white-3);
}

a.btn-profile {
  background: var(--c2-primary);
  display: flex;
  width: 100%;
  border-radius: 1rem;
  padding: 1rem;
  color: var(--white);
  text-decoration: none;
}
a.btn-profile .arrow {
  margin-right: 0;
  margin-left: auto;
  width: 2rem;
  display: flex;
  align-items: center;
  align-items: c;
  justify-content: center;
  color: var(--c2-white-3);
}
a.btn-profile .content {
  display: flex;
  align-items: center;
  gap: 1rem;
}
a.btn-profile .content .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c2-orange);
  font-size: 1.5rem;
  flex: 0 0 auto;
  width: 3rem;
}
a.btn-profile .content .text {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
}
a.btn-profile .content .text .sub-title {
  color: var(--c2-white-3);
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 0.9rem;
}

.head1 {
  height: 47px !important;
}

.head2 {
  top: 47px !important;
  height: 44px !important;
}

.area {
  display: flex;
  gap: 1rem;
  margin-top: 0;
  margin-bottom: 1rem;
  width: 100%;
}
.area a {
  /*background: var(--c2-orange);*/
  color: #fff;
  border-radius: 1rem;
  text-decoration: none;
  padding: 0.75rem 0.5rem;
  flex-flow: column nowrap;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  flex: 1 1 auto;
  width: 100%;
}
.area a .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.area a .bg img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.area a .bg:after {
  content: "";
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.area a .icon {
  font-size: 2.3rem;
  opacity: 1;
  z-index: 3;
  width: 40px;
  height: 40px;
  color: var(--c2-orange);
  display: flex;
  align-items: center;
  justify-content: center;
}
.area a .text {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  z-index: 4;
  justify-content: center;
  text-align: center;
}
.area a .text span.a {
  text-transform: uppercase;
  font-size: 1.1rem;
  line-height: 1.5rem;
  justify-content: center;
  text-align: center;
}
.area a .text span.b {
  line-height: 0.85rem;
  font-size: 0.65rem;
  color: var(--c2-white-2);
  justify-content: center;
  text-align: center;
}

@keyframes loading {
  0% {
    left: -45%;
  }
  100% {
    left: 100%;
  }
}
.numeric {
  font-family: var(--c2-font-1);
}

.calendar {
  display: flex;
  width: 100%;
  padding: 1rem 0;
  gap: 0.5rem;
}
.calendar .activity-indicator {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  margin-top: 0.35rem;
}
.calendar .week-day {
  border-radius: 1rem;
  border: 2px solid transparent;
  padding: 0.5rem 0rem;
  align-items: center;
  justify-content: flex-start;
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  flex: 0 1 auto;
  text-decoration: none;
  color: var(--c2-white);
}
.calendar .week-day span.day-name {
  color: var(--c2-white-3);
  text-transform: uppercase;
  font-size: 0.65rem;
  font-family: var(--c2-font-1);
  font-weight: 600;
}
.calendar .week-day span.day-number {
  font-size: 1.45rem;
  font-family: var(--c2-font-1);
}
.calendar .week-day.active {
  border-color: var(--c2-orange);
  background: var(--c2-orange);
  color: var(--c2-white);
}
.calendar .week-day.active span.day-name {
  color: var(--c2-white-2);
}

.steps, .calories {
  width: 100%;
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--c2-primary);
  flex-flow: column nowrap;
  display: none;
}
.steps .s-header, .calories .s-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--c2-orange);
}
.steps .content, .calories .content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 1rem;
  gap: 1rem;
}
.steps .content .amount, .calories .content .amount {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.steps .content .amount .count, .calories .content .amount .count {
  font-size: 1.75rem;
}
.steps .content .amount .label, .calories .content .amount .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--c2-white-3);
}
.steps .graph svg, .calories .graph svg {
  display: inline-flex;
  vertical-align: bottom;
  width: 30vw;
  height: 30vw;
}
.steps .graph circle, .calories .graph circle {
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 5px;
  stroke-dasharray: 0;
  fill: none;
}
.steps .graph .meter, .calories .graph .meter {
  stroke-width: 5px;
  stroke: var(--c2-orange);
  fill: none;
  transition: stroke-dashoffset 1s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  transform-origin: center center;
  transform: rotate(-90deg) scaleX(-1);
}
.steps .graph text, .calories .graph text {
  fill: #fff;
  font-weight: bold;
  font-family: var(--c2-font-1);
}

.calories {
  background: var(--c2-orange);
  padding: 0.75rem 1rem;
}
.calories .icons {
  color: var(--c2-white);
  font-size: 2rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  height: auto;
  display: flex;
}
.calories .content {
  margin: 0;
  justify-content: space-between;
  gap: 1rem;
}
.calories .content .amount {
  gap: 1rem;
}
.calories .content .label {
  color: var(--c2-white-2) !important;
}
.calories svg {
  width: 20vw !important;
  height: 20vw !important;
}
.calories svg circle {
  stroke: var(--c2-orange) !important;
  opacity: 0.5;
  filter: brightness(2);
}
.calories .meter {
  stroke: var(--c2-white-2) !important;
}

.menu-swiper {
  display: flex;
  width: 100%;
  height: auto;
}
.menu-swiper .swiper-wrapper .swiper-slide {
  width: auto !important;
  color: var(--white);
  text-decoration: none;
  padding-bottom: 0.5rem;
}
.menu-swiper .swiper-wrapper .swiper-slide.swiper-slide-active {
  color: var(--primary-yellow);
}

.external-login {
  margin-top: 3rem;
}
.external-login a.bk-google {
  background: var(--c2-white);
  text-decoration: none;
  color: var(--c2-bg);
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.external-login a.bk-google img {
  max-height: 2rem;
  width: auto;
  mix-blend-mode: multiply;
}

section#AntrenmanJob {
  padding: 0;
}
section#AntrenmanJob .counter {
  margin: 0 auto;
  display: flex;
  font-size: 3rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: var(--c2-red);
  font-family: var(--c2-font-1);
}
section#AntrenmanJob .sets {
  margin-top: 2.5rem;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 0;
  padding: 0 1rem;
}
section#AntrenmanJob .sets .set-item {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  flex-flow: column nowrap;
  align-items: center;
  padding: 0.75rem 0.5rem;
  transition: all ease 0.2s;
  width: 100%;
  position: relative;
}
section#AntrenmanJob .sets .set-item:not(:first-child):before, section#AntrenmanJob .sets .set-item:not(:last-child):after {
  content: "";
  height: 2px;
  background: var(--c2-white-2);
  width: 50%;
  position: absolute;
}
section#AntrenmanJob .sets .set-item:before {
  left: 0;
}
section#AntrenmanJob .sets .set-item:after {
  right: 0;
}
@-webkit-keyframes pulsate-box-shadow {
  0% {
    box-shadow: 0 0 0px 10px rgba(255, 90, 47, 0.1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 90, 47, 0.3);
  }
  100% {
    box-shadow: 0 0 0px 10px rgba(255, 90, 47, 0.1);
  }
}
section#AntrenmanJob .sets .set-item.active .number, section#AntrenmanJob .sets .set-item.active .rep {
  color: var(--c2-bg);
}
section#AntrenmanJob .sets .set-item.active:before, section#AntrenmanJob .sets .set-item.active:after {
  background: transparent;
}
section#AntrenmanJob .sets .set-item.active .set-number {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  animation: pulsate-box-shadow 1s ease-in-out infinite;
  background: var(--c2-orange);
  box-shadow: 0 0 0px 10px rgba(255, 90, 47, 0.1);
  font-size: 1.4rem;
  flex-flow: column;
  line-height: 1;
}
section#AntrenmanJob .sets .set-item.active .set-number:before {
  content: "SET";
  font-size: 0.75rem;
  line-height: 1;
}
section#AntrenmanJob .sets .set-item.done:before, section#AntrenmanJob .sets .set-item.done:after {
  background: var(--c2-bg);
}
section#AntrenmanJob .sets .set-item.done .set-number {
  background: var(--c2-bg);
  box-shadow: 0 0 0 5px rgba(34, 38, 46, 0.21);
}
section#AntrenmanJob .sets .set-item .set-number {
  background: var(--c2-white-2);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--c2-font-1);
  z-index: 2;
  box-shadow: 0 0 0 5px rgba(119, 126, 144, 0.09);
  font-size: 0.85rem;
}
section#AntrenmanJob .sets .set-item .rep {
  align-items: center;
  justify-content: center;
  color: var(--c2-white-3);
  font-size: 1rem;
  font-family: var(--c2-font-1);
  position: absolute;
  top: -1.5rem;
  flex-flow: column nowrap;
  display: flex;
}
section#AntrenmanJob .sets .set-item .rep span.text {
  font-size: 0.5rem;
  text-transform: uppercase;
  line-height: 1;
}
section#AntrenmanJob .sets .set-item .rep span.count {
  line-height: 1;
}
section#AntrenmanJob .sets .set-item .rep i {
  font-size: 0.55rem;
}
section#AntrenmanJob .cover {
  display: flex;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 30vh;
  background: var(--c2-white);
  flex: 1 1 auto;
}
section#AntrenmanJob .cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
section#AntrenmanJob .cover video {
  aspect-ratio: 1920/1080;
  display: flex;
  height: auto;
  width: 100%;
  mix-blend-mode: darken;
}
section#AntrenmanJob .equipment {
  margin-top: 1rem;
}
section#AntrenmanJob .equipment input {
  background: var(--c2-white-2);
  border: none;
  height: 3rem;
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
}
section#AntrenmanJob .start-training {
  display: flex;
  margin-top: 1rem;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
section#AntrenmanJob .start-training span.next-set, section#AntrenmanJob .start-training span.reset {
  display: none !important;
}
section#AntrenmanJob .start-training.running span.next-set, section#AntrenmanJob .start-training.running span.reset {
  display: flex !important;
}
section#AntrenmanJob .start-training.paused span.reset {
  display: flex !important;
}
section#AntrenmanJob .start-training button {
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8bc34a;
  border: 2px solid #8bc34a;
  font-weight: bold;
  text-transform: uppercase;
  font-family: inherit;
  aspect-ratio: 1;
  border-radius: 100%;
  width: 110px;
  height: 110px;
}
section#AntrenmanJob .start-training button:is(.running, .paused) {
  width: 72px;
  height: 72px;
}
section#AntrenmanJob .start-training button:not(.running):focus, section#AntrenmanJob .start-training button:not(.running):hover {
  background: #8bc34a;
  color: #fff;
}
section#AntrenmanJob .start-training button i {
  font-size: 2.2rem;
}
section#AntrenmanJob .start-training button.running {
  background: var(--c2-red);
  color: #fff;
  border-color: transparent;
}
section#AntrenmanJob .start-training button.running i:before {
  content: "\f04c";
}
section#AntrenmanJob .start-training span.next-set, section#AntrenmanJob .start-training span.reset {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  flex-flow: column-reverse;
  background: var(--c2-white-2);
  color: #fff;
  border-radius: 100%;
}
section#AntrenmanJob .start-training span.next-set i, section#AntrenmanJob .start-training span.reset i {
  font-size: 1rem;
}
section#AntrenmanJob .start-training span.next-set.finish {
  background: var(--c2-green, #8bc34a);
}
section#AntrenmanJob .start-training span.next-set.finish i:before {
  content: "\f00c";
}

.water-content {
  display: flex;
  width: 100%;
  background: #1565c0;
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
}
.water-content .water-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.water-content .water-icon:after {
  content: attr(data-count);
  font-size: 0.85rem;
  position: absolute;
  color: #1565c0;
  z-index: 2;
  bottom: 0.5rem;
  font-family: var(--c2-font-2) !important;
}
.water-content .content {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  align-items: center;
  padding: 1rem 0;
  z-index: 2;
}
.water-content .graph {
  display: flex;
  align-items: center;
  justify-content: center;
}
.water-content .graph i {
  position: absolute;
  font-size: 3rem;
  opacity: 0.75;
}
.water-content .btn-min, .water-content .btn-plus {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2196f3;
  border-radius: 100%;
}
.water-content .graph svg {
  display: inline-flex;
  vertical-align: bottom;
  width: 30vw;
  height: 30vw;
}
.water-content .graph circle {
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 5px;
  stroke-dasharray: 0;
  fill: none;
}
.water-content .graph .meter {
  stroke-width: 5px;
  stroke: var(--c2-orange);
  fill: none;
  transition: stroke-dashoffset 1s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  transform-origin: center center;
  transform: rotate(-90deg) scaleX(-1);
}
.water-content .graph text {
  fill: #fff;
  font-weight: bold;
}
.water-content .waves {
  transform: translateY(90%);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.4s transform ease;
  transform-origin: bottom center;
  z-index: 1;
  border-radius: 1rem;
}
@media (min-width: 500px) {
  .water-content .waves {
    border-radius: 5px;
  }
}
.water-content .wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: wave 1s linear infinite;
}
.water-content .wave--front {
  z-index: 2;
  color: #32BAFA;
}
.water-content .wave--back {
  z-index: 1;
  color: #2C7FBE;
  animation-direction: reverse;
}
.water-content .water {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: currentColor;
}
.water-content .water svg {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 99.9%;
}
.water-content .water:first-of-type {
  transform: translate(-100%, 0);
}
.water-content svg {
  fill: currentColor;
}
@keyframes wave {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(50%, 0.5em, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pulseAway {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
  }
}

section.form .form-set, section .form .form-set {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
}
section.form .form-header, section .form .form-header {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-top: 2rem;
  color: var(--c2-orange);
}
section.form .content, section .form .content {
  display: flex;
  padding: 1.5rem;
  padding-top: 0;
  flex-flow: column nowrap;
  gap: 1rem;
}
section.form .content button, section .form .content button {
  background: var(--primary-yellow);
  width: 100%;
  height: 3rem;
  border-radius: 1.5rem;
  border: none;
  font-weight: bold;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--c2-bg);
}
section.form .content .form-group, section .form .content .form-group {
  display: flex;
  background: var(--c2-primary);
  border-radius: 1rem;
  padding: 1rem;
  flex-flow: column nowrap;
  position: relative;
}
section.form .content .form-group span.prefix, section .form .content .form-group span.prefix {
  position: absolute;
  left: 1rem;
  top: 2.5rem;
  background: var(--c2-primary-2);
  font-size: 0.75rem;
  padding: 0 0.5rem;
  border-radius: 1rem;
  line-height: 1.25rem;
}
section.form .content .form-group label, section .form .content .form-group label {
  color: var(--c2-white-3);
  font-size: 0.75rem;
  white-space: nowrap;
  position: absolute;
  left: 1rem;
  top: 1rem;
}
section.form .content .form-group label span, section .form .content .form-group label span {
  font-size: 0.85em;
  opacity: 0.7;
}
section.form .content .form-group .form-control, section .form .content .form-group .form-control {
  background: inherit;
  border: none;
  color: var(--c2-white);
  padding: 0.5rem 0;
  font-size: 1.25rem;
  padding-top: 1.5rem;
  text-align: left;
  font-family: inherit;
}
section.form .content .form-group .form-control:focus, section.form .content .form-group .form-control:active, section .form .content .form-group .form-control:focus, section .form .content .form-group .form-control:active {
  outline: none;
  box-shadow: none;
  color: var(--primary-yellow);
}
section.form .content .form-group.prefix .form-control, section .form .content .form-group.prefix .form-control {
  padding-left: 2.5rem;
}

.vki-row {
  display: flex;
  flex-flow: column nowrap;
}
.vki-row .bmi-chart {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: space-between;
}
.vki-row .bmi-chart .bmi {
  width: auto;
  flex: 0 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.5rem;
  padding: 0.5rem 0rem;
}
.vki-row .bmi-level-container {
  height: 1.25rem;
  border-radius: 1rem;
  background: rgb(83, 204, 254);
  background: linear-gradient(90deg, rgb(83, 204, 254) 0%, rgb(172, 254, 112) 25%, rgb(255, 244, 0) 50%, rgb(255, 101, 0) 75%, rgb(255, 0, 0) 100%);
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
}
.vki-row .bmi-level-container .bmi-level {
  position: absolute;
  height: 100%;
  display: flex;
  left: 0;
  /* bottom: 0.5rem; */
  background: rgba(0, 0, 0, 0.4);
  border-right: 2px solid;
}
.vki-row .bmi-level-container .bmi-level:after {
  content: attr(data-level);
  position: absolute;
  right: 0.5rem;
  font-size: 0.75rem;
  height: 100%;
  display: flex;
  align-items: center;
}

.float-button {
  z-index: 9;
  position: sticky;
  bottom: calc(var(--tab-height) + var(--safe-bottom-area) + 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}
.float-button .play {
  height: 3rem;
  background: var(--c2-orange);
  border-radius: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0 2rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  font-family: inherit;
}
.float-button button {
  font-family: inherit;
  background: var(--primary-yellow);
  height: 3rem;
  border-radius: 1.5rem;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0 2rem;
  font-weight: bold;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--c2-bg);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

body.full-screen .float-button {
  bottom: 0;
}
body.full-screen section {
  padding-bottom: calc(var(--safe-bottom-area) + 1rem);
}

#TrainingProgram, .training-details {
  transition: transform ease 0.3s;
}

.Training {
  z-index: 1;
}

.training-details {
  background: var(--c2-bg);
  position: fixed;
  left: 100vw;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 101;
}

body.detail-view main {
  display: flex;
  flex-flow: row nowrap;
  width: 100vw;
}
body.detail-view .training-details {
  transform: translatex(-100vw);
  overflow-y: auto;
}
body.detail-view .Training {
  overflow: hidden;
  height: 100vh;
}

.prg-remains {
  width: 100%;
  display: flex;
  flex-flow: column;
  gap: 0.25rem;
  margin-bottom: var(--gap);
  font-family: var(--c2-font-1);
}
.prg-remains .title {
  font-size: 0.85rem;
  font-weight: 300;
}
.prg-remains .title strong {
  font-weight: 700;
  font-size: 1.2em;
}
.prg-remains .days {
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  text-transform: uppercase;
  font-weight: 300;
  color: var(--c2-white-2);
}
.prg-remains .percentage {
  height: auto;
  /* background: var(--c2-white-3); */
  width: 100%;
  border-radius: 10px;
  /* overflow: hidden; */
  margin: 0.25rem 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2px;
  border: 1px solid var(--bs-gray);
  overflow: hidden;
}
.prg-remains .percentage .prgs {
  display: flex;
  height: 10px;
  border-radius: 5px;
  background-color: var(--primary-yellow);
}

@keyframes skeleton-user-activities {
  0% {
    background-color: #505664;
  }
  100% {
    background-color: #31343c;
  }
}
.user-activity-image {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: var(--c2-bg);
  z-index: 1099;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  display: flex;
  opacity: 0;
  transform: translateY(125%);
  transition: all ease 0.2s;
}
.user-activity-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.user-activity-image a.close-me {
  width: 3rem;
  height: 3rem;
  color: var(--c2-white);
  font-size: 1.5rem;
  position: absolute;
  right: 1.5rem;
  top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

body.show-user-activity-image .user-activity-image {
  opacity: 1;
  transform: translateY(0);
}

.user-activities {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.75rem;
  width: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.user-activities .p-item {
  background: var(--c2-primary);
  display: flex;
  width: 100%;
  border-radius: 1rem;
  padding: 1rem;
  color: var(--white);
  text-decoration: none;
  min-height: 5rem;
}
.user-activities .p-item .icon, .user-activities .p-item span.title, .user-activities .p-item span.sub-title, .user-activities .p-item span.time {
  animation: infinite 1s skeleton-user-activities;
}
.user-activities .p-item span.title {
  height: 1.5rem;
  width: 125px;
  display: block;
}
.user-activities .p-item span.time {
  height: 0.85rem;
  width: 45px;
  display: block;
  margin-bottom: 0.15rem !important;
  opacity: 1 !important;
}
.user-activities .p-item span.sub-title {
  height: 0.9rem;
  width: 175px;
  display: block;
}
.user-activities .item, .user-activities .p-item {
  background: var(--c2-primary);
  display: flex;
  width: 100%;
  border-radius: 1rem;
  padding: 1rem;
  color: var(--white);
  text-decoration: none;
  min-height: 5rem;
}
.user-activities .item .arrow, .user-activities .p-item .arrow {
  margin-right: 0;
  margin-left: auto;
  width: 2rem;
  display: flex;
  align-items: center;
  align-items: c;
  justify-content: center;
  color: var(--c2-white-3);
}
.user-activities .item .content, .user-activities .p-item .content {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.user-activities .item .content span.time, .user-activities .p-item .content span.time {
  font-size: 0.7rem;
  margin-bottom: -0.5rem;
  opacity: 0.5;
  font-family: var(--c2-font-1);
}
.user-activities .item .content .icon, .user-activities .p-item .content .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c2-orange);
  font-size: 1.5rem;
  flex: 0 0 auto;
  width: 3rem;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  overflow: hidden;
}
.user-activities .item .content .icon img, .user-activities .p-item .content .icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-activities .item .content .text, .user-activities .p-item .content .text {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
}
.user-activities .item .content .text .sub-title, .user-activities .p-item .content .text .sub-title {
  color: var(--c2-white-3);
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 0.9rem;
}
.user-activities .item .content span.notes:not(:empty), .user-activities .p-item .content span.notes:not(:empty) {
  background: var(--c2-danger);
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  width: 100%;
  display: inline-flex;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.user-activities .item.confirm--1 .title:before, .user-activities .p-item.confirm--1 .title:before {
  content: "\f336";
  font-family: var(--fa);
  color: var(--c2-success);
  margin-right: 0.5rem;
}
.user-activities .item.confirm--2 .title:before, .user-activities .p-item.confirm--2 .title:before {
  content: "\f057";
  font-family: var(--fa);
  color: var(--c2-danger);
  margin-right: 0.5rem;
}

.viwo-calendar {
  padding: 1rem;
  padding-bottom: 0;
  position: sticky;
  top: var(--safe-top-area);
  background: var(--c2-bg);
  z-index: 2;
}
.viwo-calendar .activity-chart {
  display: flex;
  width: 100%;
  height: auto;
  margin-top: 1.25rem;
}
.viwo-calendar .activity-chart span.inlinesparkline {
  display: flex;
  width: 100%;
  height: 100%;
}
.viwo-calendar .calendar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: row nowrap;
  height: 3rem;
}
.viwo-calendar .calendar-title .year-month {
  display: flex;
  gap: 0.5rem;
  height: 100%;
  align-items: center;
  color: var(--primary-yellow);
}
.viwo-calendar .actions button {
  appearance: none;
  border: none;
  background: none;
  color: #00BCD4;
  font-size: 1.2rem;
  width: 3rem;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.viwo-calendar .calendar-wrapper .items {
  display: flex;
  flex-flow: column nowrap;
  gap: 1rem;
}
.viwo-calendar .calendar-wrapper .items .cal-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  height: auto;
  width: 100%;
}
.viwo-calendar .calendar-wrapper .items .cal-row .cal-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  flex-flow: column;
  position: relative;
}
.viwo-calendar .calendar-wrapper .items .cal-row .cal-cell.event:after {
  content: "";
  background: var(--c2-primary-2);
  width: 0.3rem;
  aspect-ratio: 1;
  border-radius: 100%;
  position: absolute;
  bottom: 0rem;
}
.viwo-calendar .calendar-wrapper .items .cal-row .cal-cell.event span {
  font-weight: 500;
  color: var(--c2-white);
}
.viwo-calendar .calendar-wrapper .items .cal-row .cal-cell span {
  font-family: var(--c2-font-1);
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  transition: ease 0.2s;
  font-weight: 300;
  color: var(--c2-white-2);
}
.viwo-calendar .calendar-wrapper .items .cal-row .cal-cell.today span {
  color: var(--c2-orange);
}
.viwo-calendar .calendar-wrapper .items .cal-row .cal-cell.active span {
  color: #fff;
  background: var(--c2-orange);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
}
.viwo-calendar .calendar-wrapper .items .cal-row .cal-cell.active.event:after {
  opacity: 0;
}
.viwo-calendar .calendar-wrapper .items .cal-row .cal-cell.active.event span {
  outline: 3px solid var(--c2-white);
  outline-offset: 2px;
}
.viwo-calendar .calendar-wrapper .cal-header {
  display: flex;
  width: 100%;
  height: 2rem;
  margin-bottom: 1rem;
}
.viwo-calendar .calendar-wrapper .cal-header .days {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.viwo-calendar .calendar-wrapper .cal-header .days .day {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #999;
}
.viwo-calendar .calendar-wrapper .cal-header .days .day.weekend {
  color: #F44336;
}

section.top-stats .items {
  display: flex;
  flex-flow: column;
  gap: 3px;
}
section.top-stats .items .seperator {
  padding: 1rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
section.top-stats .items .item {
  background: var(--c2-primary);
  display: flex;
  width: 100%;
  padding: 1rem;
  color: var(--white);
  text-decoration: none;
  gap: 1rem;
  position: relative;
}
section.top-stats .items .item.me {
  background: var(--primary-yellow) !important;
  color: var(--c2-primary) !important;
}
section.top-stats .items .item.me .order {
  font-weight: bold;
}
section.top-stats .items .item.me .content .rate {
  color: var(--c2-primary-2) !important;
  font-weight: bold;
}
section.top-stats .items .item .order {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--c2-font-1);
  font-size: 1.5rem;
  font-weight: 300;
  width: 2rem;
  opacity: 0.5;
}
section.top-stats .items .item .content {
  width: 100%;
  display: flex;
  gap: 1rem;
  align-items: center;
  position: relative;
}
section.top-stats .items .item .content .rate {
  color: var(--primary-yellow) !important;
  font-family: var(--c2-font-1);
  margin-right: 0;
  margin-left: auto;
  height: 100%;
  align-items: center;
  align-content: center;
  justify-self: center;
  display: flex;
}
section.top-stats .items .item .content .avatar {
  height: 3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c2-bg);
}
section.top-stats .items .item .content .avatar img {
  object-fit: scale-down;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
}
section.top-stats .items .item .content .avatar:not(:has(img)) {
  background: var(--c2-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}
section.top-stats .items .item .content .avatar:not(:has(img)):after {
  font-family: "Font Awesome 6 Pro";
  content: "\f2eb";
  color: var(--c2-orange);
}
section.top-stats .items .item .content .percent {
  background: var(--c2-orange);
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.empty-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column nowrap;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.empty-container .icon {
  font-size: 5rem;
  color: #FF5722;
  margin-bottom: 1rem;
}
.empty-container h2.title {
  font-size: 1.25rem;
  text-align: center;
}
.empty-container p.desc {
  text-align: center;
  color: #909dc3;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-top: 1rem;
  padding: 0 2rem;
}
.empty-container a {
  border: none;
  outline: none;
  height: 2.5rem;
  padding: 0 3rem;
  background-color: var(--primary-yellow);
  color: var(--dark-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: var(--c2-btn-radius);
  text-decoration: none;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-top: 2rem;
}

section.WebView {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 50px;
}
section.WebView iframe {
  width: 100%;
  height: 100%;
}