:root {
  --flex-safe-top-env: env(safe-area-inset-top, 0px);
  --flex-safe-bottom-env: env(safe-area-inset-bottom, 0px);
  --flex-safe-left-env: env(safe-area-inset-left, 0px);
  --flex-safe-right-env: env(safe-area-inset-right, 0px);

  --flex-vv-offset-bottom: 0px;

  --flex-safe-top-js: 0px;
  --flex-safe-bottom-js: 0px;

  --flex-safe-top: min(
    max(var(--flex-safe-top-env), var(--flex-safe-top-js)),
    60px
  );
  --flex-safe-bottom: min(
    max(var(--flex-safe-bottom-env), var(--flex-safe-bottom-js)),
    50px
  );

  --flex-safe-left: var(--flex-safe-left-env);
  --flex-safe-right: var(--flex-safe-right-env);

  --flex-topbar-h-eff: var(--flex-topbar-h, 56px);

  --flex-bottom-nav-h-base: 72px;
  --flex-bottom-nav-h-js: 0px;

  --flex-bottom-nav-h-eff: max(
    var(--flex-bottom-nav-h, var(--flex-bottom-nav-h-base)),
    var(--flex-bottom-nav-h-js),
    var(--flex-bottom-nav-h-base)
  );

  --flex-pwa-vv-gap: 0px;

  --flex-topbar-gap-eff: max(var(--flex-topbar-gap, 12px), 12px);
  --flex-bottom-nav-gap-eff: max(var(--flex-bottom-nav-gap, 28px), 12px);

  --flex-topbar-total-h: var(--flex-topbar-h-eff);
  --flex-topbar-safe-pad: 0px;

  --flex-nav-bar-h: 72px;
  --flex-nav-safe-fill: var(--flex-safe-bottom);

  --flex-nav-safe-pad: clamp(0px, var(--flex-safe-bottom), 12px);

  --flex-nav-extra-fill: 0px;

  --flex-nav-safe-fill-eff: calc(
    var(--flex-safe-bottom) + var(--flex-nav-extra-fill)
  );

  --flex-nav-drop: 0px;
  --flex-nav-drop-fudge: 2px;

  --flex-nav-drop-ios-bias: 0px;

  --flex-bottom-nav-cover-fudge: 2px;

  --flex-nav-drop-eff: clamp(
    0px,
    var(--flex-nav-drop),
    calc(var(--flex-nav-safe-fill-eff) + var(--flex-pwa-vv-gap) + 90px)
  );

  --flex-nav-safe-pad-old: clamp(0px, var(--flex-safe-bottom), 10px);

  --flex-bottom-nav-total-h: calc(
    var(--flex-nav-bar-h) + var(--flex-nav-safe-fill) + var(--flex-pwa-vv-gap)
  );

  --flex-bottom-nav-measured: round(var(--flex-bottom-nav-measured));

  --flex-green: #22c55e;
  --flex-green-ring: rgba(34, 197, 94, 0.35);
  --flex-green-tint: rgba(34, 197, 94, 0.22);

  --flex-backdrop-overlap: 2px;
}

html.ios {
  --flex-nav-drop-ios-bias: 14px;
  --flex-nav-drop-fudge: 1px;
}

html.pwa {
  --flex-topbar-total-h: calc(var(--flex-topbar-h-eff) + var(--flex-safe-top));
  --flex-topbar-safe-pad: var(--flex-safe-top);

  --flex-bottom-nav-cover-h: calc(
    var(--flex-nav-bar-h) + var(--flex-nav-safe-fill-eff) +
      var(--flex-pwa-vv-gap) - var(--flex-nav-drop-eff) +
      var(--flex-bottom-nav-cover-fudge)
  );

  --flex-bottom-nav-measured: var(--flex-bottom-nav-cover-h);

  --flex-bottom-nav-gap-eff: 40px;
}

html.pwa body {
  padding-top: 0 !important;
  padding-left: var(--flex-safe-left) !important;
  padding-right: var(--flex-safe-right) !important;
}

html.pwa .flex-topbar {
  top: 0 !important;
}

.flex-topbar {
  height: var(--flex-topbar-total-h);
  padding-top: var(--flex-topbar-safe-pad);
  padding-left: var(--flex-safe-left);
  padding-right: var(--flex-safe-right);
  box-sizing: border-box;
}

.flex-topbar-inner {
  height: var(--flex-topbar-h-eff);
  box-sizing: border-box;
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.card.completed,
.exercise-card.completed,
.workout-exercise.completed,
.card.exercise.completed {
  border-color: var(--bs-card-border-color) !important;
  box-shadow: var(--bs-card-box-shadow, none) !important;
  background: var(--bs-card-bg) !important;
}

.card.completed
  :is(.card-img-top, img.exercise-thumb, .exercise-thumb, .exercise-photo, .thumb, .thumbnail, .ex-thumb, .ex-thumbnail, .ex-image),
.exercise-card.completed
  :is(.card-img-top, img.exercise-thumb, .exercise-thumb, .exercise-photo, .thumb, .thumbnail, .ex-thumb, .ex-thumbnail, .ex-image),
.workout-exercise.completed
  :is(.card-img-top, img.exercise-thumb, .exercise-thumb, .exercise-photo, .thumb, .thumbnail, .ex-thumb, .ex-thumbnail, .ex-image),
.card.exercise.completed
  :is(.card-img-top, img.exercise-thumb, .exercise-thumb, .exercise-photo, .thumb, .thumbnail, .ex-thumb, .ex-thumbnail, .ex-image) {
  border: none !important;
  outline: none !important;
  box-shadow: inset 0 0 0 9999px var(--flex-green-tint) !important;
  filter: none !important;
  -webkit-filter: none !important;
  border-radius: 0.5rem;
}

.card.completed .card-title,
.exercise-card.completed .card-title,
.workout-exercise.completed .card-title,
.card.exercise.completed .card-title,
.card.completed .exercise-name,
.exercise-card.completed .exercise-name,
.workout-exercise.completed .exercise-name {
  color: inherit !important;
}

html.pwa:not(.kb-native-open) .flex-bottom-nav {
  bottom: calc(
    0px - var(--flex-pwa-vv-gap, 0px) - var(--flex-nav-drop-eff, 0px)
  ) !important;
}

html:not(.kb-open):not(.numkb-open):not(.kb-native-open) .flex-bottom-nav,
html:not(.kb-open):not(.numkb-open):not(.kb-native-open) .pick-bar {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) !important;
}

.flex-bottom-nav {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;

  height: calc(
    var(--flex-nav-bar-h) + var(--flex-nav-safe-fill-eff) +
      var(--flex-pwa-vv-gap)
  );

  padding-bottom: calc(var(--flex-nav-safe-fill-eff) + var(--flex-pwa-vv-gap));

  box-sizing: border-box;

  border-top: 1px solid var(--bs-border-color) !important;
  background: rgba(var(--bs-body-bg-rgb), 0.96) !important;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  z-index: 1030;

  display: flex;
  justify-content: center;
  align-items: flex-end;

  overflow: hidden;

  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.flex-bottom-nav::before,
.flex-bottom-nav::after {
  content: none !important;
}

.flex-bottom-nav-inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;

  display: flex;
  justify-content: space-around;
  align-items: flex-end;

  height: var(--flex-nav-bar-h) !important;
  min-height: var(--flex-nav-bar-h) !important;

  padding-bottom: 6px;
  box-sizing: border-box;

  position: relative !important;
  top: auto !important;
  transform: none !important;
}

html.pwa .flex-main:not(.no-bottomnav) {
  padding-bottom: calc(
    var(--flex-bottom-nav-cover-h) + var(--flex-bottom-nav-gap-eff)
  ) !important;
  scroll-padding-bottom: calc(
    var(--flex-bottom-nav-cover-h) + var(--flex-bottom-nav-gap-eff)
  ) !important;
}

html.pwa .flex-bottom {
  padding-bottom: 0 !important;
  scroll-padding-bottom: 0 !important;
}

html.pwa footer {
  padding-bottom: 0 !important;
}

html.pwa #global-toast-container {
  bottom: calc(
    var(--flex-bottom-nav-cover-h) + var(--flex-bottom-nav-gap-eff) + 10px -
      var(--flex-pwa-vv-gap, 0px)
  ) !important;
}

html.pwa body.modal-open > .modal-backdrop {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  bottom: max(
    0px,
    calc(
      var(
          --flex-bottom-nav-measured,
          var(--flex-bottom-nav-cover-h, var(--flex-bottom-nav-total-h, 0px))
        ) - var(--flex-backdrop-overlap)
    )
  ) !important;

  width: auto !important;
  height: auto !important;
}

html.pwa.ios body.modal-open > .modal-backdrop {
  bottom: max(
    0px,
    calc(
      var(
          --flex-bottom-nav-measured,
          var(--flex-bottom-nav-cover-h, var(--flex-bottom-nav-total-h, 0px))
        ) - var(--flex-backdrop-overlap)
    )
  ) !important;
}

html.pwa body.modal-open .flex-bottom-nav {
  position: fixed;
}

html.pwa body.modal-open .flex-bottom-nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;

  height: 6px;
  background: rgb(var(--bs-body-bg-rgb));
  pointer-events: none;
}