/* /Components/Layout/Footer.razor.rz.scp.css */
.hem-footer__logo[b-azeehhai3p] {
    width: 100%;
    max-width: 24rem;
    height: auto;
}

/* In the installed app the logo and contact grid above the legal line are hidden, so the gap that set the
   line off from them would only pad the section. `!important` because UIkit's margin utilities carry it. */
@media (display-mode: minimal-ui), (display-mode: standalone), (display-mode: fullscreen) {
    .hem-footer__legal[b-azeehhai3p] {
        margin-top: 0 !important;
    }
}

/* A button that has to read as one of the links it sits between. */
.hem-footer__settings[b-azeehhai3p] {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-26gyx2znx1] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-26gyx2znx1] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-zn8k1g95b5],
.components-reconnect-repeated-attempt-visible[b-zn8k1g95b5],
.components-reconnect-failed-visible[b-zn8k1g95b5],
.components-pause-visible[b-zn8k1g95b5],
.components-resume-failed-visible[b-zn8k1g95b5],
.components-rejoining-animation[b-zn8k1g95b5] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-zn8k1g95b5],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-zn8k1g95b5],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-zn8k1g95b5],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-zn8k1g95b5],
#components-reconnect-modal.components-reconnect-retrying[b-zn8k1g95b5],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-zn8k1g95b5],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-zn8k1g95b5],
#components-reconnect-modal.components-reconnect-failed[b-zn8k1g95b5],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-zn8k1g95b5] {
    display: block;
}


#components-reconnect-modal[b-zn8k1g95b5] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-zn8k1g95b5 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-zn8k1g95b5 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-zn8k1g95b5 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-zn8k1g95b5]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-zn8k1g95b5 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-zn8k1g95b5 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-zn8k1g95b5 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-zn8k1g95b5 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-zn8k1g95b5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-zn8k1g95b5] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-zn8k1g95b5] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-zn8k1g95b5] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-zn8k1g95b5] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-zn8k1g95b5] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-zn8k1g95b5] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-zn8k1g95b5 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-zn8k1g95b5] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-zn8k1g95b5 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/TopNav.razor.rz.scp.css */
/* Layout only. The banner's teal, the inverse text colours and the trainer bar's darker teal all come from
   the theme (theme/src/_variables.scss and _brand.scss) — a colour written here would load after it and win. */

/* Sticky, and slid out of view while the reader scrolls down -- wwwroot/js/hem-nav.js sets `hem-nav-hidden`
   and takes it off again on the first scroll up, so the menu is never a scroll to the top away. Losing the
   class to the dom merge of an enhanced navigation is harmless: it only ever means "shown", which is right on
   a page that has just loaded at the top. The z-index is UIkit's own for a sticky element: above the page
   (the landing hero is `position: relative` and later in the document, so it would otherwise paint over the
   banner), below the off-canvas, modals and notifications. */
.hem-nav[b-044drpyspj] {
    position: sticky;
    top: 0;
    transition: transform 0.2s ease-out;
    z-index: 980;
}

.hem-nav.hem-nav-hidden[b-044drpyspj] {
    transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    .hem-nav[b-044drpyspj] {
        transition: none;
    }
}

.hem-nav-logo[b-044drpyspj] {
    padding-right: 0.5rem;
}

/* Sized by height, because the banner row is what it has to sit inside: 36px leaves the "her every move"
   wordmark room next to the menu toggle on a 320px phone, and 48px is as tall as the mark can go before it
   crowds the 64px row — past that the row itself would start growing. `width: auto` plus the intrinsic
   768×228 keeps the proportions and reserves the space, so the banner does not reflow when the file
   arrives. */
.hem-nav-logo img[b-044drpyspj] {
    height: 2.25rem;
    width: auto;
}

/* Five nav items, the account cluster and the logo have to share one line from 1200px up, which is what the
   `uk-visible@l` on the list is picked for. UIkit's 14px either side of an item is what has to give. The
   booking button is exempt: its padding is part of the shape (see `.hem-nav-cta` in
   theme/src/_brand.scss, which is where its colours live too). */
.hem-nav-list[b-044drpyspj]  li > a:not(.hem-nav-cta) {
    padding-left: 10px;
    padding-right: 10px;
}

/* UIkit opens the gap between items to 30px from @m up. The items are set in Barlow rather than the narrower
   Barlow Condensed, and at 1200px that pushed the widest banner — a signed-in personal-training student, with
   "Mein Training" as a fifth item — 10px past one line, so the row wrapped under the logo. 20px leaves that
   banner about 30px to spare; the anonymous and the teacher banners have more. Measure the student's banner
   at exactly 1200px before widening an item, a label or this gap again. */
.hem-nav-list[b-044drpyspj] {
    column-gap: 20px;
}

/* The gap between the calendar icon and the label inside that button. 6px rather than UIkit's 10px
   `uk-margin-small-right`, because the button is already the widest thing on the row and the icon reads as
   part of the label rather than as a separate mark. */
.hem-nav-icon[b-044drpyspj] {
    margin-right: 0.375rem;
}

/* The "…" toggle is an anchor with no href, so it gets neither the pointer cursor nor the hit area a link
   would have had. UIkit's `> li > a` rules supply everything else. */
.hem-nav-more[b-044drpyspj] {
    cursor: pointer;
}

/* UIkit's dropdown pads 25px all round, which leaves a 200px panel too little room for
   "Yoga-Gruppenstunden" to stay on one line. */
.hem-nav-more-drop[b-044drpyspj] {
    padding: 1.25rem;
}

/* Not a `uk-navbar-item` (see the markup for why), so it centres its button in the 64px row itself. */
.hem-nav-account[b-044drpyspj] {
    align-items: center;
    display: flex;
    padding-left: 0.75rem;
}

/* The icon and the label sit on one line, centred on each other — `uk-button` is inline-block with a fixed
   line-height, which leaves the 20px icon riding high next to the text. */
.hem-nav-account .hem-nav-sign-in[b-044drpyspj] {
    align-items: center;
    column-gap: 0.375rem;
    display: inline-flex;
}

/* The signed-in button is a 40px circle: square, with the button's horizontal padding taken away so the
   initials are centred by flex rather than pushed by it. The circle itself is the theme's pill radius
   (`hook-button`) on a square, and the type is the button's own. */
.hem-nav-avatar[b-044drpyspj] {
    align-items: center;
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 2.5rem;
}

/* The same padding the "…" menu's panel takes: UIkit's 25px leaves the 200px panel cramped. */
.hem-nav-account-drop[b-044drpyspj] {
    padding: 1.25rem;
}

/* UIkit styles its navbar toggle for a link, so the button standing in for it sheds the browser's chrome.
   Padding on the left only: the container already supplies the gutter on the right, and doubling it would
   push the icon away from the edge the rest of the page lines up with. */
.hem-nav-toggle[b-044drpyspj] {
    background: none;
    border: none;
    cursor: pointer;
    padding-left: 0.5rem;
}

/* The account block leads the off-canvas: full-width stacked actions, then a gap before the link list. */
.hem-offcanvas-account[b-044drpyspj] {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    row-gap: 0.5rem;
}

/* "App installieren" closes the panel, set off from the list above it like the account block is from the
   list below. Its colours are the theme's (`hem-nav-install` in theme/src/_brand.scss). */
.hem-nav-install[b-044drpyspj] {
    margin-top: 1.5rem;
}

.hem-offcanvas-greeting[b-044drpyspj] {
    font-size: 0.875rem;
    margin: 0;
}

@media (min-width: 640px) {
    .hem-nav-logo img[b-044drpyspj] {
        height: 3rem;
    }
}
/* /Components/Pages/AppHome.razor.rz.scp.css */
/* Each tile is one large tap target: the whole card is the link, so the icon, title and line under it stack
   inside it rather than sitting beside a separate button. Colours are the theme's card. */
.hem-app-tile[b-03ktkwz080] {
    display: flex;
    flex-direction: column;
    height: 100%;
    row-gap: 0.25rem;
}

.hem-app-tile-icon[b-03ktkwz080] {
    margin-bottom: 0.5rem;
}
/* /Components/Pages/Content/AboutMe.razor.rz.scp.css */
.hem-training[b-cp0pmdjzis] {
    list-style: none;
    padding-left: 0;
}

.hem-training__title[b-cp0pmdjzis] {
    display: block;
    font-weight: 600;
    line-height: 1.4;
}

.hem-training .uk-text-meta[b-cp0pmdjzis] {
    display: block;
    margin-top: .15rem;
}

.hem-cta__panel[b-cp0pmdjzis] {
    position: static;
    padding-left: 0;
    padding-right: 0;
    background: none;
}

@media (min-width: 960px) {
    .hem-cta__panel[b-cp0pmdjzis] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(32rem, calc(100% - 3rem));
        padding: 1.5rem;
        background: rgba(255, 255, 255, .92);
    }
}
/* /Components/Pages/Content/Landing.razor.rz.scp.css */
.hem-hero__panel[b-70wauk2cii] {
    position: static;
    padding-left: 0;
    padding-right: 0;
    background: none;
}

.hem-hero__eyebrow[b-70wauk2cii] {
    text-transform: uppercase;
    letter-spacing: .1em;
}

@media (min-width: 960px) {
    .hem-hero__panel[b-70wauk2cii] {
        position: absolute;
        top: 2rem;
        right: 2rem;
        max-width: 34rem;
        padding: 2rem;
        background: rgba(255, 255, 255, .78);
    }
}
/* /Components/Pages/Content/MessageForm.razor.rz.scp.css */
.hem-honeypot[b-9dr8bfcz7y] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* /Components/Pages/Content/PersonalTrainingInfo.razor.rz.scp.css */
/* The photo is mirrored so the person faces the price table beside it. ::deep because the <img> is
   rendered by ResponsiveImage, which this file's scope does not reach. */
.hem-mirror[b-pkb98u3pl1]  img {
    transform: scaleX(-1);
}

/* Icon beside its label, with a wrapped second line staying under the label rather than the icon. */
.hem-features > li[b-pkb98u3pl1] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.hem-features__icon[b-pkb98u3pl1] {
    flex: none;
    margin-top: .1rem;
}
/* /Components/Pages/Content/PrivacyPolicy.razor.rz.scp.css */
/* A button that has to read as the link it stands in for, mid-sentence. */
.hem-privacy__settings[b-ibv3surako] {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
/* /Components/Pages/Content/WithdrawContract.razor.rz.scp.css */
.hem-honeypot[b-ys02zaynea] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* /Components/Pages/Content/Yoga.razor.rz.scp.css */
.hem-map[b-zpp4mafm20] {
    border: 0;
    display: block;
}

/* The photo is mirrored so the person faces the price table beside it. ::deep because the <img> is
   rendered by ResponsiveImage, which this file's scope does not reach. */
.hem-mirror[b-zpp4mafm20]  img {
    transform: scaleX(-1);
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* The two actions sit side by side once there is room, stacked with a gap on a phone -- UIkit has no
   spacing scale for a one-off pair like this, so it is baked in here. */
.hem-error__actions[b-yeq8yroyq2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .hem-error__actions[b-yeq8yroyq2] {
        flex-direction: row;
    }
}

/* The two facts support asks for. They are read out on the phone as often as they are typed, so the code is
   the largest thing on the page after the headline and is tracked wide enough that no two characters run
   together when someone spells it out. Colour stays in the theme (uk-text-primary on the element). */
.hem-error__facts[b-yeq8yroyq2] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
}

@media (min-width: 640px) {
    .hem-error__facts[b-yeq8yroyq2] {
        flex-direction: row;
        gap: 3rem;
    }
}

.hem-error__facts dt[b-yeq8yroyq2],
.hem-error__facts dd[b-yeq8yroyq2] {
    margin: 0;
}

.hem-error__code[b-yeq8yroyq2] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.2em;
    /* The tracking is added after every character including the last, which would otherwise read as a
       trailing space next to the label. */
    text-indent: 0.1em;
}

.hem-error__when[b-yeq8yroyq2] {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
}
/* /Components/Pages/GroupClasses/TeacherDashboard.razor.rz.scp.css */
/* The participant rows are buttons, not links -- see the comment above them in the .razor.
   This strips the button chrome so a row still reads and fills the list like the link it replaces;
   the colour and the hover underline come from UIkit's own `uk-link`, not from here. */
.hem-user-pick[b-d1464rigca] {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
}
/* /Components/Pages/PersonalTrainings/TeacherManagement.razor.rz.scp.css */
/* The participant rows are buttons, not links -- see the comment above them in the .razor.
   This strips the button chrome so a row still reads and fills the list like the link it replaces;
   the colour and the hover underline come from UIkit's own `uk-link`, not from here. */
.hem-user-pick[b-k93gfahj5x] {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
}

/* A candidate row is a name on the left and its "freischalten" button on the right. On a phone the two
   would otherwise be squeezed onto one line, so the row wraps and the gap keeps them apart once it does. */
.hem-grant-row[b-k93gfahj5x] {
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* /Components/Pages/TrainingLibraries/ExerciseManagement.razor.rz.scp.css */
/* The pagination arrows are buttons, not links -- see the comment above them in the .razor.
   This strips the button chrome; padding, colour and the disabled state come from UIkit's own
   `.uk-pagination > * > *` rules, which match a button as readily as an anchor. */
.hem-page-step[b-ih17w1k3pj] {
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}
/* /Components/Pages/TrainingLibraries/SequenceManagement.razor.rz.scp.css */
/* The pagination arrows are buttons, not links -- see the comment above them in the .razor.
   This strips the button chrome; padding, colour and the disabled state come from UIkit's own
   `.uk-pagination > * > *` rules, which match a button as readily as an anchor. */
.hem-page-step[b-ntpx74m9d9] {
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}
/* /Components/Pages/Users/Account.razor.rz.scp.css */
/* One-off spacing only. Colour and typography come from the theme — see theme/src. */

/* The buttons stack full-width on a phone and sit side by side once there is room for both. */
.account-actions[b-4w7u0ygpyd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.account-actions > .uk-button[b-4w7u0ygpyd] {
    width: 100%;
}

.account-hint[b-4w7u0ygpyd] {
    margin-top: 0.35rem;
}

@media (min-width: 640px) {
    .account-actions[b-4w7u0ygpyd] {
        flex-direction: row;
    }

    .account-actions > .uk-button[b-4w7u0ygpyd] {
        width: auto;
    }
}
/* /Components/PersonalTrainings/AddressForm.razor.rz.scp.css */
.pt-address-actions[b-nn240to1nf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
/* /Components/PersonalTrainings/ExerciseRow.razor.rz.scp.css */
.pt-exercise[b-vcuj6htkro] {
    background: #f7f9fb;
    border-radius: 2px;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
}

/* The whole header line is the fold control, so it has to look like text rather than a button. */
.pt-row-toggle[b-vcuj6htkro] {
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
}

.pt-row-actions[b-vcuj6htkro] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
/* /Components/PersonalTrainings/Homeworks/HomeworkEditor.razor.rz.scp.css */
.pt-row-actions[b-po2rz2eh1u],
.pt-editor-actions[b-po2rz2eh1u] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* Seven day toggles have to wrap on a phone and stay tappable. */
.pt-weekdays[b-po2rz2eh1u] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    margin-top: 0.25rem;
}

.pt-weekday[b-po2rz2eh1u] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}
/* /Components/PersonalTrainings/Homeworks/HomeworkView.razor.rz.scp.css */
/* One card per exercise: a student works through these one at a time, so each needs its own block rather
   than a dense list row. */
.hw-exercise[b-lq7ote5lsm] {
    background: #f7f9fb;
    border-radius: 2px;
    padding: 0.6rem 0.75rem;
    margin-top: 0.5rem;
}

/* The trainer types an indication as they mean it to be read, line breaks included, so it is rendered as
   written instead of being collapsed into one paragraph by HTML's whitespace handling. */
.hw-indication[b-lq7ote5lsm] {
    font-style: italic;
    color: #666;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    white-space: pre-wrap;
}

.hw-details[b-lq7ote5lsm] {
    border-top: 1px solid #e5e5e5;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    font-size: 0.875rem;
}

.hw-detail[b-lq7ote5lsm] {
    margin: 0 0 0.4rem;
}

/* The gallery shows one picture at a time, as large as the column allows. Mobile-first: full width on a
   phone, capped further up so a picture never dominates a wide screen. */
.hw-gallery[b-lq7ote5lsm] {
    margin-top: 0.5rem;
}

/* Only the picture gets the white mat — the dots below it sit on the exercise card. */
.hw-gallery-frame[b-lq7ote5lsm] {
    background: #fff;
    border-radius: 2px;
}

/* The link is only there to open the lightbox, so it has to hand its whole slide to the picture. */
.hw-gallery .uk-slideshow-items a[b-lq7ote5lsm] {
    display: block;
    width: 100%;
    height: 100%;
}

/* Contain, not cover: a student compares their own posture against the whole picture, so nothing may be
   cropped away — the fixed ratio just keeps the gallery from jumping as the slides change. */
.hw-gallery .uk-slideshow-items img[b-lq7ote5lsm] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* UIkit styles its slide arrows for links, so the buttons standing in for them shed the browser's chrome —
   and then get a disc of their own: UIkit's translucent grey all but disappears against a photo, and these
   arrows are the only hint that there is another picture behind this one. */
.hw-gallery-nav[b-lq7ote5lsm] {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    color: #333;
    cursor: pointer;
}

.hw-gallery-nav:hover[b-lq7ote5lsm],
.hw-gallery-nav:focus[b-lq7ote5lsm] {
    background: #fff;
    color: #000;
}

@media (min-width: 640px) {
    .hw-gallery[b-lq7ote5lsm] {
        max-width: 32rem;
    }
}

/* 16:9 without a fixed height, so the player fills whatever width it gets. */
.hw-video[b-lq7ote5lsm] {
    margin-top: 0.75rem;
    aspect-ratio: 16 / 9;
    max-width: 32rem;
}

.hw-video iframe[b-lq7ote5lsm] {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 2px;
}
/* /Components/PersonalTrainings/PersonalTrainingManager.razor.rz.scp.css */
.pt-actions[b-2ekgixn71c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
/* /Components/PersonalTrainings/Sessions/SessionPlanEditor.razor.rz.scp.css */
/* The plan is three levels deep, so nesting is shown with left accents rather than nested cards —
   padding on mobile is too precious to spend on borders. */
.pt-phase[b-1a1g11m9tl] {
    border-left: 3px solid #1e87f0;
    padding: 0.5rem 0 0.5rem 0.75rem;
    margin-top: 0.75rem;
}

.pt-category[b-1a1g11m9tl] {
    border-left: 3px solid #999;
    padding: 0.25rem 0 0.25rem 0.75rem;
    margin-top: 0.75rem;
}

.pt-row-actions[b-1a1g11m9tl],
.pt-editor-actions[b-1a1g11m9tl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* What happened last time, quoted while the next session is written — reading matter, not a form field, so
   it is set apart from the editor below it. The trainer's line breaks are kept as typed. */
.pt-last-notice[b-1a1g11m9tl] {
    background: #f7f9fb;
    border-left: 3px solid #999;
    border-radius: 2px;
    padding: 0.5rem 0.75rem;
}

.pt-last-notice-text[b-1a1g11m9tl] {
    white-space: pre-wrap;
    font-size: 0.875rem;
    color: #666;
}
/* /Components/PersonalTrainings/Sessions/SessionPlanView.razor.rz.scp.css */
/* Same left-accent nesting as the planner, so a plan reads the same whether it is being edited or reviewed. */
.pt-phase[b-8h9q5zzm22] {
    border-left: 3px solid #1e87f0;
    padding: 0.25rem 0 0.25rem 0.75rem;
    margin-top: 0.75rem;
}

.pt-category[b-8h9q5zzm22] {
    border-left: 3px solid #999;
    padding: 0.25rem 0 0.25rem 0.75rem;
    margin-top: 0.5rem;
}

/* The trainer's indication is shown with the line breaks it was written with, not collapsed into one line. */
.pt-indication[b-8h9q5zzm22] {
    white-space: pre-wrap;
}
/* /Components/PersonalTrainings/Sessions/SessionRunView.razor.rz.scp.css */
/* Same left-accent nesting as the planner and the viewer, so a plan reads the same however it is opened. */
.pt-phase[b-vu6h6vcx5v] {
    border-left: 3px solid #1e87f0;
    padding: 0.25rem 0 0.25rem 0.75rem;
    margin-top: 0.75rem;
}

.pt-category[b-vu6h6vcx5v] {
    border-left: 3px solid #999;
    padding: 0.25rem 0 0.25rem 0.75rem;
    margin-top: 0.5rem;
}

/* The trainer's indication is shown with the line breaks it was written with, not collapsed into one line. */
.pt-indication[b-vu6h6vcx5v] {
    white-space: pre-wrap;
}

/* A tick target for a thumb: the row is the label, and the box keeps its own column so the text lines up. */
.pt-run-row[b-vu6h6vcx5v] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    padding: 0.2rem 0;
}

.pt-run-row input[b-vu6h6vcx5v] {
    margin-top: 0.2rem;
    flex: none;
}

/* The one thing on this screen that outlives the hour, so it is set off from the checklist above it. */
.pt-run-notice[b-vu6h6vcx5v] {
    border-top: 1px solid #e5e5e5;
    padding-top: 0.75rem;
}

/* Done rows step back rather than disappear — the trainer still needs to see what the session contained. */
.pt-run-done[b-vu6h6vcx5v] {
    opacity: 0.55;
    text-decoration: line-through;
}
/* /Components/PersonalTrainings/TrainingSummary.razor.rz.scp.css */
/* A notice is written with its own line breaks — they are stored, so they are shown rather than collapsed. */
.pt-notice[b-8fosxffg9z] {
    display: block;
    background: #f7f9fb;
    border-left: 3px solid #1e87f0;
    padding: 0.5rem 0.75rem;
    border-radius: 2px;
    color: #666;
    white-space: pre-wrap;
}
/* /Components/TrainingLibraries/ExerciseForm.razor.rz.scp.css */
.hem-check[b-m5be2zmioi] {
    display: flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    font-size: .9rem;
}

.hem-check input[b-m5be2zmioi] {
    margin: 0;
}
/* /Components/TrainingLibraries/ExerciseImagePicker.razor.rz.scp.css */
.hem-picker-head[b-aflqcgm7sf] {
    gap: .5rem;
}

.hem-picker-dropdown[b-aflqcgm7sf] {
    width: 300px;
    padding: 1rem;
}

.hem-picker-scroll[b-aflqcgm7sf] {
    max-height: 320px;
}

.hem-image-grid[b-aflqcgm7sf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: .5rem;
}

.hem-image-cell[b-aflqcgm7sf] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: .25rem;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    text-align: center;
}

button.hem-image-cell:hover[b-aflqcgm7sf] {
    border-color: #1e87f0;
}

.hem-image-selected[b-aflqcgm7sf] {
    cursor: default;
}

.hem-image-cell img[b-aflqcgm7sf] {
    width: 100%;
    height: 64px;
    object-fit: cover;
    border-radius: 3px;
    background: #f8f8f8;
}

.hem-image-name[b-aflqcgm7sf] {
    margin-top: .25rem;
    font-size: .7rem;
    line-height: 1.15;
    word-break: break-all;
    color: #666;
}

.hem-image-remove[b-aflqcgm7sf] {
    position: absolute;
    top: .15rem;
    right: .15rem;
    background: rgba(255, 255, 255, .9);
    color: #f0506e;
}

@media (min-width: 640px) {
    .hem-picker-dropdown[b-aflqcgm7sf] {
        width: 420px;
    }

    .hem-image-cell img[b-aflqcgm7sf] {
        height: 72px;
    }
}
/* /Components/TrainingLibraries/SequenceForm.razor.rz.scp.css */
.hem-accessory-row[b-dhnmvga4ql] {
    align-items: center;
}

.hem-accessory-qty[b-dhnmvga4ql] {
    width: 6rem;
}

.hem-accessory-qty input[b-dhnmvga4ql] {
    text-align: center;
}
/* /Components/TrainingLibraries/VideoPicker.razor.rz.scp.css */
.hem-video-selected[b-yuy092vhoy] {
    padding: .6rem .75rem;
}

.hem-video-thumb[b-yuy092vhoy] {
    width: 120px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
    background: #f0f0f0;
    flex: 0 0 auto;
}

.hem-video-selected-info[b-yuy092vhoy] {
    min-width: 0;
    padding: 0 .75rem;
    word-break: break-word;
}

.hem-video-selected-actions[b-yuy092vhoy] {
    flex: 0 0 auto;
    display: flex;
    gap: .25rem;
}

.hem-video-preview[b-yuy092vhoy] {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.hem-video-preview iframe[b-yuy092vhoy] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 4px;
}

.hem-video-scroll[b-yuy092vhoy] {
    max-height: 340px;
}

.hem-video-grid[b-yuy092vhoy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .5rem;
}

.hem-video-cell[b-yuy092vhoy] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    transition: border-color .1s ease-in-out;
}

.hem-video-cell:hover[b-yuy092vhoy] {
    border-color: #1e87f0;
}

.hem-video-cell-active[b-yuy092vhoy] {
    border-color: #1e87f0;
    box-shadow: 0 0 0 1px #1e87f0;
}

.hem-video-cell img[b-yuy092vhoy] {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #f0f0f0;
    display: block;
}

.hem-video-name[b-yuy092vhoy] {
    padding: .3rem .4rem 0;
    font-size: .8rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hem-video-duration[b-yuy092vhoy] {
    padding: .1rem .4rem .35rem;
    font-size: .7rem;
    color: #999;
}