/*Authentication Modal*/

.fs-auth-modal {
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    font-family: levenim-regular;
    padding-block: 60px;
    box-sizing: border-box;
    overflow-y:auto;
}

    .fs-auth-modal::-webkit-scrollbar{
        display:none;
    }

.fs-auth-modal-content-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 60% 40%;
    grid-auto-rows: auto;
    margin: auto;
    background-color: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 36px;
    width: clamp(280px,70%,1800px);
    box-shadow: 0px 3px 78px #00000029;
    -webkit-box-shadow: 0px 3px 6px #00000029;
}

.login-by-mssidn-popup {
    width: clamp(280px,60%,1800px) !important;
}

.fs-auth-modal-close-btn {
    position: absolute;
    right: 25px;
    top: 25px;
    width: 35px;
    height: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
}

    .fs-auth-modal-close-btn:before,
    .fs-auth-modal-close-btn:after {
        content: '';
        position: absolute;
        height: 4px;
        width: 100%;
        background-color: var(--fs-black);
    }

    .fs-auth-modal-close-btn:before {
        transform: rotate(45deg);
    }

    .fs-auth-modal-close-btn:after {
        transform: rotate(-45deg);
    }

.fs-auth-modal-img {
    position:relative;
    height: 100%;
}

    .fs-auth-modal-img .fs-auth-modal-side-image {
        width:100%;
        height:100%;
        border-radius: 36px 0px 0px 36px;
    }

.fs-auth-modal-logo {
    width: clamp(250px,30%,500px);
    position: absolute;
    top: 15%;
    left: 15%;
}

.fs-modal-tip {
    position: absolute;
    left: 7%;
    bottom: 30%;
    width: clamp(250px,50%,500px);
    font-family: roboto-medium;
    font-size: clamp(20px,2vw,30px);
    color: var(--fs-white);
    text-align: center;
}

.fs-auth-modal-content {
    /*    flex-basis: 53%;
*/
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 40px;
    gap: 30px;
}

.fs-auth-modal-content-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: center;
    color: var(--fs-black);
}

.fs-login-logo {
    width:clamp(120px,20vw,240px);
    visibility:hidden;
}

    .fs-login-logo img{
        width:100%;
    }


.fs-auth-modal-content-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.fs-auth-modal-content-title {
    font-family: roboto-medium;
    font-size: clamp(20px,2vw,33px);
}

.fs-auth-modal-content-tip {
    font-size: 16px;
    opacity: 0.6;
}

/*Login*/

.fs-auth-modal-login {
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 25px;
}

.fs-auth-modal-login-title {
    width: 100%;
    text-align: center;
    color: black;
    font-weight: 600;
    font-family:roboto-light;
    font-size:clamp(12px,1vw,18px);
}

.fs-auth-modal-login-socials {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10%;
}

.fs-auth-modal-login-social-link {
    max-width: 55px;
}

.fs-auth-modal-login-separator {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
}

    .fs-auth-modal-login-separator:before {
        content: '';
        top:0;
        left:0;
        height: 1px;
        background-color: var(--fs-black);
        width: 100%;
        position: absolute;
        z-index: -1;
    }

    .fs-auth-modal-login-separator:after {
        content: 'Or';
        height: 20px;
        background-color: var(--fs-white);
        width: 20%;
        position: absolute;
        z-index: 0;
        text-align: center;
        font-family: roboto-medium;
        font-size: 16px;
        font-weight: 600;
    }

.fs-auth-modal-login-form, .fs-auth-modal-verify-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(15px,2vw,30px);
}

    .fs-auth-modal-login-form #fs-login-email,
    .fs-auth-modal-login-form #fs-login-password,
    .fs-auth-modal-login-form #fs-login-firstname,
    .fs-auth-modal-login-form #fs-login-lastname,
    .fs-auth-modal-login-form #fs-login-password-confirmation,
    .fs-auth-modal-login-form #email,
    .fs-auth-modal-login-form #password,
    .fs-auth-modal-login-form #firstname,
    .fs-auth-modal-login-form #lastname,
    .fs-auth-modal-login-form #confirmPassword,
    .fs-auth-modal-login-form #fs-login-otp,
    .fs-auth-modal-login-form #fs-register-age,
    .fs-auth-modal-login-form #fs-register-height,
    .fs-auth-modal-login-form #fs-register-weight,
    .fs-auth-modal-login-form #fs-auth-modal-verify-code {
        width: 100%;
        -webkit-appearance: none;
        box-shadow: 0px 0px 12px #00000029;
        -webkit-box-shadow: 0px 3px 6px #00000029;
        border-radius: 20px;
        border: none;
        padding: 10px 20px;
        font-family: roboto-medium;
        font-size: 16px;
        height: 80px;
        box-sizing: border-box;
    }

.fs-register-first-last-name {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.fs-login-remember-me {
    margin-bottom: 0 !important;
}

.fs-auth-modal-login-form #fs-login-firstname,
.fs-auth-modal-login-form #fs-login-lastname {
    flex: 1;
}

.fs-login-password-wrapper {
    position: relative;
    z-index: 0;
    width: 100%;
}

    .fs-login-password-wrapper #fs-login-password,
    .fs-login-password-wrapper #fs-login-password-confirmation {
        padding-right: 60px;
    }

.fs-login-show-password-btn {
    position: absolute;
    z-index: 1;
    width: 40px;
    height: 40px;
    right: 10px;
    top: 20px;
    border: none;
    cursor:pointer;
}

    .fs-login-password-wrapper:has(input[type="password"])
    .fs-login-show-password-btn {
        background: transparent url("/images/site/fs-password-eye.svg") no-repeat center;
    }

    .fs-login-password-wrapper:has(input[type="text"])
    .fs-login-show-password-btn {
        background: transparent url("/images/site/fs-pawwsord-eye-slashed.svg") no-repeat center;
    }

a.fs-login-forgot-password {
    font-family: roboto-medium;
    font-size: 16px;
    opacity: 0.6;
    color: var(--fs-black);
    width: 100%;
    text-align: end;
    justify-content: flex-end;
}

.fs-login-footer-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.fs-auth-modal-login-form:has(.fs-phone-input) .fs-login-footer-wrapper {
    justify-content: center;
}

    .fs-login-footer-wrapper label {
        margin-right: auto;
        font-size: 18px;
        opacity: 0.6;
        font-family: roboto-light;
    }

    .fs-login-footer-wrapper input[type="checkbox"] {
        width: 25px;
        height: 25px;
        border-radius: 6px;
    }

.fs-auth-modal-login-form .fs-primary-btn {
    background-color: var(--fs-blue);
    color: var(--fs-white);
}

.fs-login-register-cta {
    width: 100%;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    gap: 10px;
    font-family:roboto-medium;
}

a.fs-login-register-cta-link, a.fs-skip-and-register-link {
    text-decoration: underline;
    color: var(--fs-light-blue);
    font-family: roboto-light;
    font-size:clamp(14px,1.3vw,18px);
}

    a.fs-skip-and-register-link{
        margin-block:3%;
    }

    .fs-auth-modal-login-btn {
        width: clamp(120px,10vw,180px);
        background-color: var(--fs-dark-brown);
        font-family: roboto-light;
        font-size: clamp(16px,1.5vw,22px);
        color: var(--fs-white);
        border: none;
        border-radius: clamp(10px,1vw,16px);
        padding: clamp(5px,.8vw,15px) clamp(10px,1vw,20px);
        cursor:pointer;
    }

/*Register*/

.fs-auth-modal:has(.fs-auth-modal-register) .fs-auth-modal-logo,
.fs-auth-modal:has(.fs-auth-modal-register) .fs-modal-tip,
.fs-auth-modal:not(:has(.fs-auth-modal-register)) .fs-auth-modal-tip-image {
    display: none;
}

.fs-auth-modal-tip-image {
    position:absolute;
    bottom:20px;
    left:5%;
    width:50%;
    min-width:200px;
    max-width:400px;
}

    .fs-auth-modal:has(.fs-auth-modal-register) .fs-user-profile-picture-container {
        position: absolute;
        top: 12%;
        left: 15%;
        width: 120px;
    }

.fs-auth-modal-register {
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

    .fs-auth-modal-register .fs-login-footer-wrapper {
        justify-content: center;
    }

    .fs-auth-modal-register .fs-auth-modal-login-form {
        gap: 20px;
    }

.fs-login-register-cta {
    font-weight: 500;
}

/*Verify*/

.fs-auth-modal:has(.fs-auth-modal-verify-title) .fs-auth-modal-content-title {
    display:none;
}

.fs-auth-modal-verify {
    width: 80%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}

.fs-auth-modal-verify-title,
.fs-auth-modal-verify-tip {
    width: 100%;
    text-align: center;
    color: var(--fs-black);
    font-family: roboto-medium;
    font-size: clamp(18px,2vw,35px);
}

.fs-auth-modal-verify-tip {
    font-size: clamp(12px,1vw,16px);
    font-family: roboto-light;
}

.fs-auth-modal-verify-title {
    font-size: 35px;
    font-weight: 500;
}

.fs-auth-modal-verify .fs-auth-modal-login-form {
    gap: 30px;
}

a.fs-auth-modal-login-verification-resend-code-cta {
    text-decoration: underline;
    opacity: 0.4;
}

.fs-auth-modal-verify .fs-primary-btn {
    margin-top: 20px;
}

.fs-auth-modal-verify-time{
    font-family:roboto-bold;
    font-size:clamp(13px,1vw,17px);
    color:var(--fs-dark-purple);
}

.fs-auth-modal-verify-resend-code {
    border: none;
    background-color: transparent;
    text-decoration: underline;
    font-size: clamp(13px,1vw,17px);
    color:var(--fs-dark-brown);
    opacity: .3;
    font-family:roboto-light;
}

.fs-auth-modal-verify-wrong-email {
    display:flex;
    justify-content:center;
    gap:5px;
    font-size: clamp(13px,1vw,18px);
    font-family: roboto-bold;
}

    .fs-auth-modal-verify-wrong-email a {
        text-decoration: underline;
        color: var(--fs-light-blue);
    }

/*Phone Login*/
.fs-phone-login-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: 100%;
}
.fs-phone-input {
    width: 100%;
    padding: clamp(15px,1.5vw,30px);
    box-sizing: border-box;
    border-radius: clamp(10px,1vw,20px);
    -webkit-appearance: none;
    box-shadow: 0px 0px 12px #00000029;
    border: none;
}

.fs-auth-modal-content-body .iti {
    width: clamp(240px,24vw,350px);
    position: relative;
    font-family: roboto-medium;
}

.iti--allow-dropdown .iti__flag-container .iti__selected-flag,
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    border-radius: clamp(10px,1vw,20px) 0 0 clamp(10px,1vw,20px);
    background-color: rgb(103,57,69,.1);
}

.input-profile-labels {
    width: 100%;
    font-size: clamp(14px,1vw,20px);
    font-family: roboto-light;
    color: var(--fs-black);
    padding-inline:15px;
    box-sizing:border-box;
}

.fs-sub-title {
    text-align: center;
    text-decoration: underline;
    font-weight: normal;
    letter-spacing: 0px;
    color: #F5AF00;
    opacity: 1;
    font-size: 18px;
}

.fs-title-container {
    display: flex;
    align-items: center;
    width: 90%;
    gap: 33%;
}

@media screen and (max-width:1500px) {
    .fs-auth-modal-login, .fs-auth-modal-register {
        width: 90%;
    }

    .fs-auth-modal-content-wrapper {
        grid-template-columns: 60% 40%;
        width: clamp(280px,80%,1800px);
    }


    .login-by-mssidn-popup {
        width: clamp(280px,70%,1800px) !important;
    }


    .fs-auth-modal-login-form #fs-login-email,
    .fs-auth-modal-login-form #fs-login-password,
    .fs-auth-modal-login-form #fs-login-firstname,
    .fs-auth-modal-login-form #fs-login-lastname,
    .fs-auth-modal-login-form #fs-login-password-confirmation,
    .fs-auth-modal-login-form #fs-login-otp,
    .fs-auth-modal-login-form #fs-register-age,
    .fs-auth-modal-login-form #fs-register-height,
    .fs-auth-modal-login-form #fs-register-weight,
    .fs-auth-modal-login-form #fs-auth-modal-verify-code {
        height: 60px;
    }
}

@media screen and (max-width:1200px) {

    .fs-auth-modal-login, .fs-auth-modal-register {
        width: 60%;
    }

    .fs-auth-modal:has(.fs-auth-modal-register) .fs-user-profile-picture-container {
        position: relative;
        top:unset;
        left:unset;
        width: 100px;
    }

    .fs-auth-modal .fs-primary-btn {
        height: 50px;
        min-width: 140px;
        max-width: 200px;
        padding: 5px 20px;
        border-radius: 14px;
        font-size: 20px;
    }

    .fs-auth-modal-img {
        display: none;
    }

    .fs-login-logo {
        width: clamp(120px,20vw,240px);
        visibility: visible;
    }

    .fs-auth-modal-content-wrapper {
        display: block;
    }

    .fs-login-register-cta {
        justify-content: center;
    }
}

@media screen and (max-width:768px) {

    .input-profile-labels{
        display: unset;
        font-size: 10px;
    }

    .fs-auth-modal-content {
        padding: 30px;
        gap: 15px;
    }

    .fs-auth-modal-login-socials {
        gap: 10px;
    }

    .fs-auth-modal-login-social-link {
        max-width: 40px;
    }

    .fs-auth-modal-login-form #fs-login-email,
    .fs-auth-modal-login-form #fs-login-password,
    .fs-auth-modal-login-form #fs-login-firstname,
    .fs-auth-modal-login-form #fs-login-lastname,
    .fs-auth-modal-login-form #fs-login-password-confirmation,
    .fs-auth-modal-login-form #fs-login-otp,
    .fs-auth-modal-login-form #fs-auth-modal-verify-code {
        height: 50px;
    }

    .fs-login-show-password-btn {
        width: 30px;
        height: 30px;
        right: 10px;
        top: 10px;
    }

    .fs-auth-modal-login {
        width: 90%;
    }

    .fs-login-footer-wrapper label {
        margin: unset;
        margin-right: auto;
        font-size: 14px;
        opacity: 0.6;
    }

    .fs-auth-modal .fs-primary-btn {
        height: 40px;
        min-width: 100px;
        max-width: 160px;
        padding: 5px 10px;
        border-radius: 10px;
        font-size: 16px;
    }

    .fs-login-register-cta {
        font-size: 14px;
    }
}

@media screen and (max-width:480px) {

    .fs-auth-modal-content-wrapper {
        width: 95%;
    }

    .fs-auth-modal-login, .fs-auth-modal-register {
        width: 100%;
    }

}

/*Workout Progress*/

.fs-my-progress-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding-top: max(65px,8%);
    background: transparent url(/images/site/fs-categories-bg.png) no-repeat left 65px;
    background-size: 50%;
    min-height: 100vh;
    padding-inline: clamp(15px,6vw,120px);
}

.fs-workout-progress-tiles-container {
    display: flex;
    flex-direction: column;
    gap: clamp(15px,1vw,20px);
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding-inline: clamp(15px,6vw,120px);
}

.fs-workout-progress-tile {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--fs-dark-purple);
    padding: clamp(8px,1vw,25px);
    gap: clamp(10px,1vw,20px);
    box-sizing: border-box;
    border-radius: clamp(15px,2vw,31px);
}

.fs-workout-progress-image {
    width: clamp(100px,12vw,200px);
    height: clamp(80px,12vw,170px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    min-width: 100px;
    justify-content: flex-start;
    align-items: center;
}

    .fs-workout-progress-image img {
        border-radius: 20px;
    }

.fs-workout-progress-details-wrapper {
    flex:1;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap:15px;
}

.fs-workout-progress-bar-and-title-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: clamp(80px,8vw,150px);
    min-width: 178px;
}

.fs-workout-progress-bar-title {
    margin-top: auto;
    color: var(--fs-white);
    font-size: clamp(14px,1.5vw,25px);
    width: 95%;
}

.fs-workout-progress-bar-wrapper {
    width: 100%;
    height: clamp(15px,2vw,30px);
    border-radius: 28px;
    border: 1px solid #707070;
    background-color: var(--fs-white);
    margin-bottom: auto;
}

    .fs-workout-progress-bar-wrapper > div {
        position: relative;
        display: block;
        background-color: var(--fs-orange);
        height: 100%;
        width: 100%;
        border-radius: 28px;
        font-family: roboto-medium;
        font-size:18px;
        text-align: center;
    }

        .fs-workout-progress-bar-wrapper > div:after {
            content: attr(data-value)'';
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--fs-white);
            width: 100%;
            height: 100%;
        }

.fs-workout-progress-bar-status-wrapper {
    height:100%;
    padding-top: 10px;
}

    /*.fs-workout-progress-bar-status-wrapper:has(button) {
        padding-top: 30px;
    }*/

    .fs-workout-progress-bar-status-wrapper .fs-primary-btn{
        margin-top:25px;
    }

    .fs-workout-progress-bar-status-completed {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: var(--fs-white);
        font-size: clamp(14px,1vw,22px);
        font-family: roboto-medium;
        width: clamp(80px,8vw,200px);
        height: clamp(40px,6vw,100px);
        gap: 10px;
        margin-right: 15px;
    }

    .fs-workout-progress-bar-status-completed img {
        width: clamp(10px,1.8vw,20px);
    }


.fs-workout-progress-tile-star {
    position: absolute;
    right: 20px;
    top: 20px;
    width: clamp(20px,2vw,40px);
}

/*Edit Profile*/

.fs-edit-profile-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding-top: max(65px,8%);
    padding-bottom:40px;
    background: transparent url("/images/site/fs-categories-bg.png") no-repeat left 65px;
    background-size: 50%;
}

.fs-user-profile-picture-container {
    --size: clamp(80px,6vw,140px);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--size);
    height:var(--size);
    border-radius: 50%;
    border: 4px solid var(--fs-dark-purple);
}

.fs-user-edit-profile-picture {
    --size: 30px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: transparent;
    border: none;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    padding:0;
}

.fs-user-profile-picture-container img {
    width: 100%;
    border-radius: 50%;
}


.fs-user-profile-form{
    width:clamp(250px,25%,400px);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    gap:15px;
    margin-top:clamp(20px,2vw,40px);
}

    .fs-user-profile-form input:not([type="submit"]) {
        width: 100%;
        background-color: var(--fs-white);
        border-radius: clamp(12px,1vw,20px);
        -webkit-appearance: none;
        box-shadow: 0px 0px 12px #00000029;
        border: none;
        padding: clamp(15px,1vw,25px) clamp(15px,1.5vw,30px);
        box-sizing: border-box;
        font-family: roboto-light;
        font-size: clamp(14px,1vw,20px);
    }

        .fs-user-profile-form input:focus{
            border:2px solid var(--fs-dark-purple);
        }

        .fs-categories-container {
        }

.fs-user-profile-form-title {
    width:100%;
    text-align:start;
    font-size: clamp(18px,1.3vw,25px);
}

.fs-user-profile-form input[type="submit"] {
    width: clamp(150px,40%,300px);
    border-radius: clamp(12px,1vw,16px);
    color: var(--fs-white);
    background-color: var(--fs-dark-brown);
    font-family: roboto-medium;
    font-size: clamp(18px,1.3vw,25px);
    border: none;
    padding: clamp(5px,1vw,15px) clamp(10px,1.5vw,25px);
    box-sizing: border-box;
}

.fs-user-profile-anchor {
    font-family: roboto-medium;
    font-size: clamp(18px,1.3vw,25px);
    color: var(--fs-light-blue);
    text-decoration: underline;
    margin-block: clamp(15px,1.5vw,30px);
}

.fs-edit-profile-sub-plans-message{
    width:60%;
    min-width:250px;
    padding-inline:15px;
    color:var(--fs-dark-purple);
    font-size:clamp(18px,2vw,33px);
    text-align:center;
    font-family:roboto-medium;
    margin-bottom:20px;
}

.fs-edit-profile-container:not(:has(.swiper)) .fs-sub-plan-card {
    width: clamp(250px,20%,500px);
    -webkit-appearance: none;
    box-shadow: 0px 0px 10px #0000004D;
    height: fit-content;
}

.fs-edit-profile-container:has(.fs-user-profile-form) .fs-primary-btn {
    margin-top: clamp(15px,1.5vw,30px);
}

.fs-user-profile-current-plan-vas-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: clamp(15px,2vw,40px);
    gap: clamp(10px,1vw,20px);
}

.fs-sub-info-container {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 20px;
    font: normal normal normal 17px/22px Roboto;
}
.fs-sub-info-item {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
}

.fs-sub-title {
    color: var(--fs-orange);
}

.fs-my-sub-footer {
    position: absolute;
    bottom: 50px;
    width: 30%;
}
@media screen and (max-width:768px) {
    .fs-workout-progress-tiles-container {
        padding-inline: unset;
    }
    .fs-workout-progress-bar-status-wrapper .fs-primary-btn {
        height: clamp(25px,2vw,50px);
        padding: 5px 15px;
        font-size: clamp(13px,2vw,25px);
        margin-top: 20px;
    }

    .fs-workout-progress-bar-wrapper > div {
        font-size: 12px;
    }

    .fs-sub-info-container{
        width: 90%;
    }
}

@media screen and (max-width:480px) {
    .fs-workout-progress-details-wrapper{
        gap:0;
    }

        .fs-workout-progress-details-wrapper .fs-primary-btn{
            margin-inline:auto;
        }

        .fs-workout-progress-bar-status-wrapper, .fs-workout-progress-bar-status-wrapper:has(button) {
            flex: 1;
            display: flex;
            padding: unset;
        }

    .fs-workout-progress-image {
        width: clamp(70px,12vw,200px);
        border-radius: 20px;
        min-width: unset;
        min-height:100%;
    }

    .fs-workout-progress-bar-and-title-wrapper {
        min-width: 100%;
    }

    .fs-workout-progress-bar-status-wrapper .fs-primary-btn {
        margin-top: unset;
    }

    .fs-workout-progress-tile-star {
        right: 10px;
        top: 10px;
    }
}