/* Hide server-rendered Vue expressions until their component has mounted. */
[v-cloak] { display: none !important; }

body .home_banner > .overlay {
    background-color: var(--18m-image-tint, #13793b) !important;
    opacity: var(--18m-home-tint-opacity, 1) !important;
    pointer-events: none;
}
body .bg-image-overlay .overlay-green,
body.group-home .group_single_header .group_image .overlay {
    background-color: var(--18m-image-tint, #13793b) !important;
    opacity: var(--18m-photo-tint-opacity, .5) !important;
    pointer-events: none;
}
body .bg-green-900 { background-color: var(--green); }
body .bg-green-800 { background-color: var(--fern-green); }
body .bg-green-700 { background-color: var(--light-green); }
body .text-green-900 { color: var(--green); }
body .text-green-800 { color: var(--fern-green); }
body .text-green-700 { color: var(--light-green); }
body .border-green-900 { border-color: var(--green); }
body .hover\:bg-green-800:hover { background-color: var(--fern-green); }

@media (max-width: 767px) {
    #vueDashboardNavigation #item-nav { display: none !important; }
    #vueDashboardNavigation { width: 0; min-width: 0; }
}

/* Keep the group picture in its half of the flex row. */
.group-home .group_single_header { align-items: stretch; }
.group-home .group_single_header > div { min-width: 0; }
.group-home .group_single_header .group-image-column { margin: 0; }
.group-home .group_single_header .group_image { width: 100%; height: 100%; background-position: center; }
@media (min-width: 768px) {
    .group-home .group_single_header > div:first-child { padding-right: 2rem; }
}

.swing-upload { display: inline-flex; flex-direction: column; gap: .5rem; max-width: 100%; }
.swing-upload__button { display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 100px; padding: 10px 20px; background: var(--green); color: white; cursor: pointer; font-size: 14px; min-height: 42px; }
.swing-upload__button:hover { background: var(--fern-green); }
.swing-upload__button:focus-within { outline: 2px solid var(--green); outline-offset: 3px; }
.swing-upload__button input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.swing-upload__error { color: #b00020; font-size: 14px; }
.swing-upload-panel { padding: 1rem 0; margin-bottom: 1.5rem; border-bottom: 1px solid #dedede; }
.swing-upload-panel__grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.swing-upload-panel__card { flex: 1 1 240px; min-width: 0; }
.swing-upload-panel__card h4 { margin-bottom: .75rem; }
.swing-upload-panel__card video { width: 100%; height: 250px; object-fit: contain; background: #121212; border-radius: 12px; margin-bottom: .75rem; }
.swing-upload-panel p { margin-bottom: 1rem; }
.first-swing .recent-videos-grid.items-center { align-items: flex-start; }
.recent-upload-grid__fs-top-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    z-index: 21;
    width: 100%;
    min-height: 42px;
    /* Profile styles use a negative margin to overlap the old controls with the video. */
    margin: 0 0 12px !important;
}
.recent-upload-grid__fs-top-actions > .swing-upload {
    flex: 0 0 auto;
    margin: 0 !important;
}
.recent-upload-grid__fs-top-actions .swing-upload__button { background: #121212; height: 42px; box-sizing: border-box; }
.recent-upload-grid__fs-top-actions > .recent-upload-single-fullscreen {
    margin: 0 !important;
    flex: 0 0 auto;
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 164px;
    min-height: 42px;
    height: 42px;
    padding: 8px 18px;
    border-radius: 100px;
    background: var(--green) !important;
    color: white !important;
}

/* One viewport-sized video layout for both Swing Studio sections. */
.recent-upload-grid-stage--pseudo-fs,
.recent-upload-grid-stage:fullscreen,
.recent-upload-grid-stage:-webkit-full-screen {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    padding: 12px 12px 12px 68px !important;
    overflow: hidden !important;
}
.recent-upload-grid-stage--pseudo-fs .recent-upload-grid__fs-top-actions,
.recent-upload-grid-stage:fullscreen .recent-upload-grid__fs-top-actions,
.recent-upload-grid-stage:-webkit-full-screen .recent-upload-grid__fs-top-actions {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto !important;
    margin: 0 0 12px !important;
    min-height: 42px;
}
.recent-upload-grid-stage--pseudo-fs .recent-upload-grid__fs-media-wrap,
.recent-upload-grid-stage:fullscreen .recent-upload-grid__fs-media-wrap,
.recent-upload-grid-stage:-webkit-full-screen .recent-upload-grid__fs-media-wrap {
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
}
.recent-upload-grid-stage--pseudo-fs .recent-upload-grid__fs-single-column-as-dual,
.recent-upload-grid-stage:fullscreen .recent-upload-grid__fs-single-column-as-dual,
.recent-upload-grid-stage:-webkit-full-screen .recent-upload-grid__fs-single-column-as-dual {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    flex: 1 1 0 !important;
}
.recent-upload-grid-stage--pseudo-fs .recent-upload-grid__fs-video-target,
.recent-upload-grid-stage:fullscreen .recent-upload-grid__fs-video-target,
.recent-upload-grid-stage:-webkit-full-screen .recent-upload-grid__fs-video-target,
.recent-upload-grid-stage--pseudo-fs .recent-upload-grid__fs-video-target > .relative,
.recent-upload-grid-stage:fullscreen .recent-upload-grid__fs-video-target > .relative,
.recent-upload-grid-stage:-webkit-full-screen .recent-upload-grid__fs-video-target > .relative {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
}
.recent-upload-grid-stage--pseudo-fs .video-player-root,
.recent-upload-grid-stage:fullscreen .video-player-root,
.recent-upload-grid-stage:-webkit-full-screen .video-player-root {
    flex: 1 1 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding-bottom: 0 !important;
}
.recent-upload-grid-stage--pseudo-fs .video-player-root video,
.recent-upload-grid-stage:fullscreen .video-player-root video,
.recent-upload-grid-stage:-webkit-full-screen .video-player-root video {
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
}
.recent-upload-grid-stage--pseudo-fs .video-player__bar,
.recent-upload-grid-stage:fullscreen .video-player__bar,
.recent-upload-grid-stage:-webkit-full-screen .video-player__bar {
    position: static !important;
    flex: 0 0 auto !important;
    width: 100% !important;
}