lightspeeddevelopment/lsx-health-plan

View on GitHub
assets/css/scss/partials/_single-plan.scss

Summary

Maintainability
Test Coverage
// Single Plan

.plan-template-default,
.recipe-template-default {
    .content-area,
    .widget-area {
        margin-top: 4.5rem;
    }
}
.single:not(.single-post) {
    .content-area {
        margin-top: 4.25rem;
    }
}
.plan-template-default {
    &.parent-plan-page {
        background-color: white;
    }
    #main {
        &.parent-plan {
            max-width: 1140px;
            margin-left: auto;
            margin-right: auto;
            // .plan-content {
            //     @include media('>=phone') {
            //         margin-bottom: 2.4rem;
            //     }
            // }
            > .post-wrapper {
                > .plan {
                    clear: both;
                }
            }
        }
    }
}

#single-plan-nav {
    margin-bottom: 15px;
    clear: both;
    .nav.nav-pills {
        @media (max-width: 600px) {
            width: 100vw;
            margin-left: -15px;
            margin-top: -55px;
            height: 100%;
            display: flex;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            box-shadow: 0px 3px 7px rgba(155, 155, 155, 0.4);
            &::-webkit-scrollbar {
                width: 1px;
                height: 5px;
                background-color: $white;
            }
            &::-webkit-scrollbar-thumb {
                background-color: $blue;
            }
        }
        @media (max-width: 319px) {
            margin-top: -44px;
        }
        li {
            @media (max-width: 600px) {
                //width: 100%;
                margin: 0;
                width: 28%;
                flex-shrink: 0;
                height: 100%;
                scroll-snap-align: start;
                display: flex;
                padding-right: 2px;
                &:not(.active) {
                    a {
                        opacity: 0.7;
                    }
                }
            }
            @media (max-width: 333px) {
                min-height: 90px;
            }
            &.active {
                svg {
                    g {
                        path {
                            stroke: white !important;
                        }
                        circle {
                            fill: white !important;
                        }
                    }
                }
            }
            a {
                border-radius: 0;
                background: $white;
                font-family: 'Lora', serif;
                font-weight: bold;
                font-size: 18px;
                color: $gray;
                padding: 15px 35px;
                display: flex;
                @media (max-width: 600px) {
                    font-size: 13px;
                    width: 100%;
                    padding: 15px;
                    flex-direction: column;
                    text-align: center;
                }
                &.overview-tab {
                    svg {
                        position: relative;
                        top: 5px;
                    }
                }
                &.workout-tab {
                    svg {
                        max-width: 28px;
                    }
                }
                svg {
                    margin-right: 15px;
                    @media (max-width: 600px) {
                        margin: 0 auto;
                        width: 100%;
                        height: 20px;
                    }
                }
                &:hover {
                    svg {
                        g {
                            path {
                                stroke: white !important;
                            }
                            circle {
                                fill: white !important;
                            }
                        }
                    }
                    &.workout-tab {
                        svg {
                            g {
                                fill: white !important;
                            }
                        }
                    }
                    &.warm-up-tab,
                    &.recipes-tab {
                        svg {
                            g {
                                fill: white !important;
                            }
                            path {
                                stroke: transparent !important;
                            }
                            circle {
                                fill: transparent !important;
                            }
                        }
                    }
                }
            }
            &.active,
            &:hover {
                a {
                    background: $blue;
                    color: $white;
                }
                .warm-up-tab,
                .recipes-tab {
                    svg {
                        g {
                            fill: white !important;
                        }
                        path {
                            stroke: transparent !important;
                        }
                        circle {
                            fill: transparent !important;
                        }
                    }
                }
            }
        }
    }
}

.warmup-container {
    article {
        .entry-content {
            padding: 0 0 3rem 0;
            .warmup-content {
                > * {
                    padding: 1rem 3rem;
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
                .single-plan-section-title {
                    display: flex;
                    padding: 1rem 3rem;
                    align-items: center;
                    margin-bottom: 0;
                    h2 {
                        margin: 0;
                    }
                    svg {
                        margin-right: 15px;
                    }
                }
                .workout-instructions {
                    padding: 1rem 3rem;
                    .content-intro {
                        p {
                            margin: 0;
                        }
                    }
                }
                .sets {
                    .set-box {
                        &.set {
                            margin: 0;
                        }
                    }
                }
            }
        }
    }
}

article.type-plan,
article.type-meal,
article.type-workout {
    .entry-content {
        padding: 0;
        clear: both;
        .overview {
            padding: 3rem;
        }
        .workout-content,
        .recipes-content,
        .meal-content,
        .main-plan-content {
            .single-plan-section-title {
                display: flex;
                padding: 1rem 3rem;
                align-items: center;
                h2 {
                    margin: 0;
                }
                svg {
                    margin-right: 15px;
                }

                .lsx-sharing-content {
                    margin-left: auto;
                }
            }
            .workout-instructions {
                padding: 1rem 3rem;
                .content-intro {
                    p {
                        margin: 0;
                    }
                }
                > .row {
                    > .col-md-12 {
                        display: flex;
                        @media (max-width: 767px) {
                            flex-direction: column;
                        }
                        .content-intro {
                            width: 100%;
                            @media (min-width: 768px) {
                                width: 63%;
                                padding-right: 1rem;
                            }
                        }
                        .tip-row {
                            width: 100%;
                            margin-bottom: 3rem;
                            @media (min-width: 768px) {
                                width: 37%;
                            }
                            #lsx-tips-shortcode {
                                margin-top: 0;
                            }
                        }
                    }
                }
            }
            .sets {
                .set-box {
                    &.set {
                        margin: 0;
                    }
                    &.entry-content {
                        display: flex;
                        align-items: end;
                        #lsx-tips-shortcode {
                            min-width: 330px;
                        }
                    }
                }
            }
        }
        .main-plan-content {
            .plan {
                .set-box {
                    background: white;
                    padding: 0px 8px 0 8px;
                    margin-bottom: 0;
                    @include media('>=tablet') {
                        padding: 30px 20px 0 20px;
                        display: flex;
                        align-items: end;
                        justify-content: space-between;
                    }
                }
                .plan-top-content {
                    width: 100%;
                }
                #hp-connected-members {
                    padding-top: 2rem;
                }
                @include media('>=tablet') {
                    .the-content {
                        padding-right: 4rem;
                    }
                    #hp-connected-members {
                        padding: 0;
                    }
                    #lsx-tips-shortcode {
                        margin-top: 0;
                        margin-left: 50px;
                    }
                }
                .my-plan-title {
                    padding: 20px 20px 0;
                    font-weight: bold;
                    margin-bottom: 0;
                }
                .the-plan-content {
                    padding: 20px;
                    .progress {
                        margin-top: 1rem;
                        margin-bottom: 3rem;
                        display: block;
                    }
                    .daily-plan-block {
                        &.week-grid {
                            .week-row {
                                @include media('>=tablet') {
                                    padding: 0 4rem;
                                }
                            }
                        }
                    }
                }
            }
        }
        .meal-content {
            .meals {
                .set-box {
                    background: white;
                    padding: 0px 8px 0 8px;
                    margin-bottom: 0;
                    @include media('>=tablet') {
                        padding: 30px 20px 0 20px;
                        display: flex;
                        align-items: end;
                        justify-content: space-between;
                    }
                    .the-content {
                        @include media('>=tablet') {
                            padding-right: 4rem;
                        }
                        #hp-connected-members {
                            padding: 0;
                        }
                    }
                    #lsx-tips-shortcode {
                        margin-top: 0;
                        width: 100%;
                        @include media('>=tablet') {
                            max-width: 345px;
                        }
                    }
                }
                .meals-section-title {
                    padding: 40px 20px 0;
                    font-weight: bold;
                }
                // .btn-shopping {
                //     margin: 0 2rem 3rem;
                //     @media (max-width: 767px) {
                //         width: 95%;
                //         margin-top: 5rem;
                //     }
                //     @media (min-width: 1024px) {
                //         float: right;
                //         position: relative;
                //         top: -6.5rem;
                //         margin-right: 2rem;
                //         margin-bottom: -6.5rem;
                //     }
                // }
                .eating-row {
                    padding: 2rem 1rem 3rem;
                    margin: 0;
                    .eating-column {
                        @include media('>=tablet') {
                            border-right: 3px solid rgba(65, 138, 208, 0.1);
                        }
                        &:last-child {
                            border: none;
                        }
                        .content-box {
                            background: transparent;
                            padding-top: 0;
                            padding-bottom: 0;
                            .eating-title {
                                margin-bottom: 10px;
                            }
                        }
                        .recipes {
                            margin: 0 15px;
                            .row.eating-row {
                                padding: 0;
                            }
                            .recipe-column {
                                background: white;
                            }
                            tr {
                                display: flex;
                                &:before {
                                    font-family: FontAwesome;
                                    margin-right: 5px;
                                    color: $blue;
                                    font-size: 12px;
                                }
                            }
                            .serves {
                                &:before {
                                    content: '\f0f5';
                                }
                            }
                            .prep-time {
                                &:before {
                                    content: '\f017';
                                }
                            }
                            .cooking-time,
                            .portion-size {
                                display: none;
                            }
                        }
                    }
                }
                .set-box.entry-content {
                    + .eating-row {
                        margin: 3rem 0 0 0;
                    }
                }
            }
        }
        .workout-content {
            .single-plan-section-title {
                margin-bottom: 0;
            }
        }
    }
}

.my-plan-container {
    .lsx-container-content {
        padding: 10px 2em;
        .lsx-block-container {
            .lsx-container-content {
                padding: 15px 10px;
            }
        }
    }
}

@media (max-width: 600px) {
    #edit-account-tab {
        padding: 0 10px 20px;
        margin-top: 0px;
        margin-top: -45px;
    }
    .wp-block-cover {
        + #edit-account-tab {
            margin-top: 0;
        }
    }
}

.woocommerce-edit-account {
    .wp-block-lsx-blocks-lsx-banner-box {
        min-height: 200px;
    }
    .lsx-banner-image-wrap {
        img {
            min-width: 100%;
            min-height: 200px;
            object-fit: cover;
            @media (max-width: 600px) {
                min-height: 440px;
            }
        }
    }
}

.menu-my-account.lsx-block-container.alignfull {
    @media (max-width: 600px) {
        .lsx-container-content {
            padding: 0em 3em 1em;
        }
    }
}

.archive-plan,
.all-plans-block {
    .row {
        display: flex;
        flex-wrap: wrap;
        .lsx-slot {
            .plan-feature-img {
                .featured-plan {
                    position: absolute;
                    margin: 1rem;
                }
                img {
                    width: 100%;
                    height: 180px;
                    max-height: 180px;
                    object-fit: cover;
                }
            }
        }
    }
}
.post-type-archive-workout {
    .row {
        .lsx-slot {
            .workout-feature-img {
                .featured-workout {
                    position: absolute;
                    margin: 1rem;
                }
            }
        }
    }
}
.post-type-archive-meal {
    .row {
        .lsx-slot {
            .meal-feature-img {
                .featured-meal {
                    position: absolute;
                    margin: 1rem;
                }
            }
        }
    }
}
.post-type-archive-recipe,
.tax-recipe-type,
.tax-recipe-cuisine {
    .bottom-single-recipe {
        margin-top: 4.25rem;
        margin-bottom: -8.4rem;
    }
}

.single-plan,
.archive-plan,
.lsx-exercises-shortcode,
.single-workout,
.single-meal {
    .entry-content,
    .tab-content-plan {
        background: $white;
        padding: 0;
        @media (max-width: 992px) {
            padding: 15px 10px;
        }
    }
    .back-plan-btn {
        margin-top: 4.25rem;
        @include media('<custom') {
            margin-top: 2.4rem;
            .btn {
                width: 100%;
                margin-bottom: 2.4rem;
            }
        }
        .btn-shopping {
            @include media('>phone') {
                margin-left: 2rem;
            }
        }
    }
    .extra-title {
        span {
            color: $blue;
            font-weight: bold;
        }
    }
    .box-shadow {
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.24);
    }
    .btn-full {
        width: 100%;
    }
    .sets {
        .set-box.set {
            padding: 3rem;
            margin-bottom: 0;
        }
        .set-title {
            font-family: 'Noto Sans';
            text-transform: uppercase;
            color: $blue;
        }
        .set-content,
        .set-table,
        .set-list,
        .set-grid {
            font-size: 16px;
            color: #222222;
        }

        .set-table {
            .workout-table {
                tr {
                    th {
                        border-bottom: 2px solid $blue;
                        padding: 5px 0;
                    }
                    td {
                        border-bottom: 1px solid #e1e1e1;
                        padding: 20px 0;
                        &.video-button-item {
                            button {
                                background-color: transparent;
                                border: none;
                                .fa {
                                    font-size: 40px;
                                    color: $blue;
                                }
                                &:hover {
                                    .fa {
                                        color: $yellow;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .set-list,
        .set-grid {
            .workout-list,
            .workout-grid {
                article {
                    margin-bottom: 19px;
                    background-color: white;
                    margin: 1.5rem 0;
                    h3 {
                        margin-top: 15px;
                        margin-bottom: 15px;
                        flex-direction: column;
                        display: flex;
                        @include media('<=phone') {
                            margin-top: 0;
                        }
                        a {
                            display: flex;
                            flex-direction: column;
                            color: #434343;
                        }
                    }
                    .reps {
                        font-size: 15px;
                        color: #434343;
                        text-transform: uppercase;
                        font-family: 'Noto Sans', sans-serif;
                        font-weight: bold;
                        margin-top: 10px;
                        &:before {
                            content: '\f01e';
                            font-family: FontAwesome;
                            margin-right: 1rem;
                            color: $blue;
                            font-size: 20px;
                            font-weight: 200;
                        }
                    }
                    .btn {
                        &:after {
                            content: '\f105';
                            font-family: FontAwesome;
                            margin-left: 1rem;
                        }
                        @media (max-width: 600px) {
                            width: 100%;
                        }
                    }
                }
            }
        }
        .set-list {
            .workout-list {
                article {
                    @include media('<tablet') {
                        padding: 15px;
                    }
                    > .row {
                        @include media('>=tablet') {
                            display: flex;
                            align-items: center;
                        }
                    }
                    .col-md-2 {
                        @include media('<=phone') {
                            display: none;
                        }
                        .exercise-feature-img {
                            a {
                                img {
                                    @include media('>=tablet') {
                                        max-width: 120px;
                                        max-height: 130px;
                                        object-fit: cover;
                                    }
                                }
                            }
                        }
                    }
                    .col-md-10 {
                        @include media('>=tablet') {
                            padding-left: 0px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding-right: 5.4rem;
                        }
                    }
                }
                &.longer-list {
                    @media (min-width: 1080px) {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        .lsx-slot {
                            width: 49%;
                            > .row {
                                height: 100%;
                                .col-md-2 {
                                    width: 27%;
                                    height: 100%;
                                    .exercise-feature-img {
                                        height: 100%;
                                        img {
                                            max-width: 100px;
                                            //height: fill-available;
                                            object-fit: cover;
                                            max-height: 120px;
                                        }
                                    }
                                }
                                .col-md-10 {
                                    width: 70%;
                                    padding-right: 1rem;
                                    h3 {
                                        flex-direction: column;
                                        display: flex;
                                    }
                                }
                            }
                            .btn {
                                font-size: 0;
                                border: 0;
                                padding: 0;
                                &:after {
                                    font-size: 9rem;
                                    margin: 0;
                                    font-weight: 300;
                                }
                            }
                        }
                    }
                }
            }
        }
        .set-grid {
            .workout-grid {
                padding: 0 10px;
                display: flex;
                flex-wrap: wrap;
                > .col-md-4 {
                    padding: 5px;
                    @include media('<=phone') {
                        padding: 0;
                    }
                }
                article {
                    display: flex;
                    .exercise-feature-img {
                        width: 40%;
                        @include media('>=tablet') {
                            width: 30%;
                        }
                        img {
                            height: auto;
                            object-fit: cover;
                            max-height: 120px;
                        }
                        @include media('>=tablet') {
                            img {
                                width: 100%;
                                min-height: 100px;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                    }
                    .exercise-content-box {
                        width: 60%;
                        @include media('>=tablet') {
                            width: 70%;
                        }
                        margin: 0;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        h3 {
                            font-size: 15px;
                            margin: 0;
                            display: flex;
                            flex-direction: row;
                        }
                        a {
                            display: initial;
                        }
                        .exercise-counter {
                            font-size: 15px;
                            font-weight: bold;
                            margin-right: 5px;
                        }
                    }
                    .reps-container {
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        &.have-reps {
                            justify-content: space-between;
                        }
                        .reps {
                            margin: 0;
                        }
                        .btn-simple {
                            text-transform: uppercase;
                            font-size: 14px;
                            font-weight: bold;
                            border-radius: 50%;
                            width: 36px;
                            height: 36px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            &:after {
                                content: '\f0da';
                                font-family: FontAwesome;
                                color: white;
                                font-size: 22px;
                                margin-left: 3px;
                            }
                        }
                    }
                    .lsx-exercises-excerpt {
                        margin: 0;
                        font-size: 13px;
                    }
                    .btn {
                        width: 100%;
                    }
                }
            }
        }
    }
    .tab-content-plan {
        margin-right: 0;
        margin-left: 0;
        @media (min-width: 992px) {
            display: flex;
            flex-wrap: wrap;
            .col-md-4 {
                display: flex;
            }
        }
        @media (max-width: 992px) {
            .col-md-4 {
                padding: 0;
            }
        }
        .lsx-health-plan-box {
            background: $light_gray;
            padding: 25px 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.26);
            margin-bottom: 30px;
            width: 100%;
            @media (min-width: 992px) {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .title {
                font-size: 30px;
                display: grid;
                grid-template-columns: 80% 20%;
                grid-template-rows: 50% 50%;
                &::after {
                    content: '';
                    margin-right: 10px;
                    background-size: contain;
                    display: inline-block;
                    width: 25px;
                    background-repeat: no-repeat;
                    background-position: center;
                }
                svg {
                    width: 40px;
                    height: 40px;
                    justify-self: end;
                }
            }
            .excerpt {
                flex-grow: 2;
            }
            .btn {
                width: 100%;
            }
            .spacer {
                + .btn {
                    margin-bottom: 20px;
                }
            }
        }
        .day-download-box {
            .lsx-health-plan-box {
                @media (min-width: 992px) {
                    justify-content: start;
                }
            }
        }
    }
    .status-plan-buttons {
        padding: 25px 20px;
    }
    .content-box {
        margin: 0 0 30px;
        background: $light_gray;
        padding: 12px 16px;
        h3.plan {
            margin-bottom: 8px;
            a,
            a:visited {
                color: $gray;
            }
        }
        .plan-meta {
            img {
                margin-right: 5px;
                + span {
                    margin-left: 5px;
                }
            }
            span {
                font-size: 13px;
                a:not(.btn) {
                    color: #919191;
                    &:last-child {
                        span {
                            display: none;
                        }
                    }
                }
            }
        }
        .plan-price {
            display: flex;
            del {
                margin-right: 5px;
                text-decoration-color: #30bb00;
                opacity: 0.5;
            }
            ins {
                text-decoration-color: #30bb00;
            }
        }
        .amount {
            color: #30bb00;
            font-size: 18px;
            margin-top: 9px;
            display: block;
        }
        .excerpt {
            margin-top: 10px;
            .moretag {
                display: none;
            }
        }
        .btn {
            width: 100%;
            padding: 10px;
            height: 40px;
            &.btn-disabled {
                opacity: 0.4;
            }
        }
    }
    .blue-title {
        font-weight: bold;
    }
    .single-plan-section-title {
        svg {
            width: 50px;
            height: 50px;
        }
        &.workput {
            svg {
                width: 80px;
            }
        }
    }
    .single-plan-inner {
        &.workout-content {
            max-width: 1140px;
            margin-left: auto;
            margin-right: auto;
            .workout-instructions {
                padding-left: 10px;
                padding-right: 10px;
                h3 {
                    font-family: 'Noto Sans', sans-serif;
                    font-weight: bold;
                    margin-bottom: 5px;
                }
                .single-plan-inner-buttons {
                    padding: 0;
                    .complete-plan-btn {
                        .download-link {
                            border: 2px solid $blue;
                            color: $blue;
                            height: 50px;
                            border-radius: 3px;
                            display: inline-block;
                            font-size: 14px;
                            font-weight: 700;
                            letter-spacing: 0.6px;
                            line-height: 1.25;
                            padding: 15px 40px;
                            position: relative;
                            text-transform: uppercase;
                            transition: all 100ms ease;
                            text-align: center;
                            &:hover {
                                color: white;
                                background-color: $blue;
                            }
                            @media (max-width: 600px) {
                                width: 100%;
                            }
                        }
                    }
                }
            }
            .workout-snacks {
                &.pre-workout {
                    margin-top: 4.25rem;
                }
                .content-box {
                    .title-lined {
                        font-weight: bold;
                        font-family: 'Noto Sans';
                    }
                }
            }

            .modal.in {
                background-color: rgba(0, 0, 0, 0.5);
            }
        }
        .eating-row {
            .eating-column {
                padding: 0;
                .content-box {
                    margin-bottom: 0;
                }

                .content-box {
                    .eating-title,
                    h3 {
                        font-family: 'Noto Sans';
                        font-size: 22px;
                        font-weight: bold;
                    }
                }
            }
        }
        .tip-row {
            @media (min-width: 992px) {
                display: flex;
            }
            .tip-left,
            .tip-middle,
            .tip-right {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                min-height: 240px;
            }
            .eating-title,
            h3 {
                font-family: 'Noto Sans';
                font-size: 22px;
            }
            .tip-right {
                @media (max-width: 600px) {
                    margin-top: 30px;
                }
            }
        }
        .recipes {
            .eating-row {
                padding: 0 2rem 3rem;
            }
            .recipe-column {
                .recipe-feature-img {
                    width: 100px;
                    min-width: 100px;
                }
                .recipe-box {
                    display: flex;
                    margin-bottom: 2rem;
                    .recipe-content {
                        padding: 12px 15px;
                    }
                }
                .recipe-title {
                    font-size: 16px;
                    line-height: 19px;
                    margin-bottom: 10px;
                }
                .recipe-table {
                    width: 100%;
                    margin-bottom: 0;
                    table-layout: fixed;
                    tbody {
                        display: flex;
                    }
                    tr {
                        margin-right: 10px;
                        td {
                            color: #919191;
                            font-size: 13px;
                            &:first-child {
                                display: none;
                            }
                        }
                        &.cooking-time,
                        &.portion-size {
                            display: none;
                        }
                    }
                }
                .btn {
                    margin-bottom: 25px;
                }
            }
        }
    }
    .single-plan-inner-buttons {
        padding: 45px 0;
        @media (min-width: 600px) {
            display: flex;
            .complete-plan-btn {
                margin-right: 40px;
            }
        }
        @media (max-width: 600px) {
            .complete-plan-btn,
            .back-plan-btn {
                margin-bottom: 20px;
                .btn {
                    width: 100%;
                }
            }
        }
    }
    &:not(.logged-in) {
        .single-plan-inner {
            > .plan {
                opacity: 0.3;
                pointer-events: none;
            }
        }
    }
}

.single-plan {
    .back-plan-btn {
        margin-top: 0;
    }
    .status-plan-buttons {
        padding: 15px;
        margin-top: 3rem;
        &.main-plan-btn {
            .border-btn {
                @include media('<=phone') {
                    width: 100%;
                }
                &:before {
                    content: '\f104';
                    font-family: 'FontAwesome';
                    margin-right: 1rem;
                }
            }
        }
    }
}

.single-workout {
    .entry-content {
        padding: 0;
    }
}

#lsx-exercises-shortcode {
    .reps {
        font-size: 13px;
        line-height: 15px;
    }
    .btn-simple {
        width: 16px;
        height: 16px;
        &:after {
            font-size: 10px;
        }
    }
}

.lsx-health-plan-modal {
    .modal-header {
        display: none;
    }
    .modal-content {
        padding: 10px !important;
        border-width: 2px !important;
    }
    .modal-title {
        margin-bottom: 25px;
    }
    .modal-image {
        img {
            width: 100%;
        }
    }
    .modal-body {
        .recipe {
            #single-recipe {
                background: transparent;
                padding: 0;
                .recipe-image,
                .recipe-content {
                    width: 100%;
                    max-width: 100%;
                    padding: 0 1rem;
                    margin: 1rem 0;
                }
                .recipe-image {
                    padding: 0;
                    box-shadow: none;
                    img {
                        max-height: 280px;
                        object-fit: cover;
                    }
                    .recipe-data {
                        background: transparent;
                    }
                }
            }
        }
        .exercise-modal {
            &.title-lined {
                padding-bottom: 15px;
                margin-bottom: 20px;
            }
            .modal-title {
                margin-bottom: 0;
                margin-top: 15px;
                padding-bottom: 5px;
            }
            .equipment-terms,
            .muscle-terms {
                display: block;
                color: #919191;
                font-size: 13px;
            }
        }
        .moretag {
            margin-top: 1rem;
            display: block;
            text-transform: uppercase;
            &:after {
                content: '\f105';
                font-family: FontAwesome;
                margin-left: 1rem;
            }
        }
        @media (max-width: 600px) {
            iframe {
                height: 100%;
            }
        }
    }
}

.post-type-archive-recipe,
.tax-recipe-type,
.tax-recipe-cuisine,
.post-type-archive-exercise,
.tax-exercise-type,
.tax-muscle-group,
.tax-equipment {
    .archive-header-wrapper {
        .archive-header {
            .lsx-hp-archive-description {
                color: white;
                font-size: 18px;
                .description-wrapper {
                    margin-top: 5px;
                }
            }
        }
    }
    .archive-plan {
        &.exercise-archive-plan {
            .lsx-slot {
                .title-lined {
                    margin-bottom: 10px;
                    padding-bottom: 10px;
                    .exercise-title {
                        margin-bottom: 10px;
                    }
                    .exercise-table {
                        margin-bottom: 0;
                        tbody {
                            > tr {
                                display: flex;
                                flex-wrap: wrap;
                            }
                        }
                    }
                }
                .moretag {
                    display: none;
                }
            }
        }
    }
    .lsx-hp-archive-description {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        display: flex;
        .description-wrapper {
            margin-top: 4.25rem;
            text-align: center;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            p {
                margin-bottom: 0px;
            }
        }
    }
    a.border-btn {
        &:after {
            content: '\f105';
            font-family: FontAwesome;
            margin-left: 2rem;
            color: $blue;
        }
    }
    &.lsx-search-enabled {
        .archive-plan {
            .content-box {
                margin: 0px 0 30px;
            }
        }
    }
}

#lsx-exercises-shortcode.shortcode-type-meal {
    .gutenberg-compatible-template.using-gutenberg .entry-content & {
        width: 100%;
        max-width: 80%;
    }
    .meals {
        .set-box {
            background: white;
            padding: 0px 8px 0 8px;
            margin-bottom: 0;
            @include media('>=tablet') {
                padding: 30px 20px 0 20px;
                display: flex;
                align-items: end;
                justify-content: space-between;
            }
            .the-content {
                @include media('>=tablet') {
                    padding-right: 4rem;
                }
                #hp-connected-members {
                    padding: 0;
                }
            }
            #lsx-tips-shortcode {
                margin-top: 0;
                width: 100%;
                @include media('>=tablet') {
                    max-width: 345px;
                }
            }
        }
        .eating-row {
            padding: 2rem 1rem 3rem;
            margin: 0;
            .eating-column {
                border-right: 3px solid rgba(65, 138, 208, 0.1);
                &:last-child {
                    border: none;
                }
                .content-box {
                    background: transparent;
                    padding-top: 0;
                    padding-bottom: 0;
                    .eating-title {
                        margin-bottom: 10px;
                    }
                }
                .recipes {
                    margin: 0 15px;
                    .row.eating-row {
                        padding: 0;
                    }
                    .recipe-column {
                        background: white;
                    }
                    tr {
                        display: flex;
                        &:before {
                            font-family: FontAwesome;
                            margin-right: 5px;
                            color: $blue;
                            font-size: 12px;
                        }
                    }
                    .serves {
                        &:before {
                            content: '\f0f5';
                        }
                    }
                    .prep-time {
                        &:before {
                            content: '\f017';
                        }
                    }
                    .cooking-time,
                    .portion-size {
                        display: none;
                    }
                }
                .recipes {
                    .eating-row {
                        padding: 0 2rem 3rem;
                    }
                    .recipe-column {
                        .recipe-feature-img {
                            width: 100px;
                            min-width: 100px;
                            display: flex;
                            img {
                                object-fit: cover;
                            }
                        }
                        .recipe-box {
                            display: flex;
                            margin-bottom: 2rem;
                            .recipe-content {
                                padding: 12px 15px;
                            }
                        }
                        .recipe-title {
                            font-size: 16px;
                            line-height: 19px;
                            margin-bottom: 10px;
                        }
                        .recipe-table {
                            width: 100%;
                            margin-bottom: 0;
                            table-layout: fixed;
                            tbody {
                                display: flex;
                            }
                            tr {
                                margin-right: 10px;
                                td {
                                    color: #919191;
                                    font-size: 13px;
                                    &:first-child {
                                        display: none;
                                    }
                                }
                                &.cooking-time,
                                &.portion-size {
                                    display: none;
                                }
                            }
                        }
                        .btn {
                            margin-bottom: 25px;
                        }
                    }
                }
            }
        }
        .set-box.entry-content {
            + .eating-row {
                margin: 3rem 0 0 0;
            }
        }
    }
}

.post-type-archive-recipe,
.post-type-archive-exercise,
.tax-recipe-type,
.tax-recipe-cuisine,
#lsx-exercises-shortcode.shortcode-type-recipe {
    .lsx-slot {
        position: relative;
    }
    .recipe-type {
        position: absolute;
        right: 10px;
        top: 15px;
        font-size: 13px;
        background: white;
        padding: 5px 10px;
        font-weight: bold;
        border-radius: 1px;
        &.recipe-parent {
            background: linear-gradient(270deg, #418ad0 0%, #2a5781 100%);
            color: white;
        }
    }
    .recipe-feature-img,
    .exercise-feature-img {
        img {
            width: 100%;
            height: 250px;
            max-height: 250px;
            object-fit: cover;
        }
    }
    .content-box {
        //min-height: 290px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px 15px 0;
        table:not(.exercise-table) {
            flex-grow: 2;
            display: flex;
            margin-bottom: 10px;
            tbody {
                display: flex;
            }
            td,
            th {
                vertical-align: top;
            }
            tr {
                display: flex;
                margin-right: 10px;
                &:before {
                    font-family: FontAwesome;
                    margin-right: 5px;
                    color: $blue;
                }
                td {
                    &:first-child {
                        display: none;
                    }
                }
            }
            .serves {
                &:before {
                    content: '\f0f5';
                }
            }
            .prep-time {
                &:before {
                    content: '\f017';
                }
            }
            .cooking-time,
            .portion-size {
                display: none;
            }
        }
        .recipe-title-link {
            margin: 0;
            &::after {
                content: none;
            }
        }
        .recipe-title,
        .exercise-title {
            margin-bottom: 15px;
        }
        a {
            margin-bottom: 15px;
            &.btn {
                &:after {
                    content: '\f105';
                    font-family: FontAwesome;
                    margin-left: 5px;
                    color: $blue;
                }
            }
        }
        &.exercise-content-box {
            .exercise-table {
                font-size: 13px;
                color: #919191;
                a {
                    text-transform: capitalize;
                    &:after {
                        content: none;
                    }
                }
            }
        }
    }
    .col-md-3 {
        .content-box {
            table:not(.exercise-table) {
                tbody {
                    display: block;
                }
            }
        }
    }
}

.post-type-archive-workout {
    .archive-plan {
        .row {
            .col-md-3 {
                .lsx-slot {
                    .workout-feature-img {
                        img {
                            width: 100%;
                        }
                    }
                    .workout-content-box {
                        .btn {
                            width: 100%;
                            &:after {
                                content: '\f105';
                                font-family: FontAwesome;
                                margin-left: 2rem;
                                color: $blue;
                            }
                        }
                    }
                }
            }
        }
    }
}

.tax-exercise-type,
.tax-muscle-group,
.tax-equipment {
    .archive-header-wrapper {
        .archive-header {
            p {
                display: none;
            }
        }
    }
}

.archive {
    .archive-header-wrapper.banner-archive {
        float: none;
    }
    .hp-archive-category-title {
        margin-top: 4.25rem;
    }
}