@charset "UTF-8";
html {
  font-size: 12px;
}
body {
  font-family: "Noto Sans TC", sans-serif;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}
.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: #FFDBCA;
  cursor: pointer;
  border-radius: 100px;
}
input[type="range"]::-webkit-slider-thumb {
   background-color: $main-orange;
   scale: 1.2;
}
*/
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 10px;
  background: #FFDBCA;
  outline: none;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #F49175;
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}
@-webkit-keyframes fadeInUp {
  /*
    0%{
        opacity:0;-webkit-transform:translate3d(0,2000px,0);
        transform:translate3d(0,2000px,0);
        scale:0.1;
        }
    50%{
        opacity:1;
        -webkit-transform:translateZ(0);
        transform:translateZ(0);
        scale:0.3;
    }
    100%{
        scale:1;
    }
    */
}
.right-border-line {
  border-right: 1px solid #F49175;
}
.hidden_exercisedetail.exercisedetail .form .star-container svg {
  width: 1rem;
  height: 1rem;
}
.hidden_exercisedetail.exercisedetail .form .smile {
  max-width: 150px;
  width: 27vw;
}
.hidden_exercisedetail.exercisedetail .form .smile svg {
  width: 100%;
  height: auto;
}
.exercisedetail .form .smile {
  max-width: 100px;
  width: 27vw;
}
.exercisedetail .form .smile svg {
  width: 100%;
  height: auto;
}
a {
  text-decoration: none;
}
a.disabled {
  pointer-events: none;
  cursor: default;
}
.btn-orange {
  color: white;
  background-color: #F49175;
  box-shadow: 1px 4px 2px rgba(0, 0, 0, 0.25);
  /*
    filter: drop-shadow(1px 4px 2px rgba(0, 0, 0, 0.25));
    */
  border-radius: 26px;
  font-weight: bold;
  padding: 0.5rem 2rem;
}
.btn-orange:hover {
  background-color: #FA7E5B;
  border-color: #FA7E5B;
  color: white;
}
.desktop-title {
  color: #454545;
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.exercise_detail {
  margin-bottom: 2rem;
}
.exercise_detail .image {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  position: relative;
}
.exercise_detail .image img {
  object-fit: cover;
}
.exercise_detail .image img::after {
  display: block;
  content: "";
  clear: both;
}
.exercise_detail .image img::before {
  float: left;
  padding-top: 56.25%;
  content: "";
}
.exercise_detail .image .completed {
  background-color: #ECECEC;
  color: #454545;
  font-weight: bold;
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  /*
                translate: 0 -50% ;
                */
  transform: translate(0, -50%);
  font-size: 2rem;
}
.exercise_detail .text-container {
  color: #F49175;
}
.exercise_detail .text-container .title {
  font-weight: bold;
  font-size: 1.25rem;
}
.info-background {
  margin: 1.5rem;
  padding: 1.5rem;
  background-color: #F4F4F4;
  border-radius: 15px;
}
.score-label {
  color: #F49175;
  text-align: center;
  margin-bottom: 1px;
  font-weight: 600;
  white-space: nowrap;
}
.score {
  background-color: #FFDBCA;
  border-radius: 7px;
  padding: 1px 5px;
  text-align: center;
  white-space: nowrap;
}
.header {
  height: 75px;
  background-color: white;
  padding: 0.5rem 1.5rem 0.5rem 1rem;
  position: relative;
  /*
     margin-bottom: 0.5rem;
     */
}
.header .main-item {
  text-align: center;
}
.header .main-item .item {
  color: #454545;
}
.header .main-item .item.btn-orange {
  color: white;
}
.header .logo img {
  height: 75px;
}
.header .nav {
  z-index: 9999999;
  position: absolute;
  bottom: 0;
  display: none;
  right: 0.5rem;
  flex-direction: column;
  align-items: center;
  /*
          translate: 0 100% ;
          */
  transform: translate(0, 100%);
  padding: 1rem;
  background: rgba(207, 207, 208, 0.8);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 15px;
}
.header .nav.active {
  display: flex;
}
.header .nav .item {
  font-size: 1rem;
  font-weight: bold;
  color: black;
  text-decoration: none;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.header .nav .mobile-sub-list {
  position: absolute;
  top: 0;
  left: -1rem;
  /*
                translate: -100% 0;
                */
  transform: translate(-100%, 0);
  padding: 1rem;
  background: rgba(207, 207, 208, 0.8);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 15px;
}
.header .sub-nav-container {
  position: absolute;
  bottom: 0rem;
  display: flex;
  flex-direction: column;
  left: 50%;
  /*
          translate: -50% 100%;
          */
  transform: translate(-50%, 100%);
  align-items: center;
  z-index: 9999;
  width: 8rem;
}
.header .sub-nav-container .sub-nav-list {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: #FFD5C9;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
}
.header .sub-nav-container .sub-nav-list .item {
  margin-left: 0;
  margin-right: 0;
  padding: 0rem 0.5rem;
}
.header .sub-nav-container.hide .sub-nav-list {
  display: none;
}
.header .sub-nav-container.hide .arrow {
  rotate: 180deg;
}
.header .sub-nav-container.hide .arrow path {
  fill: #F49175;
}
.header .main-item:hover .sub-nav-container.hide .sub-nav-list {
  display: flex;
}
.footer {
  background-color: #EEEDED;
  height: 70px;
  padding: 0.5rem 1.5rem;
}
.footer .nav .item {
  color: #454545;
  font-size: 0.65rem;
  text-decoration: none;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.footer .footer-logo img {
  width: auto;
  height: 50px;
}
#layout-content {
  --minheight: calc(100vh - 70px - 75px);
  min-height: var(--minheight);
  position: relative;
}
.login {
  min-height: var(--minheight);
  padding-left: 4rem;
  padding-right: 4rem;
  height: 100%;
}
.login .image {
  max-width: 350px;
  margin-bottom: 2rem;
}
.login .title {
  color: #636363;
  font-size: 1.35rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.login .input_area {
  background: #E8E7E7;
  border: 2px solid #C1C1C1;
  border-radius: 15px;
  overflow: hidden;
  width: 100%;
  box-shadow: 1px 4px 2px rgba(0, 0, 0, 0.25);
  /*
        filter: drop-shadow(1px 4px 2px rgba(0, 0, 0, 0.25));
        */
  margin-bottom: 1rem;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.login .input_area .input input {
  padding: 0.5rem;
  color: #636363;
  font-weight: bold;
  font-size: 1rem;
  background-color: transparent;
  border: 0px;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
.login .input_area .underline {
  border-bottom: 2px solid #C1C1C1;
  width: 100%;
}
.login .btn-signin {
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-bottom: 1rem;
}
.login .resetpassword {
  color: #F49175;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
}
.exercise_category {
  font-weight: bold;
}
.exercise_category .image {
  position: relative;
}
.exercise_category .image img {
  position: absolute;
  top: 50%;
  left: 50%;
  /*
              translate: -50% -50%;
              */
  transform: translate(-50%, -50%);
  height: 50%;
}
.circular-chart {
  display: block;
  margin: 10px auto 0.5rem auto;
  /*
    max-width: 80%;
    */
  max-height: 185px;
  width: 100%;
  height: 100%;
}
.circle {
  stroke: #ECECEC;
  fill: var(--color);
  stroke-dasharray: 100 100;
  stroke-width: 2.8;
  stroke-linecap: round;
}
.circle + .circle-progress {
  stroke: var(--barcolor);
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
  stroke-dasharray: var(--level_percentage) 100;
  fill: transparent;
}
@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}
.gamebackbutton {
  background-color: #CA3838;
  border-radius: 108px;
}
.gamebackbutton .disabilitylevel-text {
  color: white;
  font-weight: bold;
  font-size: 1.15rem;
  white-space: nowrap;
}
.playsperday {
  background-color: #EAEAEA;
  border-radius: 108px;
}
.playsperday .disabilitylevel-text {
  color: #454545;
  font-weight: bold;
  font-size: 1.15rem;
  white-space: nowrap;
}
.game {
  padding-bottom: 3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  /*
    .backbutton{
         position: absolute;
         left:50%;
         bottom: 0;
         translate: -50% 0;
         color: $main-orange;
         font-weight: bold;
         font-size: 1.15rem;
         .disabilitylevel{
             padding-left: 3rem;
             padding-right: 3rem;
             height: 5rem;
             border-radius: 10rem 10rem 0 0;
             background-color: #CA3838;  
             position: relative;
             .disabilitylevel-text{
                 position: absolute;
                 left: 50%;
                 top: 38%;
                 translate: -50% -20%;
                 color: white;
                 font-weight: bold;
                 font-size: 1.15rem;
                white-space: nowrap;
                text-align: center;
             }
         }
    }
    */
}
.game .game-container {
  justify-self: center;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.game .game-container:nth-child(3) {
  grid-area: 2 / 1 / 3 / 3;
}
.game .backbutton {
  background-color: #CA3838;
  border-radius: 108px;
}
.game .backbutton .disabilitylevel-text {
  color: white;
  font-weight: bold;
  font-size: 1.15rem;
  white-space: nowrap;
}
.exercise {
  padding-bottom: 4rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.exercise .left-block {
  padding-bottom: 5rem;
  position: relative;
}
.exercise .title {
  color: #F49175;
  font-size: 1.35rem;
}
.exercise .content {
  color: #F49175;
}
.exercise .search_bar {
  margin-bottom: 3rem;
}
.exercise .search_bar .level_container {
  color: #F49175;
  font-size: 1.1rem;
  font-weight: bold;
}
.exercise .search_bar .level_container .level {
  color: #D0D0D0;
  font-size: 1rem;
  border-radius: 0.5rem;
  padding: 0.25rem 1rem;
  margin-left: 0.5rem;
}
.exercise .search_bar .level_container .level.active {
  background-color: #F49175;
  color: white;
}
.exercise .search_bar .category_container {
  color: #D0D0D0;
  font-weight: bold;
  margin-top: 0.5rem;
}
.exercise .search_bar .category_container .category {
  color: #D0D0D0;
}
.exercise .search_bar .category_container .category.active {
  color: #F49175;
}
.exercise .search_bar .random {
  color: #F49175;
}
.exercise .backbutton {
  position: absolute;
  left: 50%;
  bottom: 0;
  /*
         translate: -50% 0;
         */
  transform: translate(-50%, 0);
  color: #F49175;
  font-weight: bold;
  font-size: 1.15rem;
}
.exercise .backbutton .disabilitylevel {
  padding-left: 3rem;
  padding-right: 3rem;
  height: 5rem;
  border-radius: 10rem 10rem 0 0;
  background-color: #CA3838;
  position: relative;
}
.exercise .backbutton .disabilitylevel .disabilitylevel-text {
  position: absolute;
  left: 50%;
  top: 38%;
  /*
                 translate: -50% -20%;
                 */
  transform: translate(-50%, -20%);
  color: white;
  font-weight: bold;
  font-size: 1.15rem;
  white-space: nowrap;
  text-align: center;
}
.exercise .exercise-safety {
  color: #F49175;
}
.exercise .exercise-safety .orange-container {
  background-color: #F49175;
  color: white;
  border-radius: 10px;
  padding: 0.5rem 1rem;
}
.exercise .exercise-safety .orange-container .title {
  color: white;
}
.exercise .exercise-safety .orange-container .content {
  color: white;
  word-break: break-all;
}
.exercise .exercise-dashboard {
  color: white;
  background-color: #F49175;
  border-radius: 10px;
  padding: 0.5rem 1rem;
  margin-bottom: auto;
  margin-right: 0.5rem;
}
.exercise ol {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  column-gap: 2rem;
}
.exercise ol > li {
  break-inside: avoid;
}
.exercise ul li {
  list-style-type: disc;
}
.exercise .exercise-dashboard .underline {
  border-bottom: 2px solid white;
}
.dashboard .dashboard-container {
  /*
        .form-check-input:checked[type=checkbox]:after {
            content: url("data:image/svg+xml,%3Csvg width='19' height='15' viewBox='0 0 19 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.17793 12.8319L6.09967 13.8799L7.2522 15L8.32555 13.8078L7.17793 12.8319ZM0 7.95185L6.09967 13.8799L8.2562 11.784L2.15654 5.856L0 7.95185ZM8.32555 13.8078L19 1.9518L16.7047 0L6.03031 11.856L8.32555 13.8078Z' fill='%23454545'/%3E%3C/svg%3E%0A");
            position: absolute;
            left: 75%;
            top: 60%;
            translate: -50% -50%;
        }
        */
}
.dashboard .dashboard-container .icon {
  --width: 137px;
  position: relative;
}
.dashboard .dashboard-container .icon svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
  filter: drop-shadow(0px 5px 0px #A00028);
}
.dashboard .dashboard-container .icon .image {
  position: absolute;
  left: 50%;
  top: 50%;
  /*
                translate: -50% -50%;
                */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  width: calc(var(--width)*0.85);
  height: calc(var(--width)*0.85);
}
.dashboard .dashboard-container .icon .btn-upload {
  position: absolute;
  right: calc(50% - 70px);
  top: 20px;
  /*
                translate: -50% -50%;
                */
  transform: translate(-50%, -50%);
  filter: none;
}
.dashboard .dashboard-container .title {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.35rem;
  margin-bottom: 1rem;
}
.dashboard .dashboard-container .edit-btn {
  color: white;
  /*
            background-color: $main-orange;
            */
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  font-weight: 500;
  padding: 0.5rem;
}
.dashboard .dashboard-container .btn-leaderboard {
  border-radius: 26px;
  border: none;
  color: #D0D0D0;
  margin-bottom: 1rem !important;
}
.dashboard .dashboard-container .btn-check:active + .btn, .dashboard .dashboard-container .btn-check:checked + .btn, .dashboard .dashboard-container .btn.active, .dashboard .dashboard-container .btn.show, .dashboard .dashboard-container .btn:active {
  border: none;
  color: white;
  background-color: #F49175;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  /*
            filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
            */
}
.dashboard .dashboard-container .detail {
  color: #8B0000;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.dashboard .dashboard-container .detail input {
  font-weight: 400;
  border: 0;
  color: #8B0000;
}
.dashboard .dashboard-container .detail input:disabled {
  background-color: transparent;
}
.dashboard .dashboard-container .detail select {
  border: none;
  color: #8B0000;
  font-weight: 400;
}
.dashboard .dashboard-container .detail select:disabled {
  background-color: transparent;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.dashboard .dashboard-container .detail input[name="categories[]"] {
  display: inline-block;
}
.dashboard .dashboard-container .detail input[name="categories[]"] + label {
  display: inline-block;
  font-weight: 400;
  border: 0;
  color: #8B0000;
}
.dashboard .dashboard-container .detail input[name="categories[]"]:disabled {
  display: none;
}
.dashboard .dashboard-container .detail input[name="categories[]"]:disabled + label {
  display: none;
}
.dashboard .dashboard-container .detail input[name="categories[]"]:disabled:checked {
  display: none;
}
.dashboard .dashboard-container .detail input[name="categories[]"]:disabled:checked + label {
  display: inline-block;
}
.dashboard .dashboard-container .form-check-label {
  color: #454545;
  font-weight: bold;
}
.dashboard .dashboard-container .form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3Csvg width='19' height='15' viewBox='0 0 19 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.17793 12.8319L6.09967 13.8799L7.2522 15L8.32555 13.8078L7.17793 12.8319ZM0 7.95185L6.09967 13.8799L8.2562 11.784L2.15654 5.856L0 7.95185ZM8.32555 13.8078L19 1.9518L16.7047 0L6.03031 11.856L8.32555 13.8078Z' fill='%23454545'/%3E%3C/svg%3E%0A");
}
.dashboard .dashboard-container .form-check-input:checked {
  background-color: inherit;
  border-color: inherit;
  background-image: none;
}
.dashboard .dashboard-container .form-check-input {
  background-color: #E8E8E8 !important;
  border: 1px solid #9D9D9D;
  border-radius: 0;
  position: relative;
}
.dashboard .dashboard-container .form-check-input:disabled ~ .form-check-label, .dashboard .dashboard-container .form-check-input[disabled] ~ .form-check-label {
  cursor: default;
  opacity: 1;
}
.dashboard .dashboard-container .form-check-input:disabled {
  opacity: 1;
}
.dashboard .dashboard-container .btn-check:disabled + .btn, .dashboard .dashboard-container .btn-check[disabled] + .btn {
  opacity: 1;
}
.dashboard .dashboard-container .form-check {
  margin-bottom: 1rem;
}
.firstlogin {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.firstlogin .progressbar .progress {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  background: #DDDEDF;
  border-radius: 39px;
}
.firstlogin .progressbar .progress .progress-bar {
  background-color: #F49175;
}
.firstlogin .information {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  /*
         translate: 0 -50%;
         */
  width: 100%;
  left: 0%;
  padding-left: 3rem;
  padding-right: 3rem;
  /*
        .form-check-input:checked[type=checkbox]:after {
            content: url("data:image/svg+xml,%3Csvg width='19' height='15' viewBox='0 0 19 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.17793 12.8319L6.09967 13.8799L7.2522 15L8.32555 13.8078L7.17793 12.8319ZM0 7.95185L6.09967 13.8799L8.2562 11.784L2.15654 5.856L0 7.95185ZM8.32555 13.8078L19 1.9518L16.7047 0L6.03031 11.856L8.32555 13.8078Z' fill='%23454545'/%3E%3C/svg%3E%0A");
            position: absol            ute;
            left: 75%;
            top: 60%;
            translate: -50% -50%;
        }
        */
}
.firstlogin .information label {
  color: #454545;
  font-weight: bold;
  margin-bottom: 1rem;
}
.firstlogin .information input[type="text"] {
  box-shadow: 1px 4px 2px rgba(0, 0, 0, 0.25);
  background-color: #F9F9F9;
  border-radius: 39px;
  color: #454545;
  width: 80%;
  margin-bottom: 1rem;
}
.firstlogin .information select {
  background-color: #F9F9F9;
  color: #454545;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  border: 0;
  margin-left: 0.5rem;
  font-size: 1rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
}
.firstlogin .information .btn-checkbox {
  background-color: #F9F9F9;
  color: #454545;
  border-radius: 39px;
  box-shadow: 1px 4px 2px rgba(0, 0, 0, 0.25);
  border: 0px;
  margin-right: 0.5rem;
  padding: 0.5rem 1rem;
}
.firstlogin .information .btn-check:active + .btn, .firstlogin .information .btn-check:checked + .btn, .firstlogin .information .btn.active, .firstlogin .information .btn.show, .firstlogin .information .btn:active {
  background-color: #F49175;
  color: white;
}
.firstlogin .information .tab {
  display: none;
}
.firstlogin .information .tab.show {
  display: block;
}
.firstlogin .information .gender svg {
  height: 5rem;
  width: 5rem;
}
.firstlogin .information .declare {
  color: #454545;
  width: 100%;
  max-height: calc(var(--minheight) - 280px);
  overflow-y: scroll;
  margin-bottom: 1rem;
}
.firstlogin .information .invalid {
  background-color: #ffdddd !important;
}
.firstlogin .information .invalid ~ label {
  background-color: #ffdddd;
}
.firstlogin .information .form-check-label {
  color: #454545;
  font-weight: bold;
}
.firstlogin .information .form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3Csvg width='19' height='15' viewBox='0 0 19 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.17793 12.8319L6.09967 13.8799L7.2522 15L8.32555 13.8078L7.17793 12.8319ZM0 7.95185L6.09967 13.8799L8.2562 11.784L2.15654 5.856L0 7.95185ZM8.32555 13.8078L19 1.9518L16.7047 0L6.03031 11.856L8.32555 13.8078Z' fill='%23454545'/%3E%3C/svg%3E%0A");
}
.firstlogin .information .form-check-input:checked {
  background-color: inherit;
  border-color: inherit;
}
.firstlogin .information .form-check-input {
  background-color: #E8E8E8 !important;
  border: 1px solid #9D9D9D;
  border-radius: 0;
  position: relative;
}
.firstlogin .information .imageuploadicon {
  width: 2.5rem;
}
.firstlogin .information .image-container {
  position: relative;
}
.firstlogin .information .image-container .icon {
  width: 150px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  filter: drop-shadow(0px 5px 0px #A00028);
}
.firstlogin .information .image-container #uploadedimage {
  position: absolute;
  left: 50%;
  top: 50%;
  /*
                translate: -50% -50%;
                */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
}
.exercisedetail {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.exercisedetail .title {
  color: #F49175;
  font-weight: bold;
}
.exercisedetail .step {
  color: #F49175;
}
.exercisedetail .step-container {
  /*
        max-width: 110px; 
        */
}
.exercisedetail .step-container .step-image {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.exercisedetail .step-container .step-image img {
  width: auto;
  height: 100%;
}
.exercisedetail .step-container .dot {
  background-color: #F49175;
  border-radius: 50%;
  color: white;
  width: 2rem;
  height: 2rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
.exercisedetail .step-container .step-name {
  color: #F49175;
}
.exercisedetail .form .redo_title {
  color: #F49175;
  font-weight: 600;
}
.exercisedetail .form .redo_number {
  color: #F49175;
}
.exercisedetail .form .star-container {
  background-color: #FFDBCA;
  border-radius: 7px;
  padding: 1px 5px;
  display: flex;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.exercisedetail .form .star-container svg.active path {
  fill: #F49175;
}
.exercisedetail .form .selfscore-title {
  color: #F49175;
  font-weight: bold;
}
.exercisedetail .form .selfscore {
  color: #F49175;
  font-weight: bold;
}
.exercisedetail .form .selfscore input {
  background-color: #FFDBCA;
  border-radius: 7px;
  padding: 1px 5px;
  border: 0px;
  width: 3rem;
}
.exercisedetail .form .user-score {
  color: #F49175;
  font-weight: 600;
}
.exercisedetail .form .selfscore-notice {
  color: #F49175;
}
.exercisedetail .form .btn-submit {
  color: white;
  background-color: #F49175;
  padding: 1px 5px;
  font-weight: bold;
  border-radius: 7px;
}
.exercisedetail .exercisedetail-container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.exercisedetail .exercisedetail-container .btn-submit {
  margin-left: auto;
  margin-right: auto;
  font-size: 1.35rem;
  display: block;
}
.scorepage .name {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.35rem;
  text-align: center;
}
.scorepage .title {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.35rem;
}
.scorepage .total-title {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.scorepage .icon {
  --width: 137px;
  position: relative;
}
.scorepage .icon svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
  filter: drop-shadow(0px 5px 0px #A00028);
}
.scorepage .icon .image {
  position: absolute;
  left: 50%;
  top: 50%;
  /*
            translate: -50% -50%;
            */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  width: calc(var(--width)*0.85);
  height: calc(var(--width)*0.85);
}
.scorepage .progress {
  background-color: #E7E7E7;
  border-radius: 23px;
  --bs-progress-height: 1.5rem;
}
.scorepage .progress .progress-bar {
  background-color: #F49175;
  position: relative;
}
.scorepage .progress .progress-bar .text {
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 1.15rem;
}
.scorepage .game {
  display: flex;
}
.dashboardandscore .name {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.35rem;
  text-align: center;
}
.dashboardandscore .title {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.35rem;
}
.dashboardandscore .total-title {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.dashboardandscore .icon {
  --width: 137px;
  position: relative;
}
.dashboardandscore .icon svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
  filter: drop-shadow(0px 5px 0px #A00028);
}
.dashboardandscore .icon .image {
  position: absolute;
  left: 50%;
  top: 50%;
  /*
            translate: -50% -50%;
            */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  width: calc(var(--width)*0.85);
  height: calc(var(--width)*0.85);
}
.dashboardandscore .progress {
  background-color: #E7E7E7;
  border-radius: 23px;
  --bs-progress-height: 1.5rem;
}
.dashboardandscore .progress .progress-bar {
  background-color: #F49175;
  position: relative;
}
.dashboardandscore .progress .progress-bar .text {
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 1.15rem;
}
.dashboardandscore .game {
  display: flex;
}
.dashboardandscore .button-list {
  margin-bottom: 0.5rem;
}
.dashboardandscore .button-list .btn-list {
  margin-bottom: 0.5rem;
}
.dashboardandscore .button-list .btn-list + label {
  padding: 0.5rem 1rem;
  font-weight: bold;
  border-radius: 26px;
  margin-right: 0.5rem;
  color: #D0D0D0;
  background-color: transparent;
}
.dashboardandscore .button-list .btn-list + label svg {
  margin-left: 0.2rem;
  vertical-align: unset;
}
.dashboardandscore .button-list .btn-list:checked + label {
  color: white;
  background-color: #F49175;
}
.dashboardandscore .button-list .btn-list:checked + label path {
  fill: white;
}
.dashboardandscore .underline {
  border-bottom: 2px solid white;
  margin-bottom: 0.5rem;
}
.record .title {
  font-size: 1.35rem;
  font-weight: bold;
  color: var(--color, black);
}
.record .level {
  font-weight: bold;
  font-size: 1.15rem;
  color: var(--color, black);
}
.record svg path {
  fill: var(--color, black);
}
.record .category_container {
  color: #D0D0D0;
  font-weight: bold;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.record .category_container .category {
  color: #D0D0D0;
}
.record .category_container .category.active {
  color: var(--color, black);
}
.record .btn-more {
  color: #6F6F6F;
  font-weight: bold;
  border-radius: 7px;
  padding: 1px 5px;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  background-color: #E7E7E7;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.record #sport-table {
  border-radius: 5px;
  overflow: hidden;
  border: 0px;
  border-color: #F4F4F4;
  margin-bottom: 0.5rem;
}
.record #sport-table table, .record #sport-table td {
  border: 1px solid white;
  border-collapse: collapse;
  padding: 0.75rem 1rem;
}
.record #sport-table th {
  border: 1px solid white;
  border-collapse: collapse;
  padding: 0.5rem 1rem;
}
.record #sport-table thead {
  background-color: #D9D9D9;
  color: #6F6F6F;
}
.record #sport-table thead .sorting_asc, .record #sport-table thead .sorting_desc {
  background-color: var(--color, black);
  color: white;
}
.record #sport-table thead th {
  word-break: keep-all;
  /*
                border-width: 0px;
                padding: 5px;
                padding-right: 15px;
                */
}
.record #sport-table thead th:before, .record #sport-table thead th:after {
  right: 5px;
}
.record #sport-table tbody {
  background-color: #E7E7E7;
  color: #454545;
  font-weight: bold;
}
.record .progress {
  background-color: #E7E7E7;
  border-radius: 23px;
}
.record .progress .progress-bar {
  background-color: var(--color, black);
  position: relative;
}
.record .progress .progress-bar .text {
  color: white;
  text-align: center;
  font-weight: bold;
}
.record .btn-exel {
  color: white;
  background-color: var(--color);
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  font-weight: bold;
  border-radius: 23px;
  padding: 1px 5px;
  margin-bottom: 0.5rem;
}
.record .badges-title {
  font-size: 1.15rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: var(--color);
}
.record .badges-name {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: var(--color);
}
.record .btn-share {
  margin-bottom: 0.5rem;
  margin-left: auto;
  margin-right: auto;
}
.record .btn-share .share {
  color: var(--color);
  font-weight: bold;
}
.loginrecord .login_badge {
  font-size: 2rem;
}
.loginrecord .name {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.35rem;
  text-align: center;
}
.loginrecord .title {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.35rem;
}
.loginrecord .icon {
  --width: 137px;
  position: relative;
}
.loginrecord .icon svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
  filter: drop-shadow(0px 5px 0px #A00028);
}
.loginrecord .icon .image {
  position: absolute;
  left: 50%;
  top: 50%;
  /*
            translate: -50% -50%;
            */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  width: calc(var(--width)*0.85);
  height: calc(var(--width)*0.85);
}
.loginrecord .date-title {
  color: #F49175;
  font-weight: bold;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.loginrecord .underline {
  border-bottom: 2px solid white;
  margin-bottom: 1rem;
}
.loginrecord .badge-name {
  color: #F49175;
  font-weight: bold;
}
.loginrecord .daygraph-container {
  height: 350px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.badge {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: fit-content;
  position: relative;
  padding: 0.5rem;
  max-width: 17vw;
  /* Show the checkmark when checked */
  /* Style the checkmark/indicator */
}
.badge .text {
  position: absolute;
  /*
          translate: -50% -50%;*/
  transform: translate(-50%, -50%);
  top: 40%;
  left: 50%;
  color: white;
  font-weight: bold;
  font-size: 1.35rem;
  word-break: keep-all;
}
.badge .checkbox {
  opacity: 0;
}
.badge .checkbox.hidden ~ .checkmark {
  opacity: 0;
}
.badge .checkmark {
  position: relative;
  top: -0.5rem;
  left: 0;
  height: 1rem;
  width: 1rem;
  background-color: #eee;
  border-radius: 50%;
  background-color: #F49175;
}
.badge .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.badge input:checked ~ .checkmark:after {
  display: block;
}
.badge .checkmark:after {
  /*
        translate: -50% -50%;
        */
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #F9F9F9;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.fire {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: fit-content;
  position: relative;
}
.fire .text {
  position: absolute;
  /*
          translate: -50% -50%;*/
  transform: translate(-50%, -50%);
  top: 70%;
  left: 50%;
  color: white;
  font-weight: bold;
  font-size: 1.35rem;
  word-break: keep-all;
}
.fire svg {
  height: auto;
  width: calc(72/12*1rem);
}
.sportrecord .name {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.35rem;
  text-align: center;
  margin-bottom: 0.5rem;
}
.sportrecord .title {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.35rem;
}
.sportrecord .total-title {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.sportrecord .icon {
  --width: 137px;
  position: relative;
}
.sportrecord .icon svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
  filter: drop-shadow(0px 5px 0px #A00028);
}
.sportrecord .icon .image {
  position: absolute;
  left: 50%;
  top: 50%;
  /*
            translate: -50% -50%;
            */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  width: calc(var(--width)*0.85);
  height: calc(var(--width)*0.85);
}
.sportrecord .btn-filter + label {
  margin-bottom: 0.5rem;
  padding: 1px 5px;
  font-weight: bold;
  border-radius: 7px;
  margin-right: 0.5rem;
  color: #D0D0D0;
  background-color: transparent;
}
.sportrecord .btn-filter + label svg {
  margin-left: 0.2rem;
  vertical-align: unset;
}
.sportrecord .btn-filter:checked + label {
  color: white;
  background-color: #F49175;
}
.sportrecord .btn-filter:checked + label path {
  fill: white;
}
.sportrecord .filter-name {
  color: #F49175;
  font-weight: bold;
  margin-right: 0.5rem;
  padding: 1px 5px;
  vertical-align: middle;
  margin-bottom: 0.5rem;
}
.sportrecord .underline {
  border-bottom: 2px solid white;
  margin-bottom: 0.5rem;
}
.sportrecord .subfilter {
  margin-bottom: 0.5rem;
}
table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting_asc_disabled, table.dataTable thead > tr > th.sorting_desc_disabled, table.dataTable thead > tr > td.sorting, table.dataTable thead > tr > td.sorting_asc, table.dataTable thead > tr > td.sorting_desc, table.dataTable thead > tr > td.sorting_asc_disabled, table.dataTable thead > tr > td.sorting_desc_disabled {
  cursor: pointer;
  position: relative;
  padding-right: 26px;
}
table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_asc_disabled:after, table.dataTable thead > tr > td.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:after {
  position: absolute;
  display: block;
  opacity: 0.125;
  right: 10px;
  line-height: 9px;
  font-size: 0.8em;
}
table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:before {
  bottom: 50%;
  content: "▲";
  content: "▲"/"";
  color: white;
}
table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc_disabled:after, table.dataTable thead > tr > td.sorting_desc_disabled:after {
  top: 50%;
  content: "▼";
  content: "▼"/"";
  color: white;
}
table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_desc:after {
  opacity: 0.6;
}
.ranking .name {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.35rem;
  text-align: center;
  margin-bottom: 0.5rem;
}
.ranking .title {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.35rem;
}
.ranking .title .remark {
  font-size: 1rem;
  color: #F49175;
}
.ranking .total-title {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.ranking .icon {
  margin-bottom: 0.5rem;
  --width: 137px;
  position: relative;
}
.ranking .icon svg {
  margin-left: auto;
  margin-right: auto;
  display: block;
  filter: drop-shadow(0px 5px 0px #A00028);
}
.ranking .icon .image {
  position: absolute;
  left: 50%;
  top: 50%;
  /*
                translate: -50% -50%;
                */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  width: calc(var(--width)*0.85);
  height: calc(var(--width)*0.85);
}
.ranking #ranking-table, .ranking #rankingself-table {
  border-radius: 5px;
  overflow: hidden;
  border: 0px;
  border-color: #F4F4F4;
  margin-bottom: 1rem;
  --color: #F49175;
  text-align: start;
}
.ranking #ranking-table table, .ranking #ranking-table td, .ranking #rankingself-table table, .ranking #rankingself-table td {
  border: 1px solid white;
  border-collapse: collapse;
  padding: 0.75rem 1rem;
}
.ranking #ranking-table th, .ranking #rankingself-table th {
  border: 1px solid white;
  border-collapse: collapse;
  padding: 0.5rem 1rem;
}
.ranking #ranking-table thead, .ranking #rankingself-table thead {
  background-color: #D9D9D9;
  color: #6F6F6F;
}
.ranking #ranking-table thead .sorting_asc, .ranking #ranking-table thead .sorting_desc, .ranking #rankingself-table thead .sorting_asc, .ranking #rankingself-table thead .sorting_desc {
  background-color: var(--color, black);
  color: white;
}
.ranking #ranking-table thead th, .ranking #rankingself-table thead th {
  word-break: keep-all;
  /*
                padding-right: 15px;
                */
  background-color: var(--color, black);
  color: white;
}
.ranking #ranking-table thead th:before, .ranking #ranking-table thead th:after, .ranking #rankingself-table thead th:before, .ranking #rankingself-table thead th:after {
  right: 5px;
}
.ranking #ranking-table tbody, .ranking #rankingself-table tbody {
  background-color: #E7E7E7;
  color: #454545;
  font-weight: bold;
}
.ranking #ranking-table tbody td, .ranking #rankingself-table tbody td {
  vertical-align: top;
}
.ranking .ranking-title {
  color: #F49175;
  font-weight: bold;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}
.ranking .underline {
  border-bottom: 2px solid white;
  margin-bottom: 1rem;
}
.ranking .btn-exel {
  color: white;
  background-color: #43C6E8;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  font-weight: bold;
  border-radius: 23px;
  padding: 1px 5px;
  margin-bottom: 0.5rem;
}
.home {
  /*
     min-height: var(--minheight);
     */
  padding-left: 4rem;
  padding-right: 4rem;
  height: 100%;
}
.home .svg {
  max-width: 270px;
  height: auto;
  margin-bottom: 2rem;
}
.home .image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  width: 100%;
  height: auto;
}
.home .content {
  max-width: 560px;
  color: #454545;
  font-weight: bold;
  font-size: 1.15rem;
  margin-bottom: 1rem;
  text-align: center;
}
.home .content li {
  text-align: start;
}
.home .content ul {
  list-style-type: disc;
  margin-bottom: 1rem;
}
.home .content ol {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  column-gap: 2rem;
}
.home .content ol > li {
  break-inside: avoid;
}
.home .btn-signin {
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-bottom: 1rem;
}
.home .resetpassword {
  color: #F49175;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
}
.home .underline {
  border-bottom: 2px solid #C8C8C8;
  margin-bottom: 1rem;
}
.home label {
  color: #454545;
  font-weight: bold;
  margin-bottom: 0.25rem;
}
.home input[type="text"], .home input[type="email"] {
  box-shadow: 1px 4px 2px rgba(0, 0, 0, 0.25);
  background-color: #F9F9F9;
  border-radius: 39px;
  color: #454545;
  width: 100%;
  margin-bottom: 1rem;
}
.home textarea {
  box-shadow: 1px 4px 2px rgba(0, 0, 0, 0.25);
  background-color: #F9F9F9;
  border-radius: 20px;
  color: #454545;
  width: 100%;
  margin-bottom: 1rem;
}
.contactus {
  min-height: var(--minheight);
  padding-left: 4rem;
  padding-right: 4rem;
  height: 100%;
}
.contactus .title {
  font-size: 1.35rem;
  font-weight: bold;
  color: #454545;
}
.contactus .content {
  font-size: 1rem;
  font-weight: bold;
  color: #454545;
}
.contactus label {
  color: #454545;
  font-weight: bold;
  margin-bottom: 0.25rem;
}
.contactus input[type="text"], .contactus input[type="email"] {
  box-shadow: 1px 4px 2px rgba(0, 0, 0, 0.25);
  background-color: #F9F9F9;
  border-radius: 39px;
  color: #454545;
  width: 100%;
  margin-bottom: 1rem;
}
.contactus textarea {
  box-shadow: 1px 4px 2px rgba(0, 0, 0, 0.25);
  background-color: #F9F9F9;
  border-radius: 20px;
  color: #454545;
  width: 100%;
  margin-bottom: 1rem;
}
.safety {
  min-height: var(--minheight);
  padding-left: 4rem;
  padding-right: 4rem;
  height: 100%;
}
.safety .title {
  font-size: 1.35rem;
  font-weight: bold;
  color: #454545;
  margin-bottom: 0.5rem;
}
.safety .content {
  font-size: 1rem;
  color: #454545;
  width: 100%;
}
.safety .content ul {
  list-style-type: disc;
  margin-bottom: 1rem;
}
.safety .desktop-content li {
  text-align: start;
}
.safety .desktop-content ul {
  list-style-type: disc;
  margin-bottom: 1rem;
}
.safety .desktop-content ol {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  column-gap: 2rem;
}
.safety .desktop-content ol > li {
  break-inside: avoid;
}
.modal-backdrop.show {
  opacity: 0;
}
.modal_badge {
  z-index: 9999;
}
.modal_badge .modal-dialog {
  /*
        max-width: 150px;
        */
  max-width: 100vw;
  margin-right: auto;
  margin-left: auto;
}
.modal_badge .modal-dialog .badge-image {
  /*
             max-width: 150px;   
             */
}
.modal_badge .modal-content {
  border: 0px;
  background-color: rgba(69, 69, 69, 0.8);
}
.modal_badge .title {
  color: white;
  font-weight: bold;
  font-size: 2rem;
}
.badgerecord.htmltocanvas .badge.lock {
  display: none;
}
.badgerecord.htmltocanvas .fixed-height-40 {
  height: unset;
}
.badgerecord .fixed-height-40 {
  height: 40vw;
  overflow: auto;
}
.badgerecord .title {
  color: #8B0000;
  font-weight: bold;
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}
.badgerecord .underline {
  border-bottom: 2px solid white;
  margin-bottom: 1rem;
}
.badgerecord .badgerecord-title {
  color: #F49175;
  font-weight: bold;
  margin-bottom: 0.25rem;
}
.badgerecord .ul-style {
  list-style-type: disc;
  color: #F49175;
}
.badgerecord .levelbadge_container {
  max-width: 40vw;
}
.badgerecord .unlock {
  position: relative;
  margin-bottom: 1rem;
}
.badgerecord .unlock .black-mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  background: rgba(69, 69, 69, 0.8);
  border-radius: 10px;
}
.badgerecord .unlock .black-mask .text {
  color: white;
  font-weight: bold;
  font-size: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  /*
                translate: -50% -50%;
                */
  transform: translate(-50%, -50%);
}
.badgerecord .exercise_category-contianer {
  width: 20%;
}
.badgerecord .exercise_category-contianer .exercise-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.badgerecord .levelbadge-container, .badgerecord .categorybadge-container, .badgerecord .loginbadge-container {
  margin: -1.5rem;
  padding: 1.5rem;
}
.badgerecord .badge.lock img {
  filter: contrast(0);
}
#exercise_modal {
  background-color: rgba(69, 69, 69, 0.8);
}
#exercise_modal .modal-dialog {
  max-width: 300px;
  margin-right: auto;
  margin-left: auto;
}
#exercise_modal .modal-body {
  padding: 2rem 3rem;
}
#exercise_modal .modal-body * {
  margin-bottom: 0px;
}
.template_report {
  padding: 2rem;
}
.template_report .total-title {
  color: #454545;
  font-weight: bold;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.template_report .progress {
  background-color: #E7E7E7;
  border-radius: 23px;
  --bs-progress-height: 1.5rem;
  margin-bottom: 1rem;
}
.template_report .progress .progress-bar {
  background-color: #F49175;
  position: relative;
}
.template_report .progress .progress-bar .text {
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 1.15rem;
}
.template_report .underline {
  border-bottom: 2px solid #D0D0D0;
  margin-bottom: 1rem;
}
.radar {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 250px;
}
.levelup .level {
  font-weight: bold;
  color: #F49175;
  font-size: 1.35rem;
  margin-bottom: 1rem;
}
.levelup .color {
  font-weight: bold;
}
.levelup .black-mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  background: rgba(69, 69, 69, 0.8);
  border-radius: 20px;
}
.levelup .black-mask .text {
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  /*
            translate: -50% -50%;
            */
  transform: translate(-50%, -50%);
  writing-mode: vertical-lr;
  letter-spacing: 0.5rem;
}
.calendar-container {
  pointer-events: none;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 500px;
  /*
    pointer-events: none;
    */
}
.calendar-container .vanilla-calendar-day_selected-first .vanilla-calendar-day__btn_selected {
  /*x
        border-radius: 50%;
        */
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  color: white;
  background-color: #F3782D;
  position: relative;
}
.calendar-container .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn {
  background-color: #FDE4B5;
  color: #F3782D;
  border-radius: 0;
  width: 100%;
}
.calendar-container .vanilla-calendar-day__btn_selected.vanilla-calendar-day__btn_intermediate {
  background-color: #FDE4B5;
  color: #F3782D;
  /*
        border-top: 4px solid white;
        border-bottom: 4px solid white;
        */
}
.calendar-container .vanilla-calendar-day_selected-last .vanilla-calendar-day__btn_selected {
  /*
        border-radius: 50%;
        */
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  color: white;
  background-color: #F3782D;
}
.calendar-container .vanilla-calendar-day__btn_weekend, .calendar-container .vanilla-calendar-day__btn {
  color: #454545;
  font-weight: bold;
  font-size: 1.15rem;
}
.calendar-container .vanilla-calendar-day__btn_prev, .calendar-container .vanilla-calendar-day__btn_next {
  display: none;
}
.calendar-container .vanilla-calendar-week__day {
  color: #454545;
  font-weight: bold;
  font-size: 1.15rem;
}
.calendar-container .vanilla-calendar-day__btn_selected {
  color: white;
  background-color: #F3782D;
}
.calendar-container .vanilla-calendar-month {
  color: #F3782D;
}
.calendar-container .vanilla-calendar-years__year, .calendar-container .vanilla-calendar-months__month {
  color: #454545;
}
.calendar-container .vanilla-calendar-years__year_selected, .calendar-container .vanilla-calendar-months__month_selected {
  color: white;
  background-color: #F3782D;
}
.template_remainder {
  padding: 2rem;
}
.template_remainder .title {
  color: #454545;
  font-weight: 900;
  font-size: 2rem;
  text-align: center;
  max-width: 350px;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.template_remainder .content {
  color: #454545;
  font-size: 2rem;
  text-align: center;
  font-size: 1.35rem;
  max-width: 550px;
  margin-bottom: 2rem;
}
.template_badge {
  padding: 2rem;
}
.template_badge .title {
  color: #454545;
  font-weight: 900;
  font-size: 2rem;
  text-align: center;
  max-width: 350px;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.template_badge .content {
  color: #454545;
  font-size: 2rem;
  text-align: center;
  font-size: 1.35rem;
  max-width: 550px;
  margin-bottom: 2rem;
}
.template_badge .badge-image {
  width: 150px;
  margin-bottom: 2rem;
}
#exercise_success_modal .modal-dialog {
  max-width: 100vw;
}
#exercise_success_modal .modal-content {
  background-color: rgba(69, 69, 69, 0.8);
  border: 0px;
  color: white;
  font-weight: bold;
  text-align: center;
  font-size: 1.35rem;
}
.gameinstructiondetail {
  /*第一欄第一列：左上*/
  /*第一欄最後列：左下*/
  /*最後欄第一列：右上*/
  /*最後欄第一列：右下*/
}
.gameinstructiondetail .order-text {
  color: white;
  background-color: #F49175;
  font-weight: bold;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  font-size: 1.35rem;
}
.gameinstructiondetail table {
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
  --borderwidth:2px;
}
.gameinstructiondetail tbody, .gameinstructiondetail td, .gameinstructiondetail tfoot, .gameinstructiondetail th, .gameinstructiondetail thead, .gameinstructiondetail tr {
  border-width: var(--borderwidth);
  border-color: #F49175;
  padding: 0.5rem;
}
.gameinstructiondetail td:first-child {
  border-width: var(--borderwidth) var(--borderwidth) var(--borderwidth) calc(var(--borderwidth ) * 2);
}
.gameinstructiondetail td:last-child {
  border-width: var(--borderwidth) calc(var(--borderwidth ) * 2) var(--borderwidth) var(--borderwidth);
}
.gameinstructiondetail tr:first-child td {
  border-width: calc(var(--borderwidth ) * 2) var(--borderwidth) var(--borderwidth) var(--borderwidth);
}
.gameinstructiondetail tr:last-child td {
  border-width: var(--borderwidth) var(--borderwidth) calc(var(--borderwidth ) * 2) var(--borderwidth);
}
.gameinstructiondetail tr:first-child td:first-child {
  border-top-left-radius: 20px;
  border-width: calc(var(--borderwidth ) * 2) var(--borderwidth) var(--borderwidth) calc(var(--borderwidth ) * 2);
}
.gameinstructiondetail tr:last-child td:first-child {
  border-bottom-left-radius: 20px;
  border-width: var(--borderwidth) var(--borderwidth) calc(var(--borderwidth ) * 2) calc(var(--borderwidth ) * 2);
}
.gameinstructiondetail tr:first-child td:last-child {
  border-top-right-radius: 20px;
  border-width: calc(var(--borderwidth ) * 2) calc(var(--borderwidth ) * 2) var(--borderwidth) var(--borderwidth);
}
.gameinstructiondetail tr:last-child td:last-child {
  border-bottom-right-radius: 20px;
  border-width: var(--borderwidth) calc(var(--borderwidth ) * 2) calc(var(--borderwidth ) * 2) var(--borderwidth);
}
.gameinstructiondetail.home .content {
  max-width: 100vw;
  font-weight: 400;
}
.equipment {
  padding-bottom: 4rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.equipment .left-block {
  padding-bottom: 5rem;
  position: relative;
}
.equipment .category_container {
  color: #D0D0D0;
  font-weight: bold;
  margin-top: 0.5rem;
  margin-bottom: 3rem;
}
.equipment .category_container .category {
  color: #D0D0D0;
}
.equipment .category_container .category.active {
  color: #F49175;
}
.equipment #equipment_container .title {
  font-weight: bold;
  font-size: 1.25rem;
  color: #F49175;
}
.equipmentvideo {
  padding-bottom: 4rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.equipmentvideo .left-block {
  padding-bottom: 5rem;
  position: relative;
}
.equipmentvideo .category_container {
  color: #D0D0D0;
  font-weight: bold;
  margin-top: 0.5rem;
  margin-bottom: 3rem;
}
.equipmentvideo .category_container .category {
  color: #D0D0D0;
}
.equipmentvideo .category_container .category.active {
  color: #F49175;
}
.equipmentvideo #equipmentvideo_container .title {
  font-weight: bold;
  font-size: 1.25rem;
  color: #F49175;
}
.equipmentvideo #equipmentvideo_container .exercise_detail .image {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.equipmentvideo #equipmentvideo_container .exercise_detail .image iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.faq .faq-question {
  color: white;
  font-weight: bold;
  font-size: 1rem;
  background-color: #F49175;
  padding: 1rem;
  position: relative;
}
.faq .faq-question svg {
  margin-right: 0.5rem;
  width: 1rem;
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translate(0, -50%);
}
.faq .faq-question span {
  display: inline-block;
  padding-left: 3rem;
}
.faq .faq-question.show + .faq-answer {
  display: block;
}
.faq .faq-question.show svg {
  transition-duration: 0.5s;
  transform: translate(0, -50%) rotate(180deg);
}
.faq .faq-answer {
  display: none;
  background-color: #D9D9D9;
  padding: 1rem 4rem;
}
.faq .faq-answer .faq-answer-text {
  font-size: 1rem;
  font-weight: 700;
  color: #F49175;
  margin-bottom: 0.5rem;
}
.faq .faq-answer .faq-answer-image {
  /*
            max-width: 600px;
            */
  margin-bottom: 1rem;
}
.faq .faq-remark {
  font-weight: bold;
  margin-top: 2rem;
  margin-bottom: 5rem;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .faq .faq-answer {
    padding: 1rem 2rem;
  }
  .loginrecord .login_badge {
    width: 15%;
    font-size: 0.75rem;
  }
  .right-border-line {
    border-right: 0px;
  }
}
@media only screen and (min-width: 768px) {
  .exercisedetail .redosvg {
    width: 3rem;
    height: auto;
  }
  .exercisedetail .form .star-container {
    border-radius: 72px;
    padding: 0.5rem;
  }
  .exercisedetail .form .star-container svg {
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
  #modal_badge .modal-dialog {
    /*
            max-width: 400px;
            */
    max-width: 1000px;
  }
  #modal_badge .modal-dialog .badge-image {
    max-width: 400px;
  }
  #modal_badge .title {
    font-size: 2rem;
  }
  .exercisedetail .step-container .step-image {
    margin-left: 1rem;
    margin-right: 1rem;
    height: 150px;
  }
  .ranking #ranking-table, .ranking #rankingself-table, .record #sport-table {
    border-radius: 15px;
  }
  .dashboard .dashboard-container .icon {
    --width: 180px;
  }
  .calendar-container {
    width: 400px !important;
    height: 400px !important;
  }
  .calendar-container .vanilla-calendar-wrapper {
    height: 250px !important;
  }
  .calendar-container .vanilla-calendar-day__btn {
    padding: 1rem;
  }
  .calendar-container .vanilla-calendar-month {
    font-size: 1.35rem;
  }
  .badge {
    padding: 1rem;
  }
  html {
    font-size: 20px;
  }
  .home .row {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
  .home .content {
    max-width: 560px;
  }
  .home .svg {
    max-width: 400px;
  }
  .info-background {
    margin-left: 4rem;
    margin-right: 4rem;
  }
  .footer {
    height: 80px;
    padding: 0.5rem 2rem;
  }
  .footer .footer-logo img {
    height: 60px;
  }
  #layout-content {
    --minheight: calc(100vh - 80px - 120px);
  }
  .header {
    height: 120px;
    font-size: 0.6rem;
    color: #454545;
    font-weight: bold;
  }
  .header .main-item {
    margin: 0rem 0.25rem;
    padding: 0;
    color: #454545;
  }
  .header .btn-orange {
    color: white;
    padding: 0rem 0.25rem;
    font-size: 0.6rem;
  }
  .header .logo img {
    height: 100px;
  }
  .game {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .game .circular-chart {
    max-height: 210px;
  }
  .game .game-container:nth-child(3) {
    grid-area: unset;
  }
  .game .game-container:nth-child(4) {
    grid-area: 2 / 1 / 3 / 3;
  }
  .game .game-container:nth-child(5) {
    grid-area: 2 / 2 / 3 / 4;
  }
  .exercise, .equipmentvideo, .equipment {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .radar {
    height: 350px;
  }
  .hide-1200 {
    display: none;
  }
  #exercise_modal .modal-dialog {
    max-width: 600px;
  }
}
@media only screen and (min-width: 856px) {
  .header {
    font-size: 0.75rem;
  }
  .header .btn-orange {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 930px) {
  .game .circular-chart {
    max-height: 255px;
  }
}
@media only screen and (min-width: 980px) {
  .header .main-item {
    margin: 0rem 0.5rem;
  }
  .header .btn-orange {
    padding: 0rem 0.5rem;
  }
}
@media only screen and (min-width: 1050px) {
  .game .circular-chart {
    max-height: 285px;
  }
  .exercise .exercise-safety ol {
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
  }
  .badge {
    padding: 2rem;
  }
}
@media only screen and (min-width: 1160px) {
  .header {
    font-size: 1rem;
  }
  .header .btn-orange {
    font-size: 1rem;
  }
  .hide-1200 {
    display: block;
  }
  .radar {
    height: 450px;
  }
}
@media only screen and (min-width: 1380px) {
  .header .main-item {
    margin: 0rem 1rem;
  }
  .header .btn-orange {
    padding: 0rem 1rem;
  }
}