@import '_content/Fugu.UI/Fugu.UI.5m1h0x5xjj.bundle.scp.css';

/* /Pages/Players/ShowPlayer.razor.rz.scp.css */
/* ShowPlayer.razor.css — scoped, final */

/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;1,500;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@700&display=swap');*/

/* Root custom props */
:root[b-qy1kdjobc1] {
    /* How tall the Action pane should be on mobile (use dvh when supported) */
    --mobile-action-h: 60dvh; /* tweak between 60dvh–75dvh to taste */
}

/* Fallback for browsers without dynamic viewport units */
@supports not (height: 100dvh) {
    :root[b-qy1kdjobc1] {
        --mobile-action-h: 60vh;
    }
}

/* Base links */
a[b-qy1kdjobc1], .text-default[b-qy1kdjobc1] {
    color: #bf7629;
    text-decoration: none;
    font-size: 14px;
}

    a:hover[b-qy1kdjobc1], a:focus[b-qy1kdjobc1] {
        color: #e09200;
    }

/* Kendo basics */
.k-link[b-qy1kdjobc1] {
    color: #767846 !important;
}

    .k-link:hover[b-qy1kdjobc1] {
        color: #000 !important;
    }

.k-card-body[b-qy1kdjobc1] {
    padding: 0px;
}

.k-card-header[b-qy1kdjobc1] {
    padding: 0.25rem 1.25rem !important;
}

/* Neutralize any global .k-content height clamp just within this component */
.k-content[b-qy1kdjobc1] {
    height: auto !important;
}

.k-breadcrumb-link[b-qy1kdjobc1] {
    text-decoration: none;
    font-size: small;
    color: #767846 !important;
}

/* Banners */
.smallblockbanner[b-qy1kdjobc1] {
    width: 100%;
    background-color: #333;
    min-height: 60px;
    color: #fff;
    font-weight: 800;
    padding: 10px;
}

.largeblockbanner[b-qy1kdjobc1] {
    width: 100%;
    background-color: #333;
    min-height: 120px;
    color: #fff;
    font-weight: 800;
    padding: 10px;
}

/* Titles */
.showtitle[b-qy1kdjobc1] {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 45px;
    line-height: 100%;
}

a.showtitle[b-qy1kdjobc1] {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 100%;
    color: #000;
    text-decoration: none;
}

    a.showtitle:hover[b-qy1kdjobc1], a.showtitle:focus[b-qy1kdjobc1] {
        color: #767846;
    }

/* Hostname */
.hostname[b-qy1kdjobc1] {
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 100%;
    color: #000;
}

a.hostname[b-qy1kdjobc1] {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: #9ea05d;
    text-decoration: none;
}

    a.hostname:hover[b-qy1kdjobc1], a.hostname:focus[b-qy1kdjobc1] {
        color: #767846;
    }

/* Social */
.socialmediacontainer[b-qy1kdjobc1] {
    margin-top: -40px;
}

.socialmediaicons[b-qy1kdjobc1] {
    font-size: 18px;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.2);
}

    .socialmediaicons:hover[b-qy1kdjobc1] {
        color: rgba(0, 0, 0, 1);
    }

    .socialmediaicons:focus[b-qy1kdjobc1], .socialmediaicons:active[b-qy1kdjobc1] {
        color: rgba(0, 0, 0, 0.2);
    }

/* Utilities */
.desktophide[b-qy1kdjobc1] {
    display: none;
}

registertext[b-qy1kdjobc1], a.registertext[b-qy1kdjobc1] {
    font-size: 14px;
    text-align: right;
}

@media (max-width:768px) {
    .mobilehide[b-qy1kdjobc1] {
        display: none;
    }

    .socialmediacontainer[b-qy1kdjobc1] {
        margin-top: 0;
    }

    .showtitle[b-qy1kdjobc1], a.showtitle[b-qy1kdjobc1] {
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 20px;
        line-height: 100%;
        white-space: nowrap;
    }

    .hostname[b-qy1kdjobc1] {
        font-family: "Open Sans", sans-serif;
        font-weight: 300;
        font-size: 12px;
        line-height: 100%;
        color: #000;
        white-space: nowrap;
    }

    a.hostname[b-qy1kdjobc1] {
        font-family: "Open Sans", sans-serif;
        font-weight: 600;
        font-size: 14px;
        line-height: 100%;
        color: #9ea05d;
        text-decoration: none;
        white-space: nowrap;
    }

        a.hostname:hover[b-qy1kdjobc1], a.hostname:focus[b-qy1kdjobc1] {
            color: #767846;
        }

    .btn-FgOrange[b-qy1kdjobc1], a.btn-FgOrange[b-qy1kdjobc1], .btn-FgGreen[b-qy1kdjobc1], a.btn-FgGreen[b-qy1kdjobc1] {
        width: 100%;
        font-size: 14px;
        padding: 6px 10px;
    }

    registertext[b-qy1kdjobc1], a.registertext[b-qy1kdjobc1] {
        font-size: 14px;
        text-align: center;
    }
}

/* Buttons */
.btn-FgOrange[b-qy1kdjobc1], a.btn-FgOrange[b-qy1kdjobc1] {
    background-color: #d29000;
    color: #ffffff !important;
    border-color: #d29000;
    font-size: 14px;
    padding: 6px 10px;
}

    .btn-FgOrange:hover[b-qy1kdjobc1], .btn-FgOrange:focus[b-qy1kdjobc1], .btn-FgOrange:active[b-qy1kdjobc1], .btn-FgOrange.active[b-qy1kdjobc1], .open .dropdown-toggle.btn-FgOrange[b-qy1kdjobc1] {
        color: #ffffff !important;
        background-color: #e7a411;
        border-color: #d29000;
    }

    .btn-FgOrange.disabled[b-qy1kdjobc1], .btn-FgOrange[disabled][b-qy1kdjobc1], fieldset[disabled] .btn-FgOrange[b-qy1kdjobc1] {
        background-color: #cccccc;
        border-color: #cccccc;
    }

.btn-FgGreen[b-qy1kdjobc1], a.btn-FgGreen[b-qy1kdjobc1] {
    background-color: #9d9f5d;
    color: #ffffff !important;
    border-color: #9d9f5d;
    font-size: 14px;
    padding: 6px 10px;
}

    .btn-FgGreen:hover[b-qy1kdjobc1], .btn-FgGreen:focus[b-qy1kdjobc1], .btn-FgGreen:active[b-qy1kdjobc1], .btn-FgGreen.active[b-qy1kdjobc1], .open .dropdown-toggle.btn-FgGreen[b-qy1kdjobc1] {
        color: #ffffff !important;
        background-color: #b4b676;
        border-color: #9d9f5d;
    }

    .btn-FgGreen.disabled[b-qy1kdjobc1], .btn-FgGreen[disabled][b-qy1kdjobc1], fieldset[disabled] .btn-FgGreen[b-qy1kdjobc1] {
        background-color: #cccccc;
        border-color: #cccccc;
    }

/* Misc small tweaks */
@media only screen and (max-width: 768px) {
    #modalFooter[b-qy1kdjobc1] {
        display: flex;
        justify-content: left;
    }
}

/* LEDs + pulse */
.led-red[b-qy1kdjobc1] {
    margin: 0 auto;
    width: 24px;
    height: 24px;
    background-color: #F00;
    border-radius: 50%;
    box-shadow: rgba(0,0,0,0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255,0,0,0.5) 0 2px 12px;
    animation: blinkRed-b-qy1kdjobc1 0.5s infinite;
}

@keyframes blinkRed-b-qy1kdjobc1 {
    0% {
        background-color: #F00;
    }

    50% {
        background-color: #A00;
        box-shadow: rgba(0,0,0,0.2) 0 -1px 3px 1px, inset #441313 0 -1px 4px, rgba(255,0,0,0.5) 0 2px 0;
    }

    100% {
        background-color: #F00;
    }
}

.led-yellow[b-qy1kdjobc1] {
    margin: 0 auto;
    width: 8px;
    height: 8px;
    background-color: #FF0;
    border-radius: 50%;
    box-shadow: rgba(0,0,0,0.2) 0 -1px 3px 1px, inset #808002 0 -1px 4px, #FF0 0 2px 4px;
    animation: blinkYellow-b-qy1kdjobc1 1s infinite;
}

@keyframes blinkYellow-b-qy1kdjobc1 {
    0% {
        background-color: #FF0;
    }

    50% {
        background-color: #AA0;
        box-shadow: rgba(0,0,0,0.2) 0 -1px 3px 1px, inset #808002 0 -1px 2px, #FF0 0 2px 0;
    }

    100% {
        background-color: #FF0;
    }
}

.led-indicator[b-qy1kdjobc1] {
    margin: 0 auto;
    width: 24px;
    height: 24px;
    background-color: #ABFF00;
    border-radius: 50%;
    box-shadow: rgba(0,0,0,0.2) 0 -1px 3px 1px, inset #304701 0 -1px 2px, #89FF00 0 2px 4px;
}

.led-off[b-qy1kdjobc1] {
    margin: 0 auto;
    width: 8px;
    height: 8px;
    background-color: #999;
    border-radius: 50%;
    box-shadow: inset #000 0 -1px 1px, #666 0 2px 2px;
}

.led-on[b-qy1kdjobc1] {
    background: #22c55e;
    opacity: 1;
    box-shadow: 0 0 8px rgba(34,197,94,.8), 0 0 16px rgba(34,197,94,.6);
}

.led-pulse[b-qy1kdjobc1] {
    animation: ledPulse-b-qy1kdjobc1 1s ease-in-out infinite;
}

@keyframes ledPulse-b-qy1kdjobc1 {
    0% {
        transform: scale(1);
        box-shadow: 0 0 6px rgba(34,197,94,.5);
    }

    100% {
        transform: scale(1.08);
        box-shadow: 0 0 14px rgba(34,197,94,.9);
    }
}

/* Toggle icons */
.icon-toggle-player [data-prefix="far"][b-qy1kdjobc1] {
    display: inline-block;
}

.icon-toggle-player [data-prefix="fas"][b-qy1kdjobc1] {
    display: none;
}

.icon-toggle-player:hover [data-prefix="far"][b-qy1kdjobc1], .icon-toggle-player:focus-visible [data-prefix="far"][b-qy1kdjobc1] {
    display: none;
}

.icon-toggle-player:hover [data-prefix="fas"][b-qy1kdjobc1], .icon-toggle-player:focus-visible [data-prefix="fas"][b-qy1kdjobc1] {
    display: inline-block;
}

/* Icon colors */
button.icon-toggle-player.bookmark-btn[b-qy1kdjobc1],
button.icon-toggle-player.bookmark-btn:hover[b-qy1kdjobc1],
button.icon-toggle-player.bookmark-btn:focus-visible[b-qy1kdjobc1] {
    color: #9d9f5d !important;
}

button.icon-toggle-player.notes-btn[b-qy1kdjobc1],
button.icon-toggle-player.notes-btn:hover[b-qy1kdjobc1],
button.icon-toggle-player.notes-btn:focus-visible[b-qy1kdjobc1] {
    color: #d29000 !important;
}

/* Bookmark rail */
.bookmark-track[b-qy1kdjobc1] {
    position: relative;
    height: 18px;
    margin-top: 6px;
}

.bookmark-rail[b-qy1kdjobc1] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: rgba(255,255,255,.25);
    border-radius: 999px;
}

.bookmark-pin[b-qy1kdjobc1] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #dbeafe;
    border: 2px solid #2563eb;
    border-radius: 50%;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    outline: none;
}

    .bookmark-pin:hover[b-qy1kdjobc1], .bookmark-pin:focus-visible[b-qy1kdjobc1] {
        background: #2563eb;
    }

/* Headers */
.title-row[b-qy1kdjobc1] {
    font-weight: 600;
}

/* =========================
   DESKTOP LAYOUT (2 cols, 3 rows)
   Rows: [1] title, [2] video, [3] details
   Action pane spans rows 2–3 on the right
   ========================= */
.player-layout[b-qy1kdjobc1] {
    --header-offset: 64px; /* sticky site header height */
    --pad-x: 16px; /* page side padding */
    --pad-y: 0px; /* page top/bottom padding */
    --action-w: 420px; /* desktop action column width */

    padding: var(--pad-y,0px) var(--pad-x,16px);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0,1fr) var(--action-w,420px);
    grid-template-rows: auto auto auto; /* 1:title, 2:video, 3:details */
    gap: 1rem;
}

    /* Title spans only the left column, sits in row 1 */
    .player-layout > .title-row[b-qy1kdjobc1] {
        grid-column: 1 / 2;
        grid-row: 1;
        min-width: 0;
        padding-top: 13px;
    }

    /* Video sits under title on the left (row 2) */
    .player-layout > .video-box[b-qy1kdjobc1] {
        grid-column: 1 / 2;
        grid-row: 2;
        min-width: 0;
    }

    /* Details directly under video (row 3) */
    .player-layout > .details-content[b-qy1kdjobc1] {
        grid-column: 1 / 2;
        grid-row: 3;
        min-width: 0;
        margin-top: 0 !important;
    }

    /* Action pane spans rows 2–3 on the right */
    .player-layout > .action-pane[b-qy1kdjobc1] {
        grid-column: 2 / 3;
        grid-row: 2 / span 2;
        min-width: 0;
        min-height: 1px;
    }

/* Fixed right panel sized to browser height (desktop only) */
@supports (height: 100dvh) {
    .action-fixed[b-qy1kdjobc1] {
        position: fixed;
        top: calc(var(--header-offset,64px) + var(--pad-y,16px));
        right: var(--pad-x,16px);
        width: var(--action-w,420px);
        height: calc(100dvh - var(--header-offset,64px) - (var(--pad-y,16px) * 2));
        z-index: 1000;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* inner scroll only */
        box-sizing: border-box;
    }
}

@supports not (height: 100dvh) {
    .action-fixed[b-qy1kdjobc1] {
        position: fixed;
        top: calc(var(--header-offset,64px) + var(--pad-y,16px));
        right: var(--pad-x,16px);
        width: var(--action-w,420px);
        height: calc(100vh - var(--header-offset,64px) - (var(--pad-y,16px) * 2));
        z-index: 1000;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-sizing: border-box;
    }
}

/* Action internals */
.action-inner[b-qy1kdjobc1], .action-scroll[b-qy1kdjobc1] {
    min-height: 0;
}

.action-inner[b-qy1kdjobc1] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
    min-width: 0;
}

.action-scroll[b-qy1kdjobc1] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    min-width: 0;
    overflow: hidden; /* desktop: TabStrip pane scrolls */
    padding-left: 6px;
    padding-right: 2px;
}

/* =========================
   Reach into Telerik (CSS isolation) — DESKTOP
   ========================= */
.action-pane[b-qy1kdjobc1]  .k-tabstrip {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important; /* undo any .h-100 clamp */
}

.action-pane[b-qy1kdjobc1]  .k-tabstrip-items-wrapper,
.action-pane[b-qy1kdjobc1]  .k-tabstrip-items {
    flex: 0 0 auto !important; /* natural header height */
    min-width: 0 !important;
}

.action-pane[b-qy1kdjobc1]  .k-tabstrip .k-tabstrip-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
}
    /* Hide/show panes — robust for this build */
    .action-pane[b-qy1kdjobc1]  .k-tabstrip .k-tabstrip-content[aria-hidden="true"],
    .action-pane[b-qy1kdjobc1]  .k-tabstrip .k-tabstrip-content[hidden],
    .action-pane[b-qy1kdjobc1]  .k-tabstrip .k-tabstrip-content.k-hidden {
        display: none !important;
        visibility: hidden !important;
    }

    .action-pane[b-qy1kdjobc1]  .k-tabstrip .k-tabstrip-content[aria-hidden="false"],
    .action-pane[b-qy1kdjobc1]  .k-tabstrip .k-tabstrip-content.k-active,
    .action-pane[b-qy1kdjobc1]  .k-tabstrip .k-tabstrip-content.k-state-active {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        height: auto !important;
        overflow: auto !important; /* desktop: scroll inside active pane */
    }

    .action-pane[b-qy1kdjobc1]  .k-tabstrip .k-tabstrip-content:not(.k-active):not(.k-state-active):not([aria-hidden="false"]) {
        display: none !important;
        visibility: hidden !important;
    }

/* Admin/chat visual styles */
.action-pane[b-qy1kdjobc1]  .admin-button-row {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
}

.action-pane[b-qy1kdjobc1]  .mud-chat-bubble {
    min-height: 2.0em !important;
}

.action-pane[b-qy1kdjobc1]  .mud-chat-footer {
    font-size: .7rem;
    min-height: .5rem;
}

.action-pane[b-qy1kdjobc1]  .btn-icon {
    padding: .125rem .375rem;
    line-height: 1;
}

    .action-pane[b-qy1kdjobc1]  .btn-icon i {
        pointer-events: none;
    }

.action-pane[b-qy1kdjobc1]  .chat-message-wrapper {
    transition: outline-color .2s ease, box-shadow .2s ease;
}

/* Chat flags */
.action-pane[b-qy1kdjobc1]  .chat-flag-2 {
    outline: 2px solid var(--bs-success);
    outline-offset: 2px;
    border-radius: .5rem;
    box-shadow: 0 0 0 .1rem rgba(25,135,84,.15);
}

.action-pane[b-qy1kdjobc1]  .chat-flag-3 {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: .5rem;
    box-shadow: 0 0 0 .1rem rgba(13,110,253,.15);
}

.action-pane[b-qy1kdjobc1]  .chat-flag-4 {
    outline: 2px solid #6f42c1;
    outline-offset: 2px;
    border-radius: .5rem;
    box-shadow: 0 0 0 .1rem rgba(111,66,193,.15);
}

/* Neutralize global Kendo height clamp only inside this page */
.player-layout[b-qy1kdjobc1]  .k-content {
    height: auto !important;
}

/* =========================
   MOBILE (≤ 991.98px)
   Stack order is DOM order: Title → Video → Action → Details
   ========================= */
@media (max-width: 991.98px) {
    .player-layout[b-qy1kdjobc1] {
        grid-template-columns: 1fr !important;
        grid-auto-flow: row !important;
        grid-template-rows: auto auto auto !important; /* explicit rows */
        gap: 12px !important;
        padding: 12px !important;
    }

        .player-layout > .title-row[b-qy1kdjobc1],
        .player-layout > .video-box[b-qy1kdjobc1],
        .player-layout > .action-pane[b-qy1kdjobc1],
        .player-layout > .details-content[b-qy1kdjobc1] {
            grid-column: 1 / -1 !important;
            min-width: 0 !important;
            grid-row: auto !important; /* reset desktop row assignments */
        }

    /* Action is not fixed on mobile — it flows under the video */
    .action-fixed[b-qy1kdjobc1] {
        position: static !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        z-index: auto !important;
        /* KEEP A CONSTANT MOBILE HEIGHT (no jumping on tab change) */
        height: var(--mobile-action-h, 65vh) !important;
        min-height: var(--mobile-action-h, 65vh) !important;
        max-height: var(--mobile-action-h, 65vh) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .action-pane[b-qy1kdjobc1] {
        width: 100% !important;
        max-width: none !important;
        grid-row: auto !important;
    }

    .action-inner[b-qy1kdjobc1], .action-scroll[b-qy1kdjobc1] {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Single scroller region on mobile (constant height) */
    .action-scroll[b-qy1kdjobc1] {
        height: 100% !important;
        min-height: 0 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* On mobile, stop inner panes from scrolling — only .action-scroll should scroll */
    .action-pane[b-qy1kdjobc1]  .k-tabstrip .k-tabstrip-content[aria-hidden="false"],
    .action-pane[b-qy1kdjobc1]  .k-tabstrip .k-tabstrip-content.k-active,
    .action-pane[b-qy1kdjobc1]  .k-tabstrip .k-tabstrip-content.k-state-active {
        overflow: visible !important;
        height: auto !important;
    }

    /* Chat layout on mobile: message list scrolls inside our single scroller */
    .action-pane[b-qy1kdjobc1]  .chat-root {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .action-pane[b-qy1kdjobc1]  .chat-scroll {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: auto !important;
        width: 100% !important;
    }
}

/* — Optional bits — */
.video-box .videoplayer-wrap[b-qy1kdjobc1] {
    width: 100%;
}

/* GLOBAL WRAPPER PATCH (optional)
   If your site.css still has .scrollable-content { overflow-y:auto; }, neutralize it. */
:global(.scrollable-content)[b-qy1kdjobc1] {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Chat layout + composer pinned */
.action-pane[b-qy1kdjobc1]  .chat-wrapper,
.action-pane[b-qy1kdjobc1]  .chat-root {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
}

.action-pane[b-qy1kdjobc1]  .chat-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    width: 100% !important;
}

.action-pane[b-qy1kdjobc1]  .chat-composer {
    flex: 0 0 auto !important;
    padding-top: .5rem;
    margin-top: .5rem;
    border-top: 1px solid rgba(0,0,0,.08);
    background: var(--bs-body-bg, #fff);
}

.action-pane[b-qy1kdjobc1]  .composer-row {
    margin-top: 0 !important;
}

.action-pane[b-qy1kdjobc1]  .new-msg-pill {
    position: absolute;
    right: 10px;
    bottom: 88px;
    z-index: 1000;
}

.action-pane[b-qy1kdjobc1]  .chat-root {
    display: grid !important;
    grid-template-rows: minmax(0,1fr) auto !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
}

.action-pane[b-qy1kdjobc1]  .chat-scroll {
    min-height: 0 !important;
    overflow: auto !important;
    width: 100% !important;
}

.action-pane[b-qy1kdjobc1]  .chat-footer {
    position: relative;
    padding-top: .5rem;
    background: transparent;
}

.action-pane[b-qy1kdjobc1]  .composer-row {
    margin-top: .25rem;
}

/* Mobile: ensure message list has some minimum height while composer stays visible */
@media (max-width: 991.98px) {
    .action-pane[b-qy1kdjobc1]  .chat-scroll {
        min-height: 40vh !important;
        height: auto !important;
    }
}

/* --- Mobile action height overrides --- */
@media (max-width: 991.98px) {
    .player-layout[b-qy1kdjobc1] {
        --mobile-action-h: 60dvh;
    }
}

@supports not (height: 100dvh) {
    @media (max-width: 991.98px) {
        .player-layout[b-qy1kdjobc1] {
            --mobile-action-h: 60vh;
        }
    }
}

@media (max-width: 575.98px) {
    .player-layout[b-qy1kdjobc1] {
        --mobile-action-h: 55dvh;
    }
}
/* /Pages/Primary/Members.razor.rz.scp.css */
/* Make only the list scroll inside each tab */
.tab-body[b-1xyl1i43s4] {
    /* nothing special here—just a semantic wrapper */
}

/* Height of the scrollable list area; tweak as desired */
.tab-scroll[b-1xyl1i43s4] {
    height: 70vh; /* ensures Virtualize knows the container viewport size */
    /* overflow is set inline in markup via .overflow-auto */
}

/* Keep header visually on top if it gets near edges during scroll */
.tab-header[b-1xyl1i43s4] {
    z-index: 2; /* sits above the list content */
}

/* Spinner overlay inside the scrolling list area */
.members-spinner-top[b-1xyl1i43s4] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: none;
    justify-content: center;
    padding: .5rem 0;
    background: var(--bs-body-bg);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

    .members-spinner-top.show[b-1xyl1i43s4] {
        display: flex;
    }

/* Sticky spinner inside the scroll area for HOSTS (under the search) */
.hosts-spinner-top[b-1xyl1i43s4] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: none;
    justify-content: center;
    padding: .5rem 0;
    background: var(--bs-body-bg);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

    .hosts-spinner-top.show[b-1xyl1i43s4] {
        display: flex;
    }
/* /Pages/Primary/Series.razor.rz.scp.css */
/* 3-col layout: left | center | right */
.center-3col-grid[b-8s627xdti3] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    width: 100%; /* fill the row even if parent is flex */
}

.center-3col-left[b-8s627xdti3] {
    justify-self: start;
}

.center-3col-mid[b-8s627xdti3] {
    justify-self: center;
    min-width: 0;
}

.center-3col-right[b-8s627xdti3] {
    justify-self: end;
}
/* /Pages/Primary/VideoViewer.razor.rz.scp.css */
/*.popup-menu {
    position: absolute;
    top: 40px;*/ /* Adjust to position below the button */
    /*right: 0;
    background: white;
    border-radius: 5px;
    padding: 10px;
    z-index: 1000;
    min-width: 200px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.hidden-multiselect .k-input {
    display: none !important;
}

.telerik-autocomplete .k-input-prefix {
    display: flex;
    align-items: center;
    height: 100%;
}

.k-input-inner {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}*/

/* Reduce or increase the height and width of the separator */
/*.k-input-separator {
    height: 100% !important;*/ /* Ensure it stretches vertically */
    /*width: 2px !important;*/ /* Adjust thickness */
    /*background-color: #ccc !important;*/ /* Change color if needed */
    /*margin: 0 8px !important;*/ /* Adjust spacing */
/*}

    .k-input-separator k-input-separator-vertical {
        height: 100% !important;*/ /* Ensure it stretches vertically */
        /*width: 2px !important;*/ /* Adjust thickness */
        /*background-color: #ccc !important;*/ /* Change color if needed */
        /*margin: 0 8px !important;*/ /* Adjust spacing */
    /*}

.custom-multiselect .k-input-separator {
    height: 100% !important;
    width: 3px !important;
    background-color: #007bff !important; /* Blue separator */
}


.k-list-item.k-selected[b-3i0jfsr3ct], .k-selected.k-list-optionlabel[b-3i0jfsr3ct] {
    background-color: #f29532 !important;
}


    .k-list-item.k-selected:hover[b-3i0jfsr3ct], .k-selected.k-list-optionlabel:hover[b-3i0jfsr3ct], .k-list-item.k-selected.k-hover[b-3i0jfsr3ct], .k-selected.k-hover.k-list-optionlabel[b-3i0jfsr3ct] {
        color: #ffffff;
        background-color: #f29532 !important;
    }

/* /Pages/Private/ManageAccount.razor.rz.scp.css */
.faded[b-2sg98feg7p] {
    opacity: 0.1;
}

.icon-wrapper[b-2sg98feg7p] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.icon-delete-btn[b-2sg98feg7p] {
    position: absolute;
    bottom: -5px;
    right: -5px;
    font-size: 10px;
    background-color: red;
    color: white;
    border: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    padding: 0;
    line-height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.editor-char-count[b-2sg98feg7p] {
    position: absolute;
    top: 8px;
    right: 30px;
    font-size: 0.9em;
    color: gray;
}

    .editor-char-count.over-limit[b-2sg98feg7p] {
        color: red;
        font-weight: bold;
    }

@media (max-width: 768px) {
    .editor-char-count[b-2sg98feg7p] {
        top: -22px;
        right: 4px;
    }
}




/* /Shared/Components/Carousel.razor.rz.scp.css */
/*hero classes: begin*/
.hero-image-with-text[b-7v1mpmdvwl] {
    position: relative;
    width: 100%;
    /* height: 400px;*/ /* Carousel Height */
    height: 100%; /* Carousel Height */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Prevents any content from overflowing */
}

.hero-slide[b-7v1mpmdvwl] {
    position: relative;
    flex-direction: column;
    justify-content: space-between; /* Pushes text up & buttons down */
    align-items: center;
    width: 100%;
    height: 100%; /* Ensures it does not exceed the carousel */
    max-height: 100%; /* Prevents overflow */
    overflow: hidden; /* Ensures no unwanted scrolling */
    background: transparent;
}

.hero-content[b-7v1mpmdvwl] {
    display: flex;
    /* align-items: flex-start;*/ /* Aligns content to the top */
    justify-content: center;
    width: 100%;
    /* height: 100%;*/
    /*overflow: hidden;*/ /* Hide overflow but allow wrapping */
}

.hero-button-container[b-7v1mpmdvwl] {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%); /* keep centered */
    z-index: 2; /* ensure it’s above background/image */
}

/*.hero-angled-box-white,
.hero-angled-box-black {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 280px;
    text-align: center;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 0;
    transition: opacity 0.3s ease;*/ /* Ensures smooth transition */
/*}

@media (max-width: 992px) {
    .hero-angled-box-white,
    .hero-angled-box-black {
        height: 60px;*/
  /*      width: 170px;*/
        /*font-size: 0.8rem;
    }
}

.hero-angled-box-white {
    background-color: white;
    color: black;*/
    /* clip-path: polygon(0 0, 95% 0, 100% 100%, 0 100%);*/
    /*overflow: visible;*/
    /*transform: skewX(13deg);
    margin-right: 5px;*/
    /* padding: 1rem 2rem;*/
    /* display: block;*/
    /*background-color: rgba(255, 255, 255, 1);*/ /* solid initially */
    /*transition: background-color 0.3s ease;
}

.hero-angled-box-white .unskew {
    transform: skewX(-13deg);*/ /* reverse the outer skew */
/*}

.hero-angled-box-white:hover {
    background-color: rgba(255, 255, 255, 0.7);*/ /* faded black, but text remains fully visible */
/*}*/

/*    .hero-angled-box-white .unskew:hover {
        opacity: 1 !important;
    }*/

/*.hero-angled-box-black {
    background-color: black;
    color: white;*/
    /* clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);*/
    /*overflow: visible;*/
    /*transform: skewX(13deg);
    margin-left: 5px;*/
    /*    padding: 1rem 2rem;*/
    /* display: block;*/
    /*background-color: rgba(0, 0, 0, 1);*/ /* solid initially */
    /*transition: background-color 0.3s ease;
}

    .hero-angled-box-black .unskew {
        transform: skewX(-13deg);*/ /* reverse the outer skew */
    /*}

    .hero-angled-box-black:hover {
        background-color: rgba(0, 0, 0, 0.7);*/ /* faded black, but text remains fully visible */
    /*}*/

/*    .hero-angled-box-black .unskew:hover {
        opacity: 1 !important;
    }*/

    /* Apply hover effect only to the background */
   /* .hero-angled-box-white:hover,
    .hero-angled-box-black:hover {
        opacity: 0.8;
        color: inherit;
    }*/

    /* Optional: reinforce that text stays opaque */
/*    .hero-angled-box-black div {
        opacity: 1 !important;
    }
*/



/*hero classes: end*/


.carousel-control-next[b-7v1mpmdvwl] {
    border: none;
    width: 10%;
    color: #fff;
    background: none;
    text-align: center;
    transition: opacity .15s ease;
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
}

.carousel-control-prev[b-7v1mpmdvwl] {
    border: none;
    width: 10%;
    color: #fff;
    background: none;
    text-align: center;
    transition: opacity .15s ease;
    background-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1));
}

.carousel-container[b-7v1mpmdvwl] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px; /* or whatever your minimum expected height */
}

.fade-transition[b-7v1mpmdvwl] {
    transition: opacity 0.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hidden[b-7v1mpmdvwl] {
    opacity: 0;
    pointer-events: none;
}

.visible[b-7v1mpmdvwl] {
    opacity: 1;
}



/*.carousel-inner img {
    width: 100%;*/
    /*padding-top: 15.1625%;*/ /*1920px x 300px image*/
    /*max-height: 500px;
}

.carousel-caption {
    text-align: center;
    bottom: 5%;
}

.carousel-title {
    color: #fff;
    font-family: Oswald;
    font-size: 4rem;
    font-weight: 800;
}

a.carousel-title:link,
a.carousel-titlee:visited,
a.carousel-title:active {
    color: #fff;
    text-decoration: none;
}

@media (max-width: 480px) {
    .carousel-title {
        font-size: 3rem;
    }
}*/

/*.carousel-subtitle {
    color: #9d9f5d;
    font-family: 'Open Sans';
    font-size: 1rem;
    font-weight: 300;
    padding-top: 10px;
}

@media (max-width: 480px) {
    .carousel-subtitle {
        font-family: 'Open Sans';
        font-size: 1rem;
        font-weight: 300;
        padding-top: 10px;
    }
}*/
/*
.carousel-footer {
    color: #fff;
    font-family: 'Open Sans';
    font-size: 1.2rem;
    font-weight: 300;
}
*/
/* /Shared/Components/DateCountdownByScheduledDate.razor.rz.scp.css */
.hero-countdown-grid[b-gk1wwh96j0] {
    display: flex;
    align-items: flex-start; /* Aligns elements to the top */
    text-align: center;
    gap: 5px; /* Controls spacing between elements */
}

.hero-countdown-item[b-gk1wwh96j0] {
    display: flex;
    flex-direction: column; /* Stacks numbers over labels */
    align-items: center;
}

.hero-countdown-label[b-gk1wwh96j0] {
    font-size: 0.6rem; /* Smaller font for labels */
    font-family: Oswald;
    color: #9d9f5d;
    margin-top: 5px; /* Ensures proper spacing */
    letter-spacing: 0.1rem;
}

.hero-countdown-colon[b-gk1wwh96j0] {
    display: flex;
    align-items: flex-start; /* Aligns colon with the numbers */
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 500;
    font-family: 'Roboto Mono', monospace;
    line-height: 1; /* Ensures it aligns with numbers */
    padding: 0 0px; /* Adds spacing between colons */
}

.glow-text[b-gk1wwh96j0] {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    animation: glowPulse-b-gk1wwh96j0 1.5s ease-in-out infinite alternate;
}

    .glow-text:hover[b-gk1wwh96j0] {
        color: #ff9999;
        text-decoration: underline;
    }

@keyframes glowPulse-b-gk1wwh96j0 {
    from {
        text-shadow: 0 0 10px #f00, 0 0 20px #f00, 0 0 30px #f00;
    }

    to {
        text-shadow: 0 0 20px #ff5050, 0 0 30px #ff5050, 0 0 40px #ff5050;
    }
}
/* /Shared/Components/DialogComponents/ImageUploadComponent.razor.rz.scp.css */
.drop-zone[b-7muzjvtrez] {
    border: 2px dashed #ccc;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Highlight when dragging */
.drop-zone.dragover[b-7muzjvtrez] {
    border-color: #28a745; /* Bootstrap success green */
    background-color: rgba(40, 167, 69, 0.05); /* Light green background */
}


.fade-in[b-7muzjvtrez] {
    animation: fadeIn-b-7muzjvtrez 0.5s ease-in-out;
}

@keyframes fadeIn-b-7muzjvtrez {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.success-animation[b-7muzjvtrez] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px); /* optional: slight blur */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.8s ease-out;
    z-index: 2000;
}

    .success-animation.fade-out[b-7muzjvtrez] {
        opacity: 0;
    }

.checkmark-circle[b-7muzjvtrez] {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #28a745;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popIn-b-7muzjvtrez 0.5s ease-out forwards, pulse-b-7muzjvtrez 1.2s ease-in-out 1;
}

.checkmark[b-7muzjvtrez] {
    width: 40px;
    height: 80px;
    border-right: 6px solid white;
    border-bottom: 6px solid white;
    transform: rotate(45deg);
    animation: stroke-b-7muzjvtrez 0.5s ease-out forwards;
}

.success-text[b-7muzjvtrez] {
    color: white;
    margin-top: 20px;
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0;
    animation: fadeIn-b-7muzjvtrez 1s ease forwards;
    animation-delay: 0.5s;
}

@keyframes popIn-b-7muzjvtrez {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }

    80% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes stroke-b-7muzjvtrez {
    0% {
        height: 0;
        width: 0;
        opacity: 0;
    }

    50% {
        height: 0;
        width: 40px;
        opacity: 1;
    }

    100% {
        height: 80px;
        width: 40px;
        opacity: 1;
    }
}

@keyframes fadeIn-b-7muzjvtrez {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes pulse-b-7muzjvtrez {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* /Shared/Components/DialogComponents/VideoPlayerBasicComponent.razor.rz.scp.css */
#jwplayercontainer[b-guynru40no] {
    position: relative;
    width: 100%; /* Fill the width of the parent */
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 * 100) */
    background-color: black; /* Optional: fallback background color */
}

    #jwplayercontainer > div[b-guynru40no] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


.icon-btn[b-guynru40no] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    /*    padding: 5px;*/
}

    .icon-btn:hover i[b-guynru40no] {
        color: #782f30; /* Change color on hover */
    }

.fixed-width-counter[b-guynru40no] {
    display: inline-block;
    width: 20px; /* Adjust based on expected number width */
    text-align: left;
}

.comments-box[b-guynru40no] {
    height: 300px; /* Set the desired height */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #ddd; /* Optional: Add a border */
    padding: 10px; /* Optional: Add padding inside the box */
    background-color: #f9f9f9; /* Optional: Background color for better visibility */
    margin-bottom: 0; /* Remove bottom margin from comments section */
}

.no-space[b-guynru40no] {
    margin: 0; /* Remove default margins for ASP.NET controls */
}

.comment[b-guynru40no] {
    margin-bottom: 10px; /* Add space between comments */
}

.comments-box[b-guynru40no] {
    height: 300px; /* Set the desired height */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #ddd; /* Optional: Add a border */
    padding: 10px; /* Optional: Add padding inside the box */
    background-color: #f9f9f9; /* Optional: Background color for better visibility */
    margin-bottom: 0; /* Remove bottom margin from comments section */
}

.tabs-box[b-guynru40no] {
    height: 200px; /* Set the desired height */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #ddd; /* Optional: Add a border */
    padding: 10px; /* Optional: Add padding inside the box */
    background-color: #f9f9f9; /* Optional: Background color for better visibility */
    margin-bottom: 0;
}

.text-muted[b-guynru40no] {
    font-size: 14px;
    opacity: 0.9;
}

.unstyled-button[b-guynru40no] {
    all: unset; /* Remove all inherited styles */
    cursor: pointer; /* Ensure the button still looks clickable */
    display: inline; /* Optional: Make it behave like plain text */
}

.badge-pill[b-guynru40no] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    color: #fff;
    background-color: #666;
    border-radius: 50px;
}

    .badge-pill .btn-close[b-guynru40no] {
        margin-left: 8px;
        color: #fff;
        background: none;
        border: none;
        cursor: pointer;
    }

/*.video-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .video-container img {
        width: 100%;
        height: auto;
        border-radius: 5px;
        display: block;*/ /* Ensures it doesn’t inline with text */
/*}*/

.overlayUserFileImage[b-guynru40no] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 1; /* Ensure it’s above the image */
}

.sharemodal-overlay[b-guynru40no] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.sharemodal-content[b-guynru40no] {
    background: white;
    padding: 20px;
    border-radius: 10px;
    min-width: 350px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.share-option[b-guynru40no] {
    margin: 10px 0;
}

.btn-facebook[b-guynru40no] {
    background-color: #3b5998;
    color: white;
}

.btn-twitter[b-guynru40no] {
    background-color: #1DA1F2;
    color: white;
}

.btn-linkedin[b-guynru40no] {
    background-color: #0077b5;
    color: white;
}

.btn-whatsapp[b-guynru40no] {
    background-color: #25D366;
    color: white;
}

.d-flex a[b-guynru40no] {
    font-size: 1.5rem;
    padding: 10px;
    border-radius: 50%;
}

.video-comments-container[b-guynru40no] {
    display: flex;
    align-items: stretch; /* Ensures both divs match height */
}

.comments-container[b-guynru40no] {
    display: flex;
    flex-direction: column;
    flex: 1; /* Takes up the same height as the video div */
}

#comments-section[b-guynru40no] {
    flex-grow: 1; /* Expands to fill the available space */
    overflow-y: auto; /* Enables scrolling if needed */
    min-height: 200px; /* Ensures minimum height */
}

#search-box[b-guynru40no] {
    width: 0;
    transition: width 0.3s ease-in-out;
    overflow: hidden;
}

    #search-box.expanded[b-guynru40no] {
        width: 200px; /* Adjust width as needed */
    }
/* /Shared/Components/HelpComponent.razor.rz.scp.css */
/* ======= HELP COMPONENT FINAL STYLES ======= */

/* Outer wrapper: defines position context */
.help-wrapper[b-1wrab4cq7u] {
    position: relative;
    display: inline-block;
}

/* Holds only the icon — keeps layout stable */
.help-trigger[b-1wrab4cq7u] {
    display: inline-block;
}

/* Smaller ? icon with mid-grey background */
.help-pill[b-1wrab4cq7u] {
    width: 18px;
    height: 18px;
    background-color: #888888;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 16px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    margin-left: 0px;
    user-select: none;
}

.points-pill[b-1wrab4cq7u] {
    width: 24px;
    height: 18px;
    background-color: #9d9f5d;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 16px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    margin-left: 0px;
    user-select: none;
}

/* Help popup: absolutely positioned next to icon */
.help-popup[b-1wrab4cq7u] {
    position: absolute;
    background-color: #ffffff;
    border: 1px solid #ccc;
    padding: 12px 16px;
    padding-top: 28px; /* for close button */
    font-size: 14px;
    width: 300px;
    max-width: 90vw;
    z-index: 1001;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

    /* default (to the right, your current behavior) */
    .help-popup.placement-default[b-1wrab4cq7u] {
        top: 0;
        left: 28px;
    }

    /* below the pill */
    .help-popup.placement-below[b-1wrab4cq7u] {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 8px;
    }

    /* to the left of the pill */
    .help-popup.placement-left[b-1wrab4cq7u] {
        top: 0;
        right: 110%;
        left: auto;
    }

    /* above the pill */
    .help-popup.placement-top[b-1wrab4cq7u] {
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        margin-bottom: 8px;
    }

/* Close button — absolutely positioned, does NOT shift text */
.help-close[b-1wrab4cq7u] {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: none;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

    .help-close:hover[b-1wrab4cq7u] {
        color: #000;
    }

/* Spinner */
.spinner[b-1wrab4cq7u] {
    width: 20px;
    height: 20px;
    border: 3px solid #ccc;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin-b-1wrab4cq7u 0.7s linear infinite;
    margin: auto;
}

@keyframes spin-b-1wrab4cq7u {
    to {
        transform: rotate(360deg);
    }
}

/* Click-off background overlay */
.help-clickoff-overlay[b-1wrab4cq7u] {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

/* Mobile full-screen behavior */
@media (max-width: 768px) {
    .help-popup[b-1wrab4cq7u] {
        position: fixed !important;
        top: 2rem !important; /* adjust based on how far from top you want it */
        left: 1rem !important;
        right: 1rem !important;
        width: auto !important;
        margin: 0 auto !important;
        z-index: 1050; /* make sure it's on top */
        max-width: none !important;
        border-radius: 0.5rem;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}
/* /Shared/Components/Players/ChatComponent.razor.rz.scp.css */
.admin-button-row[b-88yukeod7t] {
	display: flex;
	gap: 4px;
	margin-bottom: 4px;
}

.mud-chat-bubble[b-88yukeod7t] {
	min-height: 2.0em !important;
}

.mud-chat-footer[b-88yukeod7t] {
	font-size: .7rem;
	min-height: .5rem;
}

.btn-icon[b-88yukeod7t] {
	padding: .125rem .375rem;
	line-height: 1;
}

	.btn-icon i[b-88yukeod7t] {
		pointer-events: none;
	}
/* keep clicks on the button */

/* Smooth visual change */
.chat-message-wrapper[b-88yukeod7t] {
	transition: outline-color .2s ease, box-shadow .2s ease;
}

/* Admin (2) */
.chat-flag-2[b-88yukeod7t] {
	outline: 2px solid var(--bs-success);
	outline-offset: 2px;
	border-radius: .5rem;
	box-shadow: 0 0 0 .1rem rgba(25,135,84,.15);
}

/* Moderator (3) */
.chat-flag-3[b-88yukeod7t] {
	outline: 2px solid var(--bs-primary);
	outline-offset: 2px;
	border-radius: .5rem;
	box-shadow: 0 0 0 .1rem rgba(13,110,253,.15);
}

/* Both (4) */
.chat-flag-4[b-88yukeod7t] {
	outline: 2px solid #6f42c1; /* Bootstrap purple */
	outline-offset: 2px;
	border-radius: .5rem;
	box-shadow: 0 0 0 .1rem rgba(111,66,193,.15);
}
/* /Shared/Components/UploadVideoVimeo.razor.rz.scp.css */
/* Default label text for larger screens */
/*.thumbnail-label::after {
    content: "Thumbnail (in seconds):";
}

.tags-label::after {
    content: "Search Tags:";
}*/

/* Shortened label text for mobile devices */
/*@media (max-width: 600px) {
    .thumbnail-label::after {
        content: "Thumbnail:";
    }

    .tags-label::after {
        content: "Tags:";
    }
}*/

/* /Shared/Components/UserAvatarComponent.razor.rz.scp.css */
.avatar-size-sm[b-hsyc4ulzfh] {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
}

.avatar-size-md[b-hsyc4ulzfh] {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
}

.avatar-size-lg[b-hsyc4ulzfh] {
    width: 64px;
    height: 64px;
    font-size: 2.0rem;
}

.avatar-size-xlg[b-hsyc4ulzfh] {
    width: 150px;
    height: 150px;
    font-size: 3.0rem;
}

.avatar-size-xxlg[b-hsyc4ulzfh] {
    width: 250px;
    height: 250px;
    font-size: 3.3rem;
}

.avatar-size-xxxlg[b-hsyc4ulzfh] {
    width: 400px;
    height: 400px;
    font-size: 4.0rem;
}


.avatar-img[b-hsyc4ulzfh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-fallback[b-hsyc4ulzfh] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #6c757d;
    color: white;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;    
    line-height: 1;
    padding: 4px;
}

.avatar-container[b-hsyc4ulzfh] {
    display: inline-flex; /* Align inline like an icon */
    align-items: center; /* Vertically center content */
    justify-content: center;
    vertical-align: middle; /* Align with surrounding text/icons */
    line-height: 1; /* Remove inherited line spacing */
}

    .avatar-container img[b-hsyc4ulzfh],
    .avatar-fallback[b-hsyc4ulzfh] {
        /* display: block; /* Remove extra inline spacing */ */
    }

/*@media (max-width: 767.98px) {
    .avatar-size-sm {
        width: 10px;
        height: 10px;
    }
}*/
/* /Shared/Components/VideoPlayerComponent.razor.rz.scp.css */
#jwplayercontainer[b-s1tdaudil8] {
    position: relative;
    width: 100%; /* Fill the width of the parent */
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 * 100) */
    background-color: black; /* Optional: fallback background color */
}

    #jwplayercontainer > div[b-s1tdaudil8] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


.icon-btn[b-s1tdaudil8] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
/*    padding: 5px;*/
}

    .icon-btn:hover i[b-s1tdaudil8] {
        color: #782f30; /* Change color on hover */
    }

.fixed-width-counter[b-s1tdaudil8] {
    display: inline-block;
    width: 20px; /* Adjust based on expected number width */
    text-align: left;
}

.comments-box[b-s1tdaudil8] {
    height: 300px; /* Set the desired height */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #ddd; /* Optional: Add a border */
    padding: 10px; /* Optional: Add padding inside the box */
    background-color: #f9f9f9; /* Optional: Background color for better visibility */
    margin-bottom: 0; /* Remove bottom margin from comments section */
}

.no-space[b-s1tdaudil8] {
    margin: 0; /* Remove default margins for ASP.NET controls */
}

.comment[b-s1tdaudil8] {
    margin-bottom: 10px; /* Add space between comments */
}

.comments-box[b-s1tdaudil8] {
    height: 300px; /* Set the desired height */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #ddd; /* Optional: Add a border */
    padding: 10px; /* Optional: Add padding inside the box */
    background-color: #f9f9f9; /* Optional: Background color for better visibility */
    margin-bottom: 0; /* Remove bottom margin from comments section */
}

.tabs-box[b-s1tdaudil8] {
    height: 200px; /* Set the desired height */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #ddd; /* Optional: Add a border */
    padding: 10px; /* Optional: Add padding inside the box */
    background-color: #f9f9f9; /* Optional: Background color for better visibility */
    margin-bottom: 0; 
}

.text-muted[b-s1tdaudil8] {
    font-size: 14px;
    opacity: 0.9;
}

.unstyled-button[b-s1tdaudil8] {
    all: unset; /* Remove all inherited styles */
    cursor: pointer; /* Ensure the button still looks clickable */
    display: inline; /* Optional: Make it behave like plain text */
}

.badge-pill[b-s1tdaudil8] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    color: #fff;
    background-color: #666;
    border-radius: 50px;
}

    .badge-pill .btn-close[b-s1tdaudil8] {
        margin-left: 8px;
        color: #fff;
        background: none;
        border: none;
        cursor: pointer;
    }

/*.video-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .video-container img {
        width: 100%;
        height: auto;
        border-radius: 5px;
        display: block;*/ /* Ensures it doesn’t inline with text */
    /*}*/

.overlayUserFileImage[b-s1tdaudil8] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 1; /* Ensure it’s above the image */
}

.sharemodal-overlay[b-s1tdaudil8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.sharemodal-content[b-s1tdaudil8] {
    background: white;
    padding: 20px;
    border-radius: 10px;
    min-width: 350px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.share-option[b-s1tdaudil8] {
    margin: 10px 0;
}

.btn-facebook[b-s1tdaudil8] {
    background-color: #3b5998;
    color: white;
}

.btn-twitter[b-s1tdaudil8] {
    background-color: #1DA1F2;
    color: white;
}

.btn-linkedin[b-s1tdaudil8] {
    background-color: #0077b5;
    color: white;
}

.btn-whatsapp[b-s1tdaudil8] {
    background-color: #25D366;
    color: white;
}

.d-flex a[b-s1tdaudil8] {
    font-size: 1.5rem;
    padding: 10px;
    border-radius: 50%;
}

.video-comments-container[b-s1tdaudil8] {
    display: flex;
    align-items: stretch; /* Ensures both divs match height */
}

.comments-container[b-s1tdaudil8] {
    display: flex;
    flex-direction: column;
    flex: 1; /* Takes up the same height as the video div */
}

#comments-section[b-s1tdaudil8] {
    flex-grow: 1; /* Expands to fill the available space */
    overflow-y: auto; /* Enables scrolling if needed */
    min-height: 200px; /* Ensures minimum height */
}

#search-box[b-s1tdaudil8] {
    width: 0;
    transition: width 0.3s ease-in-out;
    overflow: hidden;
}

    #search-box.expanded[b-s1tdaudil8] {
        width: 200px; /* Adjust width as needed */
    }

/* /Shared/Elements/Impersonation.razor.rz.scp.css */
.impersonation-bar[b-qdo34ay9br] {
    background-color: cornsilk !important; 
    color: #000 !important;
    /* ensure it sits above headers if needed */
    z-index: 1050;
}

.impersonation-bar a[b-qdo34ay9br],
.impersonation-stop-link[b-qdo34ay9br] {
    color: #000 !important;
}
/* /Shared/Elements/PrimaryNavigation.razor.rz.scp.css */
/* /Shared/Elements/UtilityBar.razor.rz.scp.css */
/* Desktop utility bar: 3-column grid */
.utilitybar-grid[b-c89f1z6q5k] {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* left | center | right */
    align-items: center;
    gap: 12px;
}

/* Place items */
.utilitybar-left[b-c89f1z6q5k] {
    justify-self: start;
}

.utilitybar-center[b-c89f1z6q5k] {
    justify-self: center;
}

.utilitybar-right[b-c89f1z6q5k] {
    justify-self: end;
}

/* (Optional) Prevent center jumps if it grows too wide */
.utilitybar-center[b-c89f1z6q5k] {
    min-width: 0; /* allow shrinking */
    overflow: visible; /* or hidden/clip if you want clipping */
    white-space: nowrap; /* keep your points/badges on one line */
}

.topbar[b-c89f1z6q5k] {
    overflow: visible;
}
/* allow the collapse to expand below */
.search-box.collapse[b-c89f1z6q5k] {
    width: 100%;
}
/* full-width under the bar */