html, body {height: 100%;}
.form-check > * {cursor: pointer;}
.form-check-input:checked {
background-color: #f44336;
border-color: #f44336;
}
.form-check-input:focus {box-shadow: 0 0 0 .25rem rgb(244,67,54,.25);}
.muscles-body {
height: 580px;
padding: 2rem 4rem;
}
.muscles-body + .muscles-body {margin-top: -2rem;}
.female.muscles-body {width: 286px;}
.muscle-group {
color: #ebebeb;
transition: color 25ms ease-in-out;
}
.muscle-group:hover {
color: #fe5b7f;
cursor: pointer;
}
.loader {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 1;
}
.lds-ring {
display: inline-block;
position: relative;
width: 48px;
height: 48px;
margin: auto;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 48px;
height: 48px;
margin: 0px;
border: 2px solid #f44336;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
border-color: #f44336 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}      .error-page {
display: flex;
width: 100%;
height: 100%;
font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-size: 14px;
padding: 0;
margin: 0;
color: #999;
background-color: #eee;
}
.error-container {
display: flex;
flex-direction: column;
margin: auto;
}
.error-page h1 {
font-family: montserrat, sans-serif;
font-size: 90px;
font-weight: 900;
margin: auto auto 10px auto;
color: #ddd;
}
.error-page h2 {
font-family: montserrat, sans-serif;
font-size: 18px;
font-weight: 700;
margin: 5px auto;
}
.error-page p {
max-width: 240px;
font-weight: 400;
text-align: center;
margin: 5px auto;
}
.error-page a {
font-weight: 500;
text-decoration: none;
padding: 15px 30px;
margin: 20px auto 40px auto;
color: #aaa;
border-radius: 50em;
text-shadow: 0 -1px 0 rgb(12,13,18,.08), 0 1px 0 #fff;
box-shadow:
inset 1px 1px 1px #fff,
-2px -2px 2px rgba(255,255,255,.9),
-4px -4px 6px rgba(255,255,255,.9),
-8px -8px 16px rgba(255,255,255,.9),
-12px -12px 24px rgba(255,255,255,.9),
inset -1px -1px 1px rgba(12,13,18,.06 ),
2px 2px 2px rgba(12,13,18,.08),
4px 4px 6px rgba(12,13,18,.08),
8px 8px 16px rgba(12,13,18,.08),
12px 12px 24px rgba(12,13,18,.08);
}
.error-page a:focus,
.error-page a:active {
box-shadow:
1px 1px 1px #fff,
inset -2px -2px 2px rgba(255,255,255,.9),
inset -3px -3px 4px rgba(255,255,255,.9),
inset -6px -6px 12px rgba(255,255,255,.9),
inset -8px -8px 16px rgba(255,255,255,.9),
-1px -1px 1px rgba(12,13,18,.06),
inset 2px 2px 2px rgba(12,13,18,.08),
inset 3px 3px 4px rgba(12,13,18,.08),
inset 6px 6px 12px rgba(12,13,18,.08),
inset 8px 8px 16px rgba(12,13,18,.08);
}      .muscles-body-map {
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
}
.muscles-body-map .gender {
position: fixed;
justify-content: center;
padding: .25rem;
margin: 1rem 0;
background-color: #fff;;
box-shadow: 0 0 0 1px rgba(0,0,0,.11), 0 0 8px rgba(0,0,0,.33);
border-radius: 50em;
z-index: 1;
}
.muscles-body-map .gender .nav-link {
width: 80px;
font-size: .875rem;
padding: 4.5px 0;
color: #f44336;
background-color: #fff;
border: 1px solid #f44336;
}
.muscles-body-map .gender .nav-link.active {
color: #fff;
background-color: #f44336;
}
.muscles-body-map .gender .nav-item:first-child .nav-link {border-radius: 50em 0 0 50em;}
.muscles-body-map .gender .nav-item:last-child .nav-link {border-radius: 0 50em 50em 0;}
.muscles-body-map .tab-content {
width: 100%;
height: 100%;
background-color: #fafafa;
overflow: hidden;
}
.muscles-body-map .tab-content > .tab-pane {
height: 100%;
overflow-y: auto;
}
.muscles-body-map .tab-pane > .row {
height: 100%;
align-items: center;
justify-content: center;
padding: 3rem 0 0 0;
margin: 0;
}      .level-select > .container-fluid,
.equipment-select > .container-fluid {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
}
.option-select-row {
position: relative;
justify-content: center;
text-align: center;
padding: .5rem;
margin: 0;
box-shadow: 0 0 0 2px rgba(244,67,54,.22);
border-bottom: 1px solid #f44336;
z-index: 1;
}
.form-label-col {
width: 100%;
font-weight: bold;
padding: .5rem;
color: #f44336;
}
.option-select-row .form-check {
display: flex;
padding: 0 1rem;
margin: 0 0 .5rem 0;
border-right: 1px solid #ccc;
}
.option-select-row .form-check:last-child {border: none;}
.option-select-row .form-check .form-check-input {margin: auto 0;}
.option-select-row .form-check .form-check-label {padding: 0 0 0 .375rem}
.exercises-container {
position: relative;
height: 100%;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
}
.exercises-container > .container {padding: 0;}
.exercises-row {padding: .5rem;}
.exercise-card {
display: flex;
flex: 0 0 auto;
line-height: normal;
max-width: 304px;
padding: .5rem;
margin: 0 auto;
transition: opacity ease-in-out 200ms;
}
.exercise-card.hiding {opacity: 0;}
.exercise-card.hide {display: none;}
.exercise-card .card {
position: relative;
width: 100%;
border-radius: .5rem;
box-shadow: 0 0 0 2px rgba(244,67,54,.22);
border-color: #f44336;
overflow: hidden;
}
.exercise-card .card-body {
display: flex;
flex-direction: column;
padding: 1rem;
}
.exercise-card .card-image {border-bottom: 1px solid #ddd;}
.exercise-card .card-title {
font-size: 1rem;
font-weight: 800;
color: #f44336;
margin: 0 0 .5rem 0;
}
.exercise-card .data-group {
font-size: .875rem;
margin: 0 0 .25rem 0;
}
.exercise-card .data-group:last-of-type {margin-bottom: 0;}
.exercise-card .stretched-link {
display: flex;
text-decoration: none;
padding: 16px 0 0 0;
margin: auto 0 0 0;
cursor: pointer;
}
.exercise-card .stretched-link::after {
background-color: #fff;
opacity: 0;
transition: all ease-in-out 300ms;
}
.exercise-card .stretched-link:hover::after {opacity: .5;}
.exercise-card .stretched-link .link-icon {margin: auto 0;}
.exercise-card .stretched-link .link-title {
font-size: .875rem;
font-weight: 500;
white-space: nowrap;
margin: auto 0 auto .25rem;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.exercise-card .data-group .label {
font-weight: 800;
color: #000;
float: left; }
.action-row {
position: relative;
justify-content: center;
padding: .5rem;
margin: 0;
box-shadow: 0 0 0 2px rgba(244,67,54,.22);
border-top: 1px solid #f44336;
z-index: 1;
}
.action-row .btn {
width: auto;
padding: 4px 12px;
margin: 8px .375rem;
}      .result-page {
display: flex;
flex-direction: column;
line-height: normal;
color: #212529;
}
.result-page .option-select-row {padding: .875rem .5rem;}
.result-page .container-fluid {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.result-page .container-fluid .container {padding: .5rem;}
.result-page .container .row {
padding: 0;
margin: 0;
}
.result-page .container .row [class*="col"] {
padding: .5rem;
}
.video-aspc-ratio {
position: relative;
width: 100%;
height: 0;
padding: 0 0 56.25% 0;
}
.video-aspc-ratio iframe,
.video-aspc-ratio video,
.video-aspc-ratio .cover-image {
position: absolute;
width: 100%;
height: 100%;
}
.result-page .cover-image,
.result-page .exercise-video {
width: 100%;
border-radius: .75rem;
border: 1px solid #ddd;
}
.result-page .play-btn {
display: flex;
position: absolute;
width: 100%;
height: 100%;
color: #fff;
background: none;
text-shadow: 0 0 1px #000,0 0 1px #000,0 0 1px #000,0 0 1px #000,0 0 1rem #000,0 0 1rem #000;
border: none;
opacity: .66;
transition: opacity ease-in-out 300ms;
z-index: 1;
}
.result-page .play-btn:hover {opacity: .66;}
.result-page .play-btn .btn-icon {
height: 2rem;
margin: auto .25rem auto auto;
}
.result-page .play-btn .btn-label {
font-size: 1.25rem;
margin: auto auto auto 0;
}
.result-page .container .row .exercise-data {
line-height: normal;
padding: 0 .5rem 2rem .5rem;
}
.exercise-data .card-title {
font-weight: 800;
color: #f44336;
margin:  0 0 .25rem 0;
}
.exercise-data .data-group {margin: 0 0 .25rem 0;}
.exercise-data .data-group .label {
font-weight: 800;
color: #000;
}
.result-page .container .exercise-guide-text > [class*="col"]  {padding: 0 .5rem;}
ol.guide-text-list {
padding: 0;
margin: 0;
}
.guide-text-list li {
display: flex;
position: relative;
align-items: center;
min-height: 48px;
list-style: none;
list-style-type: none;
counter-increment: cntr;
padding: 0;
margin: .5rem 0 .5rem 3rem;
border-bottom: 1px solid rgba(244,67,54,.22);
}
.guide-text-list li::before  {
content: counter(cntr);
display: flex;
position: relative;
min-width: 2rem;
width: 2rem;
min-height: 2rem;
height: 2rem;
justify-content: center;
align-items: center;
margin: auto .75rem auto -3rem;
font-weight: 500;
text-align: center;
color: #f44336;
border: 1px solid #f44336;
border-radius: 50em;
}
.result-page .modal-content {
background: none;
border: none;
}
.result-page .modal-header {
color: #fff;
padding: 0;
margin: -1rem 0 0 0;
border: none;
z-index: 1;
}
.result-page .modal-header .close-btn {
position: relative;
width: 30px;
height: 30px;
margin: 0 -.25rem .5rem 0;
border-radius: 50em;
}
.result-page .modal-header .close-btn .line {
position: absolute;
width: 30px;
height: 2px;
top: 15px;
background-color: #fff;
}
.result-page .modal-header .close-btn .line.hor {transform: rotate(45deg);}
.result-page .modal-header .close-btn .line.ver {transform: rotate(-45deg);}
.result-page .modal-body {padding: 0;}
.result-page .modal-body .container {
display: flex;
height: 100%;
padding: 0;
}
.result-page .modal-body .video-aspc-ratio {
padding: 0 0 100% 0;
margin: auto;
}
.result-page .modal-body iframe {box-shadow: 0 0 0 2px rgba(255,255,255,.66), 0 0 1rem #000;}      @media (min-width: 375px) {
.equipment-select .option-select-row {padding: 1rem .5rem;}
.equipment-select .form-label-col {
width: auto;
padding: 0 .5rem;
margin: auto 0 auto auto;
}
.equipment-select .form-label-col::after {content: ':';}
.equipment-select .form-label-col + .col-auto {margin: auto auto auto -.5rem;}
}
@media (min-width: 390px) {
.muscles-body {height: 640px;}
.female.muscles-body {width: 325px;}
}
@media (min-width: 390px) {
.exercises-row .exercise-card {width: 50%;}
.exercises-row, .exercise-card {padding: .25rem;}
.exercise-card {margin: 0;}
.exercise-card .card-body {padding: .5rem;}
}
@media (min-width: 414px) {}
@media (min-width: 480px) {
.level-select .option-select-row {padding: 20px .5rem 19px .5rem;}
.level-select .option-select-row .form-check {margin: 0;}
.level-select .form-label-col {
width: auto;
padding: 0 .5rem;
}
.level-select .form-label-col::after {content: ':';}
.level-select .form-label-col + .form-check {padding-left: .25rem;}
}
@media (min-width: 576px) {
.result-page .modal-body .video-aspc-ratio {padding-bottom: 56.25%;}
}
@media (min-width: 637px) {
.muscles-body + .muscles-body {margin-top: 0;}
}
@media (min-width: 768px) {
.exercises-row, .exercise-card {padding: .5rem;}
.exercises-row .exercise-card {width: 33.3333333333%;}
.error-page p {max-width: 320px;}
.result-page .container .row .exercise-data {padding: .5rem;}
}
@media (min-width: 992px) {
.muscles-body {
height: 650px;
padding: 0 4rem;
}
.female.muscles-body {width: 365px;}
.exercises-row .exercise-card {width: 25%;}
.result-page .play-btn .btn-icon {height: 2.5rem;}
.result-page .play-btn .btn-label {font-size: 1.75rem;}
}
@media (min-width: 1200px) {
.error-page {font-size: 16px;}
.error-page h1 {
font-size: 230px;
margin-bottom: 30px;
}
.error-page h2 {font-size: 24px;}
.error-page a {margin: 40px auto 80px auto;}
.exercise-card .card-body {padding: 1rem;}
.result-page .play-btn {opacity: .44;}
.result-page .play-btn .btn-icon {height: 3rem;}
.result-page .play-btn .btn-label {font-size: 2rem;}
}
@media (min-width: 1400px) {
.exercises-row .exercise-card {width: 20%;}
}      .browser-support-info {
text-align: center;
margin: -1px 0 0 0;
}
.browser-support-info a {
line-height: 1.28625;
padding: .25rem 1rem;
color: #fff;
background-color: #969696;
border-radius: 0 0 .5rem .5rem;
}
.browser-support-info a:hover,
.browser-support-info a:first-child:hover {
color: #fff;
background-color: #6e6e6e;
}
.browser-support-info a:active,
.browser-support-info a:first-child:active {
color: #fff;
background-color: #9e9e9e;
border-color: #9e9e9e;
}
.footnote {
padding: 1rem;
font-size: 85%;
font-style: italic;
}
.test-page .loader {position: fixed;}