/* InstantVideo 2.2.x compatibility for LTE/Modern (Bootstrap 4). */

.content_item.video_item,
.content_item.video_item .page_player,
.content_item.video_item .video_tab,
.video_list,
.video_isotope {
    min-width: 0;
    max-width: 100%;
}

.content_item.video_item .page_player {
    isolation: isolate;
    overflow: hidden;
    border-radius: .55rem;
    background: #000;
}

.content_item.video_item .page_player #player_wrap,
.content_item.video_item .page_player .iplayer_wrap,
.content_item.video_item .page_player video,
.content_item.video_item .page_player iframe,
.field_player_wrap #player_wrap,
.field_player_wrap .iplayer_wrap,
.field_player_wrap video,
.field_player_wrap iframe {
    max-width: 100%;
}

.content_item.video_item > .full.top10.bottom10 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    overflow: visible;
}

.content_item.video_item .user-box {
    display: flex;
    min-width: 0;
    max-width: calc(100% - 156px);
}

.content_item.video_item .user-box > .float-right {
    min-width: 0;
}

.content_item.video_item .user-box h3,
.content_item.video_item .user-box h3 > a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content_item.video_item .userav {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
}

.content_item.video_item .userav img {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover;
}

.content_item.video_item .like-box {
    flex: 0 0 140px;
}

.content_item.video_item .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    width: 100%;
    border-bottom: 1px solid var(--lte-control-border, #d8e0e6);
}

.content_item.video_item .nav-tabs > li {
    float: none;
    margin: 0 0 -1px;
}

.content_item.video_item .nav-tabs > li > a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.25rem;
    margin: 0;
    padding: .4rem .65rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: .4rem .4rem 0 0;
    color: var(--lte-control-text, #26313a);
}

.content_item.video_item .nav-tabs > li > a:hover,
.content_item.video_item .nav-tabs > li.active > a {
    border-bottom-color: var(--lte-control-accent, #3867d6);
    background: var(--lte-control-bg-hover, #eef3f7);
    color: var(--lte-control-accent, #3867d6);
}

.content_item.video_item .video_description_block,
.content_item.video_item .video_metadata_block {
    min-width: 0;
}

.content_item.video_item .share_code input,
.content_item.video_item .share_code textarea,
.content_item.video_item .share_code select {
    max-width: 100%;
}

.video_cats,
.video_cats > div,
.iwrap,
.iwrap .player_wrap,
.widget_video_wrap,
.video_list_item {
    box-sizing: border-box;
}

/* InstantVideo calculates desktop floating-player offsets from #layout,
 * which does not exist in LTE. These rules replace invalid NaN inline values.
 */
.content_item.video_item .ivideo_player.float-video {
    position: fixed !important;
    top: auto !important;
    right: 5rem !important;
    bottom: 1rem !important;
    left: auto !important;
    width: min(420px, calc(100vw - 6rem)) !important;
    height: auto !important;
    margin: 0 !important;
    aspect-ratio: 16 / 9;
    z-index: 1038 !important;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .28);
}

body.dark-mode .content_item.video_item .nav-tabs > li > a {
    color: var(--lte-control-text, #e5e8eb);
}

/* Channel navigation is rendered by Modern with Bootstrap nav classes, while
 * InstantVideo 2.2.x still styles the old Default menu markup. Keep this
 * adapter scoped to the channel header so other LTE menus are unaffected.
 */
#channels-item-menu {
    position: relative;
    z-index: 30;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1rem;
}

#channels-item-menu .tabs-menu {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--lte-control-border, #d8e0e6);
    border-radius: .65rem;
    background: var(--lte-control-bg, #fff);
    box-shadow: 0 .15rem .45rem rgba(31, 45, 61, .08);
}

#channels-item-menu .tabs-menu > ul.tabbed {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: .3rem;
    width: 100%;
    margin: 0;
    padding: .35rem;
    list-style: none;
}

#channels-item-menu .tabs-menu > ul.tabbed > li.nav-item {
    float: none;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
}

#channels-item-menu .tabs-menu > ul.tabbed > li.nav-item > a.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.45rem;
    padding: .48rem .75rem;
    border: 0 !important;
    border-radius: .45rem;
    background: transparent;
    color: var(--lte-control-text, #344050);
    line-height: 1.2;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

#channels-item-menu .tabs-menu > ul.tabbed > li.nav-item > a.nav-link:hover,
#channels-item-menu .tabs-menu > ul.tabbed > li.nav-item > a.nav-link:focus-visible {
    background: var(--lte-control-bg-hover, #eef3f7);
    color: var(--lte-control-accent, #3867d6);
    outline: none;
}

#channels-item-menu .tabs-menu > ul.tabbed > li.is-active > a.nav-link,
#channels-item-menu .tabs-menu > ul.tabbed > li.nav-item > a.nav-link.active {
    background: var(--lte-control-accent, #3867d6);
    color: #fff !important;
    box-shadow: 0 .2rem .45rem rgba(56, 103, 214, .24);
}

#channels-item-menu .nav-link .icms-svg-icon,
#channels-item-menu .nav-link > i {
    flex: 0 0 auto;
    font-size: 1rem;
}

#channels-item-menu .nav-link .counter,
#channels-item-menu .nav-link .badge {
    flex: 0 0 auto;
    min-width: 1.45rem;
    margin-left: .1rem;
    padding: .22rem .4rem;
    border-radius: 999px;
    background: rgba(108, 117, 125, .16);
    color: inherit;
    font-size: .72rem;
    line-height: 1;
}

#channels-item-menu .nav-link.active .counter,
#channels-item-menu .nav-link.active .badge,
#channels-item-menu .is-active > .nav-link .counter,
#channels-item-menu .is-active > .nav-link .badge {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* The legacy script adds this class after the channel header leaves view.
 * Align the fixed bar with AdminLTE instead of forcing the old 980px layout.
 */
#channels-item-menu.fixed_channel_menu {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    margin: 0;
    padding: .45rem .75rem;
    background: rgba(244, 246, 249, .94);
    box-shadow: 0 .25rem .75rem rgba(31, 45, 61, .14);
    backdrop-filter: blur(8px);
    z-index: 1035;
}

.layout-navbar-fixed #channels-item-menu.fixed_channel_menu {
    top: 3.5rem;
}

#channels-item-menu.fixed_channel_menu .tabs-menu {
    width: min(100%, 1140px);
    margin: 0 auto;
}

#channels-item-menu.fixed_channel_menu .tabs-menu li a img {
    position: static;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: .25rem;
    object-fit: cover;
    border-radius: 50%;
}

#channels-item-menu.fixed_channel_menu .tabs-menu li:first-child a span {
    padding-left: 0;
}

body.dark-mode #channels-item-menu .tabs-menu {
    border-color: #4b545c;
    background: #343a40;
}

body.dark-mode #channels-item-menu .tabs-menu > ul.tabbed > li.nav-item > a.nav-link {
    color: #d5d9dd;
}

body.dark-mode #channels-item-menu .tabs-menu > ul.tabbed > li.nav-item > a.nav-link:hover,
body.dark-mode #channels-item-menu .tabs-menu > ul.tabbed > li.nav-item > a.nav-link:focus-visible {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

body.dark-mode #channels-item-menu.fixed_channel_menu {
    background: rgba(31, 45, 61, .94);
}

.channel_sorting_panel {
    margin: 0 0 1rem;
    padding: .65rem .75rem;
    border: 1px solid var(--lte-control-border, #d8e0e6);
    border-radius: .55rem;
    background: var(--lte-control-bg-hover, #f7f9fb);
}

.channel_sorting_panel .field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    float: none;
    height: auto;
    line-height: normal;
}

.channel_sorting_panel .field .title,
.channel_sorting_panel .field .control {
    float: none;
    height: auto;
    line-height: normal;
}

.channel_sorting_panel .field .sort {
    width: min(100%, 18rem);
}

.channel_sorting_panel select {
    width: 100%;
    min-height: 2.25rem;
    border-radius: .35rem;
}

@media (max-width: 767.98px) {
    .content_item.video_item > .full.top10.bottom10 {
        flex-wrap: wrap;
        gap: .75rem;
    }

    .content_item.video_item .user-box {
        max-width: 100%;
    }

    .content_item.video_item .like-box {
        flex: 1 1 100%;
        width: 100%;
    }

    .content_item.video_item .like-box .like-views {
        text-align: left;
    }

    .content_item.video_item .video_description_block,
    .content_item.video_item .video_metadata_block {
        float: none;
        width: 100%;
        margin-right: 0;
    }

    .content_item.video_item .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .content_item.video_item .nav-tabs > li {
        flex: 0 0 auto;
    }

    .content_item.video_item .ivideo_player.float-video {
        right: .75rem !important;
        bottom: 4.75rem !important;
        width: min(300px, 58vw) !important;
    }

    #channels-item-menu .tabs-menu > ul.tabbed > li.nav-item {
        flex: 1 1 calc(50% - .3rem);
    }

    #channels-item-menu .tabs-menu > ul.tabbed > li.nav-item > a.nav-link {
        width: 100%;
        min-height: 2.6rem;
        padding: .45rem .55rem;
        white-space: normal !important;
        text-align: center;
    }

    #channels-item-menu.fixed_channel_menu {
        padding: .35rem .5rem;
    }

    #channels-item-menu.fixed_channel_menu .tabs-menu > ul.tabbed {
        max-height: 7.2rem;
        overflow-y: auto;
    }

    .channel_sorting_panel .field .title,
    .channel_sorting_panel .field .control,
    .channel_sorting_panel .field .sort {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .layout-fixed:not(.sidebar-collapse) #channels-item-menu.fixed_channel_menu {
        left: 250px;
    }

    .layout-fixed.sidebar-collapse #channels-item-menu.fixed_channel_menu {
        left: 4.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #channels-item-menu .nav-link {
        transition: none !important;
    }
}