.o_wesession_index {

    /*
     * COMMON
     */

    .o_wesession_gradient {
        background-image: linear-gradient(120deg, #875A7B, darken(#875A7B, 10%));
        opacity: 0.8;
    }

    /*
     * MAIN PAGE: LIST
     */

    // Track card
    .o_wesession_track_card {
        .card-body {
            padding: 1rem;
        }

        .card-footer {
            padding: 0.75rem 1rem;
        }

        .o_wesession_track_card_header_badge {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: $card-spacer-y $card-spacer-x;
            text-align: right;
        }
        &.o_wesession_track_card_unpublished {
            opacity: 0.8;
        }
    }

    /*
     * TRACK PAGE: VIEW
     */

    .o_wevent_online_page_container {
        // Main panel: current track
        .o_wesession_track_main {
            // Force side panel min-width to account for potential Youtube chat
            // And adapt main panel max-width accordingly.
            @include media-breakpoint-up(md) {
                max-width: calc(100% - 22rem);
            }

            @media screen and (min-width: 1900px) {
                // return to bootstrap value for col-lg-9 / 10 breakpoint if screen is big enough
                &.col-lg-9 {
                    max-width: 75%;
                }

                &.col-lg-10 {
                    max-width: 83.33333333%;
                }
            }
        }

        // Left panel: other tracks
        .o_wesession_track_aside {
            // Force side panel min-width to account for potential Youtube chat
            @include media-breakpoint-up(md) {
                min-width: 22rem;
            }

            @media screen and (min-width: 1900px) {
                min-width: auto;
            }

            // Navigation: keel layout simple
            .o_wesession_track_aside_nav {
                .nav-link {
                    background-color: transparent;
                    border: 0;
                    color: $gray-600;

                    &.active {
                        color: $gray-800;
                        font-weight: 500;
                    }
                }
            }
        }
    }
}