/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* A shorter navbar than the theme's, which padded the bar 20px top and bottom and each menu
   item another 10px on top of the links' own padding. */
.site-navbar-wrap[b-299mjmt656] {
    padding-top: 8px;
    padding-bottom: 8px;
}

.site-navbar .site-navigation .site-menu > li[b-299mjmt656] {
    padding-top: 0;
    padding-bottom: 0;
}

/* On the home page, nothing below the bar, so the hero image starts right under the
   kravmagapp title. The navbar sits above the page (z-index 99), so a negative margin on the
   image would only slide it behind the padding. */
.site-navbar-wrap.navbar-flush[b-299mjmt656] {
    padding-bottom: 0;
}

/* Phone navbar: the theme toggle and the burger, centred on one line and spaced well apart so
   a thumb aimed at one does not land on the other. */
.nav-actions[b-299mjmt656] {
    gap: 1.5rem;
}

/* Light/dark toggle. Colour follows the theme. The 40px box is the tap area; the icon is
   centred in it. (Bootstrap's display utilities override the display on wider screens.) */
.theme-toggle[b-299mjmt656] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1;
    vertical-align: middle;
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

/* Burger: the same 40px tap area, with the icon centred, so the two line up. */
.site-menu-toggle[b-299mjmt656] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
}

/* Bigger burger icon (the theme's h3 sizing made it about 23px on a phone). */
.site-menu-toggle .icon-menu[b-299mjmt656] {
    font-size: 2rem;
    line-height: 1;
    margin: 0; /* the h3 class it carries adds a bottom margin that lifted it off-centre */
}

#blazor-error-ui[b-299mjmt656] {
    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-299mjmt656] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-em5fzl8zk4],
.components-reconnect-repeated-attempt-visible[b-em5fzl8zk4],
.components-reconnect-failed-visible[b-em5fzl8zk4],
.components-pause-visible[b-em5fzl8zk4],
.components-resume-failed-visible[b-em5fzl8zk4],
.components-rejoining-animation[b-em5fzl8zk4] {
    display: none;
}

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


#components-reconnect-modal[b-em5fzl8zk4] {
    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-em5fzl8zk4 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-em5fzl8zk4 {
    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/Pages/Bmi.razor.rz.scp.css */
/* Full width on phones; a comfortable column on wider screens. */
.bmi-form[b-4fp7ep6x1x] {
    max-width: 420px;
    margin: 0 auto;
}

/* The answer, big enough to read at a glance. */
.bmi-value[b-4fp7ep6x1x] {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-emphasis-color);
}

.bmi-result .badge[b-4fp7ep6x1x] {
    font-size: 0.9rem;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Keep the check-in barcode above the fold. The theme makes each hero slide at least 600px
   tall, which pushed the barcode off screen on phones and laptops alike; scale the hero with
   the screen instead, and trim the section's tall top padding on wider screens. */
.site-blocks-cover.inner-page[b-son9fv3si7],
.site-blocks-cover.inner-page .row[b-son9fv3si7] {
    min-height: 0;
    height: clamp(200px, 30vh, 320px);
}

@media (min-width: 768px) {
    .site-section.checkin-section[b-son9fv3si7] {
        padding-top: 1.5rem;
    }
}

/* Prerendered page, before owl carousel's script starts. Owl's CSS hides the carousel
   entirely until then, so the hero popped in late and shoved the whole page down (a large
   layout shift, which search engines penalise). Show it from the first paint instead - just
   the first slide, rather than all three stacked on top of each other. */
.slide-one-item.owl-carousel:not(.owl-loaded)[b-son9fv3si7] {
    display: block;
}

.slide-one-item:not(.owl-loaded) > .site-blocks-cover ~ .site-blocks-cover[b-son9fv3si7] {
    display: none;
}

/* Prerendered page: holds the check-in barcode's space until the member id is read. The
   barcode shrinks to fit narrow phones, so its block is shorter there. */
.checkin-placeholder[b-son9fv3si7] {
    min-height: 160px;
}

@media (min-width: 576px) {
    .checkin-placeholder[b-son9fv3si7] {
        min-height: 184px;
    }
}

/* Run the schedule table closer to the screen edges. The page nests two Bootstrap containers,
   which left 24px either side plus the cells' own 8px; pull out by one container's gutter and
   trim the cell padding. */
.schedule-table[b-son9fv3si7] {
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
}

    .schedule-table td[b-son9fv3si7] {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        font-size: 1.125rem; /* 18px */
    }

    /* Bootstrap sizes badges at 0.75em of the text around them; pin the pills at 14px. */
    .schedule-table .badge[b-son9fv3si7] {
        font-size: 0.875rem;
    }

/* Class availability, marked along the top edge of the row. */

/* Start time has already passed. */
.class-started td[b-son9fv3si7] {
    border-top: 4px solid orange;
}

/* Still ahead - you can make it. */
.class-upcoming td[b-son9fv3si7] {
    border-top: 4px solid limegreen;
}

/* Program pills with no Bootstrap colour equivalent; dark text keeps them readable. */
.pill-lime[b-son9fv3si7] {
    background-color: lime;
    color: #000;
}

.pill-orange[b-son9fv3si7] {
    background-color: orange;
    color: #000;
}

/* Comment icon beside each class name. */
.class-comment[b-son9fv3si7] {
    padding: 0 0 0 0.4rem;
    vertical-align: baseline;
    color: #6c757d;
    line-height: 1;
}

    .class-comment:hover[b-son9fv3si7],
    .class-comment:focus-visible[b-son9fv3si7] {
        color: #0d6efd;
    }
/* /Components/Shared/CommentDialog.razor.rz.scp.css */
/* Wider than Bootstrap's default 500px dialog, which modal-lg only lifts from 992px up. Below
   576px Bootstrap already runs the dialog edge to edge. */
@media (min-width: 576px) {
    .comment-dialog[b-epoto8b59o] {
        max-width: min(800px, calc(100vw - 3.5rem));
    }
}

/* The theme's style.css fixes every .form-control at 47px tall, which overrides the
   textarea's rows. Let rows decide the height again. */
textarea.form-control[b-epoto8b59o] {
    height: auto;
}

/* Center the Turnstile widget (a fixed-width box Cloudflare injects into this host). */
.human-check[b-epoto8b59o] {
    display: flex;
    justify-content: center;
}

/* Instructor rating stars. */
.rating-star[b-epoto8b59o] {
    padding: 0 0.15rem;
    font-size: 1.6rem;
    line-height: 1;
    color: #f5b301;
    text-decoration: none;
}

    .rating-star:hover[b-epoto8b59o],
    .rating-star:focus-visible[b-epoto8b59o] {
        color: #d99a00;
    }
/* /Components/Shared/InstructorDialog.razor.rz.scp.css */
/* Instructor headshot: as large as fits, without letting a tall photo push the buttons off
   a phone screen. */
.instructor-photo[b-wox6dyjeu1] {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    margin: 0 auto;
    border-radius: 0.5rem;
    object-fit: cover;
}

/* Stand-in while the page is read, and for instructors without a headshot. */
.instructor-initials[b-wox6dyjeu1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #6c757d;
    font-size: 3rem;
    font-weight: 600;
}