/* reference dimension */
/*
ytd-watch-flexy {
    --ytd-watch-flexy-sidebar-width: 402px;
    --ytd-watch-flexy-sidebar-min-width: 300px;
    --ytd-watch-flexy-masthead-height: 56px;
    min-width: 0;
}
ytd-watch-flexy[flexy] {
    --ytd-watch-flexy-width-ratio: 16;
    --ytd-watch-flexy-height-ratio: 9;
    --ytd-watch-flexy-space-below-player: 136px;
    --ytd-watch-flexy-non-player-height: calc( var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player) );
    --ytd-watch-flexy-non-player-width: calc( var(--ytd-watch-flexy-sidebar-width) + (3 * var(--ytd-margin-6x)) );
    --ytd-watch-flexy-min-player-height: 240px;
    --ytd-watch-flexy-min-player-width: calc( var(--ytd-watch-flexy-min-player-height) * (var(--ytd-watch-flexy-width-ratio) / var(--ytd-watch-flexy-height-ratio)) );
    --ytd-watch-flexy-max-player-height: calc( 100vh - ( var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player) ) );
    --ytd-watch-flexy-max-player-width: calc( ( 100vh - ( var(--ytd-watch-flexy-masthead-height) + var(--ytd-margin-6x) + var(--ytd-watch-flexy-space-below-player) ) ) * (var(--ytd-watch-flexy-width-ratio) / var(--ytd-watch-flexy-height-ratio)) );
}
*/

/*
html:not(.style-scope) {
    --ytd-grid-base: 103px;
    --ytd-margin-base: 4px;
    --ytd-avatar-size: 32px;
    --ytd-toolbar-height: 56px;
    --ytd-margin-2x: 8px;
    --ytd-margin-3x: 12px;
    --ytd-margin-4x: 16px;
    --ytd-margin-5x: 20px;
    --ytd-margin-6x: 24px;
    --ytd-margin-7x: 28px;
    --ytd-margin-8x: 32px;
    --ytd-margin-9x: 36px;
    --ytd-margin-10x: 40px;
    --ytd-margin-11x: 44px;
    --ytd-margin-12x: 48px;
    --ytd-margin-14x: 56px;
    --ytd-margin-16x: 64px;
    --ytd-margin-17x: 68px;
    --ytd-margin-24x: 96px;
    --ytd-margin-25x: 100px;
    --ytd-margin-35x: 140px;
    --ytd-neg-margin-base: -4px;
    --ytd-neg-margin-2x: -8px;
    --ytd-neg-margin-3x: -12px;
    --ytd-neg-margin-4x: -16px;
    --ytd-neg-margin-5x: -20px;
    --ytd-neg-margin-6x: -24px;
    --ytd-neg-margin-7x: -28px;
    --ytd-neg-margin-8x: -32px;
    --ytd-neg-margin-10x: -40px;
    --ytd-neg-margin-11x: -44px;
    --ytd-neg-margin-12x: -48px;
    --ytd-neg-margin-14x: -56px;
    --ytd-neg-margin-16x: -64px;
    --ytd-neg-margin-24x: -96px;
    --ytd-neg-margin-25x: -100px;
    --ytd-grid-1x1_-_height: 103px;
    --ytd-grid-1x1_-_width: 103px;

    */













    ytd-watch-flexy{

        --tabview-youtube-tabbtn-height: 46px;
    
        --tabview-ytd-toggle-button-height: 32px;
    
    /* custom size for meta-contents */
        --meta-contents-default-height-outer:30px;
        --userscript-meta-default-outline-thickness:1px;
        --meta-contents-padding-vertical:4px;
        --meta-contents-default-height-inner:calc(var(--meta-contents-default-height-outer) - var(--meta-contents-padding-vertical) * 2);
    
    /* recalculation of right-tab height */
        --userscript-top-bar-height: var(--ytd-masthead-height, var(--ytd-toolbar-height));
        --userscript-below-height: calc(100vh - var(--userscript-top-bar-height) - var(--ytd-watch-flexy-panel-max-height) );
        --userscript-h1:calc(var(--ytd-watch-flexy-panel-max-height) + var(--userscript-below-height));
        --userscript-h-tab-btn:var(--tabview-youtube-tabbtn-height);
        --userscript-h2:calc(var(--userscript-h1) - var(--userscript-h-tab-btn) - var(--ytd-margin-6x));
        --userscript-base-height: calc(var(--userscript-h2) - var(--ytd-margin-6x));

        
    
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* Animations */
    
    
    /* Demo: https://jsfiddle.net/9ehxr23g/ */
    
    @keyframes animatedLoading {
        0% {
            content: "⚫⚪⚪⚪●◉◻⬜⬛⚪";
        }
        25% {
            content: "⚪⚫⚪⚪⚪";
        }
        50% {
            content: "⚪⚪⚫⚪⚪";
        }
        75%{
            content: "⚪⚪⚪⚫⚪";
        }
        100%{
            content: "⚪⚪⚪⚪⚫";
        }
    }
    
    @keyframes animatedFetching {
        0% {
            content: "⚪⚪⚪⚪⚪";
        }
        100% {
            content: "⚫⚫⚫⚫⚫";
        }
    }
      
    /* Demo: https://jsfiddle.net/9ehxr23g/ */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* align scrollbar style */
    [userscript-scrollbar-render]::-webkit-scrollbar {
        width: 16px;
    }
    [userscript-scrollbar-render]::-webkit-scrollbar-thumb {
        height: 56px;
        border-radius: 8px;
        border: 4px solid transparent;
        background-clip: content-box;
        background-color: var(--yt-spec-text-secondary);
    }
    /* Colorize the scroll bar (chrome, safari, edge) */
    [userscript-scrollbar-render]::-webkit-scrollbar-thumb, [userscript-scrollbar-render]::-webkit-scrollbar-thumb{
        background-color: var(--paper-checkbox-unchecked-color) !important;
    }
    [userscript-scrollbar-render]::-webkit-scrollbar-thumb:hover, [userscript-scrollbar-render]::-webkit-scrollbar-thumb:hover{
        background-color: var(--paper-checkbox-checked-color) !important;
    }
    [userscript-scrollbar-render]::-webkit-scrollbar-corner {
        background-color: transparent;
    }
    
    
    
    
    /* align scrollbar style */
    [userscript-scrollbar-render] > *:only-child::-webkit-scrollbar {
        width: 16px;
    }
    [userscript-scrollbar-render] > *:only-child::-webkit-scrollbar-thumb {
        height: 56px;
        border-radius: 8px;
        border: 4px solid transparent;
        background-clip: content-box;
        background-color: var(--yt-spec-text-secondary);
    }
    /* Colorize the scroll bar (chrome, safari, edge) */
    [userscript-scrollbar-render] > *:only-child::-webkit-scrollbar-thumb, [userscript-scrollbar-render] > *:only-child::-webkit-scrollbar-thumb{
        background-color: var(--paper-checkbox-unchecked-color) !important;
    }
    [userscript-scrollbar-render] > *:only-child::-webkit-scrollbar-thumb:hover, [userscript-scrollbar-render] > *:only-child::-webkit-scrollbar-thumb:hover{
        background-color: var(--paper-checkbox-checked-color) !important;
    }
    
    [userscript-scrollbar-render] > *:only-child::-webkit-scrollbar-corner {
        background-color: transparent;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* Global */
    
    
    #columns>yt-img-shadow, #columns>img{
        position: absolute;
        z-index: -1;
        visibility: collapse;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ytd-watch-flexy #right-tabs{
        display: block;
        padding: 0;
        margin: 0;
    }
    
    
    
    
    body ytd-sentiment-bar-renderer{
        padding-top: 2px;
        padding-bottom: 0;
    }
    
    
    
    
    
    
    
    
    
    
    ytd-watch-flexy[flexy] #primary #player ~ #meta #meta-contents{
        margin-left: calc(5% + var(--userscript-meta-default-outline-thickness));
        margin-right: calc(5% + var(--userscript-meta-default-outline-thickness));
        width: calc(90% - var(--userscript-meta-default-outline-thickness) * 2);
    
        --box-shadow-thickness-1: var(--userscript-meta-default-outline-thickness);
        --box-shadow-thickness-2: var(--box-shadow-thickness-1) var(--box-shadow-thickness-1);
        box-shadow:0 0 var(--box-shadow-thickness-2) var(--ytd-searchbox-border-color, rgba(0,0,0,0.22));
    
    }
     
    
    ytd-watch-flexy[flexy] #primary #player ~ #meta #meta-contents{
        --border-radius-2: var(--border-radius-1) var(--border-radius-1);
    }
    
    ytd-watch-flexy[flexy] #primary #player ~ #meta #meta-contents:not(:hover){
        --border-radius-1: var(--ytd-margin-2x);
    }
    ytd-watch-flexy[flexy] #primary #player ~ #meta #meta-contents:hover{
        --border-radius-1: var(--ytd-margin-6x);
    }
    ytd-watch-flexy[flexy][is-two-columns_] #primary #player ~ #meta #meta-contents{
        border-radius: var(--border-radius-2) 0 0;
    }
    ytd-watch-flexy[flexy]:not([is-two-columns_]) #primary #player ~ #meta #meta-contents{
        border-radius: var(--border-radius-2) var(--border-radius-2);
    }
    ytd-watch-flexy[flexy] #primary #player ~ #meta #meta-contents:not(:hover){
        height: calc(var(--meta-contents-default-height-outer)); 
        overflow: hidden;
    }
    
    ytd-watch-flexy[flexy] #primary #player ~ #meta{
        position: relative;
        height: calc(var(--meta-contents-default-height-outer)); 
        min-height: calc(var(--meta-contents-default-height-outer));  /* under flex */
    }
    
    
    /* ytd-watch-flexy #player ~ #meta */
    
    ytd-watch-flexy #player ~ #meta ytd-expander{
        display: none;
    }
    
    ytd-watch-flexy #player ~ #meta #meta-contents{
        position: absolute;
        bottom:0;
        width: 100%;
        box-sizing: border-box;
        border:1px solid transparent;
        border-color: var(--ytd-searchbox-legacy-button-focus-color);
        color:var(--yt-spec-text-primary);
        text-transform: var(--yt-button-text-transform, inherit);
        background-color: var(--yt-spec-general-background-b);
        opacity:1; 
    }
    
    ytd-watch-flexy #player ~ #meta #meta-contents:hover ytd-video-secondary-info-renderer{
        padding: 0 var(--ytd-margin-6x);
    }
    ytd-watch-flexy #player ~ #meta #meta-contents ytd-video-secondary-info-renderer{
        border-bottom: 0;
        padding: 0;
        margin: 0;
    }
    ytd-watch-flexy #player ~ #meta #meta-contents:not(:hover){
        height: auto;
        padding: 0;
    }
    
    ytd-watch-flexy #player ~ #meta #meta-contents:not(:hover) *{
        padding: 0;margin: 0;vertical-align: middle;
    }
    
    ytd-watch-flexy #player ~ #meta #meta-contents:not(:hover) #top-row{
        padding: var(--meta-contents-padding-vertical);  
        
        /* just ensure nowrap for (non-hover meta-content)'s flex layout */
        flex-wrap: nowrap;
        zoom:0.95;
    }
    
    ytd-watch-flexy #player ~ #meta #meta-contents:not(:hover) #top-row ytd-video-owner-renderer>*{
        align-self: center;
    }
    ytd-watch-flexy #player ~ #meta #meta-contents:not(:hover) yt-icon-button#button{
        --yt-button-icon-size: var(--meta-contents-default-height-inner);
    }
    
    ytd-watch-flexy #player ~ #meta #meta-contents:not(:hover) yt-img-shadow#avatar{
        height: var(--meta-contents-default-height-inner);
        width: var(--meta-contents-default-height-inner);
        margin: 0px var(--ytd-margin-2x);
        vertical-align: middle;
    }
    ytd-watch-flexy #player ~ #meta #meta-contents:not(:hover) ytd-subscribe-button-renderer{
        align-items: center;
    }
    
    ytd-watch-flexy #player ~ #meta #meta-contents:not(:hover) yt-img-shadow#avatar:not([loaded]){
        opacity:0;
    }
    ytd-watch-flexy #player ~ #meta #meta-contents:not(:hover) yt-img-shadow#avatar img{
        height: var(--meta-contents-default-height-inner);
        width: var(--meta-contents-default-height-inner);
    }
    
    ytd-watch-flexy #player ~ #meta #meta-contents yt-img-shadow#avatar[loaded]{
    box-shadow:0 0px 2px 2px var(--ytd-searchbox-border-color, rgba(0,0,0,0.22))
    }
    
    ytd-watch-flexy #player ~ #meta #meta-contents:not(:hover) #owner-sub-count{
        display: none;
    }
    
    /* show button with smaller size (non-hover meta-content) -> (badge icon) */
    ytd-watch-flexy #player ~ #meta #meta-contents:not(:hover) tp-yt-paper-button{
        height: calc( var(--meta-contents-default-height-inner) );
        margin: 0px var(--ytd-margin-2x);
        padding: 10px 0;
        zoom:0.9;
    }
    /* margin for (non-hover meta-content) -> (badge icon) */
    ytd-watch-flexy #player ~ #meta #meta-contents:not(:hover) ytd-badge-supported-renderer{
        margin: 0px var(--ytd-margin-2x);
    }
    /* vertical center for (non-hover meta-content)'s (button text) */
    ytd-watch-flexy #player ~ #meta #meta-contents:not(:hover) tp-yt-paper-button yt-formatted-string{
        line-height: 100%;
    }
    
    ytd-watch-flexy[is-two-columns_] #chat.ytd-watch-flexy,
    ytd-watch-flexy:not([is-two-columns_]) #chat.ytd-watch-flexy{
        margin-bottom: 0;
    }
    
    ytd-watch-flexy[is-two-columns_] #right-tabs,
    ytd-watch-flexy:not([is-two-columns_]) #right-tabs{
        margin-top: var(--ytd-margin-2x);
    }
    
    #right-tabs #material-tabs{
        position: relative;
        display: flex;
        padding: 0; 
        outline: 1px solid var(--userscript-border-color);
    }
    
    #right-tabs{
        --userscript-border-color: var(--yt-spec-10-percent-layer);
    }
     
    
    
    /* give background color; otherwise it will be transparent in dark mode, single column*/
    ytd-watch-flexy #right-tabs .tab-btn{
        background:var(--yt-spec-general-background-a);
    }
    
    ytd-watch-flexy #right-tabs .tab-btn[userscript-tab-content]{
        flex: 1;
        position: relative;
        display: inline-block;
        text-decoration:none;
        text-transform:uppercase;
        color:var(--yt-spec-text-secondary);
        text-align:center;
        padding: 14px 2px 10px 2px;
        border:0;
        border-bottom: 4px transparent solid;
        font-weight:500;
        font-size:12px;
        line-height: 18px;
        cursor:pointer;
        transition: border 200ms linear 100ms;
        background-color: var(--ytd-searchbox-legacy-button-color);
        text-transform: var(--yt-button-text-transform, inherit);
        user-select: none !important;
    
        overflow: hidden;
        white-space: nowrap;
        /*text-overflow: ellipsis;*/
        text-overflow: clip;

    
    }
    
    
    /* .tab-btn[userscript-tab-content] */
    
    ytd-watch-flexy #right-tabs .tab-btn[userscript-tab-content] svg{
        height: 18px;
        padding-right: 4px;
        vertical-align:bottom;
        opacity:.5;
        margin-right: 4px;
        color: var(--yt-button-color, inherit);
        fill: var(--iron-icon-fill-color, currentcolor);
        stroke: var(--iron-icon-stroke-color, none);
    }
    ytd-watch-flexy #right-tabs .tab-btn[userscript-tab-content].active{
        font-weight:500;
        outline:0;
        color:var(--yt-spec-text-primary);
        background-color: var(--ytd-searchbox-legacy-button-focus-color);
        border-bottom: 4px #ff4533 solid;
        border-bottom-color: var(--yt-brand-light-red);
    }
    ytd-watch-flexy #right-tabs .tab-btn[userscript-tab-content].active svg{
        opacity:.9 
    }
    ytd-watch-flexy #right-tabs .tab-btn[userscript-tab-content]:not(.active):hover{
        background-color: var(--ytd-searchbox-legacy-button-hover-color);
        color:var(--yt-spec-text-primary);
    }
    ytd-watch-flexy #right-tabs .tab-btn[userscript-tab-content]:not(.active):hover svg{
        opacity:.9 
    }
    
    ytd-watch-flexy #right-tabs .tab-btn[userscript-tab-content]{
        user-select: none !important;
    }
    
    ytd-watch-flexy #right-tabs .tab-btn[userscript-tab-content].tab-btn-hidden{
        display: none;
    }
    
    ytd-watch-flexy #right-tabs .tab-btn[userscript-tab-content].tab-btn-hidden paper-ripple{
        display: none;
    }
    
    /* show the loading comment tab in grey color */
    ytd-watch-flexy:not([tabview-youtube-comments-loaded="disabled"]) #right-tabs .tab-btn[userscript-tab-content="#tab-comments"].tab-btn-hidden, 
    ytd-watch-flexy:not([tabview-youtube-comments-loaded="disabled"]) #right-tabs .tab-btn[userscript-tab-content="#tab-comments"].tab-btn-hidden:hover{
        display: inline-block;
        color: var(--yt-spec-icon-disabled);
        pointer-events: none;
    }
    
    
    
    
     
    
    ytd-watch-flexy #right-tabs .tab-btn span#tab3-txt-loader:empty::after{
        display: inline-block;
        width: 4em;
        text-align:left;
        font-size: inherit;
        color: currentColor;
        transform: scaleX(0.8);
    }

    ytd-watch-flexy{
        --userscript-loading-content-font-family: 'Verdana', 'Trebuchet MS', 'Tahoma', sans-serif;
    }
    
    ytd-watch-flexy #right-tabs .tab-btn.tab-btn-hidden span#tab3-txt-loader:empty::after{
        animation: animatedLoading 300ms linear infinite alternate;
        content: " ";
        font-family: var(--userscript-loading-content-font-family);
    }
    
    ytd-watch-flexy #right-tabs .tab-btn:not(.tab-btn-hidden) span#tab3-txt-loader:empty::after{
        animation: animatedFetching 80ms linear infinite alternate;
        content: " ";
        font-family: var(--userscript-loading-content-font-family);
    }
    
    
    ytd-watch-flexy #right-tabs .tab-content{
        padding: 0;
        box-sizing: border-box;
        display: block;
        --yt-spec-brand-background-primary:var(--yt-spec-general-background-a);
        outline: 1px solid var(--userscript-border-color);
        position: relative;
        top:0;
        display: flex;
        flex-direction: row;
        overflow: hidden;
    }
    
    
    ytd-watch-flexy[is-two-columns_] #right-tabs .tab-content{
        height: var(--userscript-tab-content-height);
        contain: size layout paint;
    }



    
    ytd-watch-flexy:not([is-two-columns_]) #right-tabs .tab-content{
        height: 100%;
    }

    ytd-watch-flexy #right-tabs .tab-content-cld{
        box-sizing: border-box;
        position: relative;
        display: block;
        max-width: 100%;
        overflow: auto;
        --tab-content-padding: var(--ytd-margin-4x);
        padding: var(--tab-content-padding);
        contain: layout paint;
        
    }
    /*
    ytd-watch-flexy #right-tabs .tab-content-cld.tab-content-hidden{
        transform: translate3d(-200vw,0,0);
        position: absolute !important;
    }*/
    
    
    
    ytd-watch-flexy #right-tabs .tab-content-cld.tab-content-hidden{
        display: none;
    }
    
    ytd-watch-flexy:not([tabview-youtube-comments-loaded]) #right-tabs .tab-content-cld.tab-content-hidden#tab-comments{
        display: block;
        position: absolute;
        opacity:0;
        content-visibility: hidden;
        pointer-events: none;
    }


    ytd-watch-flexy[is-two-columns_][tabview-selection=""] #right-tabs .tab-content{
        display: none;
    }
    ytd-watch-flexy[is-two-columns_][tabview-selection=""]:not([tabview-youtube-comments-loaded]) #right-tabs .tab-content{
        display: flex;
        position: absolute;
        opacity:0;
        content-visibility: hidden;
        pointer-events: none;
    }

    ytd-watch-flexy[tabview-selection=""] #right-tabs .tab-content-cld{
        display: none;
    }
    ytd-watch-flexy[tabview-selection=""]:not([tabview-youtube-comments-loaded]) #right-tabs .tab-content-cld#tab-comments{
        display: block;
        position: absolute;
        opacity:0;
        content-visibility: hidden;
        pointer-events: none;
    }



    
    
    ytd-watch-flexy #right-tabs .tab-content-cld#tab-list{
        --tab-content-padding: 0px;
        overflow: hidden; /* avoid double scroll */
    }
    
    ytd-watch-flexy #right-tabs .tab-content-cld#tab-videos [placeholder-videos]{
        --tab-content-padding: var(--ytd-margin-2x);
    }
    
    
    
    ytd-watch-flexy[is-two-columns_] #right-tabs .tab-content-cld{
        height:100%;
        width:100%;
        contain: size layout paint;
    }
    
    

    

    ytd-watch-flexy:not([fullscreen]):not([is-two-columns_]) #right-tabs .tab-content>.tab-content-cld:not(.tab-content-hidden){
        min-height: calc(100vh - var(--ytd-watch-flexy-masthead-height) - var(--tabview-youtube-tabbtn-height) - var(--ytd-margin-3x));
    }
           

  /*  
    @supports (content-visibility: hidden){
        
        /.* speed up rendering *./
    
        .tab-content-cld #contents, .tab-content-cld #sections, .tab-content-cld #items{
            content-visibility: auto;
        }
    }
    
    @supports (contain-intrinsic-size: var(--userscript-base-height)){
        /.* make "visible scrollable area" fit (i.e. smaller) for {#continuations} to retrieve proper amount of comments *./
    
        .tab-content-cld #contents, .tab-content-cld #sections, .tab-content-cld #items{
            contain-intrinsic-size: var(--userscript-base-height); /.* fix the height to base height *./
        }
        .tab-content-cld ytd-comment-replies-renderer #contents{
            contain-intrinsic-size: auto; /.* the size of reply of reply *./ 
        }
    
    }
*/



    /* too many space at the right */
    ytd-watch-flexy #tab-comments,
    ytd-watch-flexy #tab-videos [placeholder-videos]
    {
        padding-right: 4px;
    }
    
    /* fix the rendering block overflow x problem */
    ytd-watch-flexy #tab-videos ytd-compact-video-renderer yt-interaction.extended{
        max-width: 100%;
    }

    
    iframe#chatframe{
        contain: layout paint size;
    }
    
    
    
    ytd-live-chat-frame#chat:not([collapsed])>.ytd-live-chat-frame#show-hide-button:first-child{
        border-bottom: 1px solid var(--yt-spec-10-percent-layer);
        box-sizing: border-box;
        border-bottom-color: var(--yt-spec-general-background-a); /* css fix to background loading */
    }
    
     /* double .ytd-watch-flexy is Youtube Coding Bug */
    body ytd-watch-flexy[flexy] #chat.ytd-watch-flexy:not([collapsed]).ytd-watch-flexy, 
    body ytd-watch-flexy[flexy] #chat-container.ytd-watch-flexy:not([chat-collapsed]).ytd-watch-flexy,
    body ytd-watch-flexy[flexy][js-panel-height_] #chat.ytd-watch-flexy:not([collapsed]).ytd-watch-flexy, 
    body ytd-watch-flexy[flexy][js-panel-height_] #chat-container.ytd-watch-flexy:not([chat-collapsed]).ytd-watch-flexy {
        --ytd-watch-flexy-chat-max-height2: calc(var(--userscript-base-height) - 20px);
        height: var(--ytd-watch-flexy-chat-max-height2);
        min-height: 10px;
    }
    
    ytd-watch-flexy[is-two-columns_][userscript-chatblock]{
        --userscript-tab-content-vertical-offset: 42px;
    }
    
    ytd-watch-flexy[is-two-columns_]{
        --userscript-tab-content-height: calc(var(--userscript-base-height) - var(--userscript-tab-content-vertical-offset, 0px));
    }
    
    ytd-watch-flexy[is-two-columns_][userscript-chatblock][userscript-chat-collapsed]{
        --userscript-available-height: var(--userscript-tab-content-height);
        --userscript-min-height: var(--userscript-available-height);
    }
    ytd-watch-flexy[is-two-columns_][userscript-chatblock]:not([userscript-chat-collapsed]){
        --userscript-available-height: var(--tabview-youtube-tabbtn-height);
        --userscript-min-height: 0;
        --userscript-chatroom-height: calc(var(--userscript-base-height) - 6px);
    }
    ytd-watch-flexy[is-two-columns_]:not([userscript-chatblock]):not([userscript-chat-collapsed]){
        --userscript-available-height: var(--userscript-tab-content-height);
        --userscript-min-height: var(--userscript-available-height);
    }
    
    
    ytd-watch-flexy[userscript-chatblock]:not([userscript-chat-collapsed]):not([is-two-columns_]) #right-tabs{
        min-height: 0; /* avoid page scroll when display of tab-content changed */
    }
    
    
    ytd-watch-flexy:not([is-two-columns_]) #right-tabs[userscript-sticky]{
        min-height: 0px;
    }
    
    ytd-watch-flexy:not([is-two-columns_]){
        --userscript-chatroom-height: var(--ytd-watch-flexy-chat-max-height);
    }
    
    
    
    /*
    ytd-watch-flexy:not([is-two-columns_]) #primary ytd-live-chat-frame#chat{
        position: absolute;
        z-index: -1;
        visibility:collapse;
    }
    
    ytd-watch-flexy:not([is-two-columns_]) #secondary ytd-live-chat-frame#chat{
        margin-top: 0;
    }*/
    
    ytd-watch-flexy ytd-live-chat-frame#chat{
        margin-top: 0;
    }
    
    html ytd-watch-flexy:not([is-two-columns_]) #chat.ytd-watch-flexy{
        margin-top: var(--ytd-margin-2x);
    }
    
    ytd-watch-flexy[is-two-columns_] ytd-playlist-panel-renderer[js-panel-height_] #container.ytd-playlist-panel-renderer{
        min-height: 0;
        max-height: var(--userscript-available-height);
    }
    
    
     /* double .ytd-watch-flexy is Youtube Coding Bug */
    body ytd-watch-flexy[flexy][js-panel-height_] #chat.ytd-watch-flexy:not([collapsed]).ytd-watch-flexy{
    
        height: var(--userscript-chatroom-height); /* not override if value not set */
    
    }
    
    .tab-content-cld ytd-playlist-panel-renderer{
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    ytd-watch-flexy:not([theater]):not([is-two-columns_]) #secondary.ytd-watch-flexy,
    ytd-watch-flexy[theater]:not([is-two-columns_]) #secondary.ytd-watch-flexy{
        margin-top: 0;
        padding-bottom: 0;
    }
    
    
    ytd-watch-flexy:not([is-two-columns_]):not([theater]):not([fullscreen]) #primary.ytd-watch-flexy, 
    ytd-watch-flexy:not([is-two-columns_]):not([theater]):not([fullscreen]) #secondary.ytd-watch-flexy{
        padding-top: 0;
    }
    
    ytd-watch-flexy[tabview-selection^="#tab-"]:not([theater]):not([is-two-columns_]) #primary-inner,
    ytd-watch-flexy[tabview-selection^="#tab-"][theater]:not([is-two-columns_]) #primary-inner{
        padding-bottom: var(--ytd-margin-6x);
    }
    
    body ytd-video-primary-info-renderer{
        padding: 12px 0 2px 0; 
    }
    
    
    
    /* left side - like menu smaller */
    
    #primary #player ~ #info ytd-menu-renderer yt-icon-button.ytd-toggle-button-renderer {
        line-height: 1;
        padding: calc(1.0 * var(--yt-button-icon-padding, 8px));
        width: calc(0.75 * var(--yt-button-icon-size, var(--yt-icon-width, 40px)));
        height: calc(0.75 * var(--yt-button-icon-size, var(--yt-icon-height, 40px)));
    }
    
    #primary #player ~ #info ytd-menu-renderer yt-icon-button.ytd-button-renderer {
        line-height: 1;
        padding: calc(1.0 * var(--yt-button-icon-padding, 8px));
        width: calc(0.75 * var(--yt-button-icon-size, var(--yt-icon-width, 40px)));
        height: calc(0.75 * var(--yt-button-icon-size, var(--yt-icon-height, 40px)));
    }
    
    #primary #player ~ #info ytd-menu-renderer #button.ytd-menu-renderer {
        width: calc(0.75 * var(--paper-icon-button_-_width, var(--yt-icon-width)));
        height: calc(0.75 * var(--paper-icon-button_-_height, var(--yt-icon-height)));
    }
    
    
    
     
    #right-tabs{
        position: relative;
    }
    
    
    
    
    
    
    
    
    
    
    /* ytd-watch-flexy:not([is-two-columns_]) #player ~ #info > #info-contents */
    
    ytd-watch-flexy:not([is-two-columns_]) #player ~ #info {
        display: flex;
        flex-direction: column;
    }
    
    ytd-watch-flexy:not([is-two-columns_]) #player ~ #info{
        padding-bottom: 6px;
        border: 0;
        outline: 0;
    }
        
    ytd-watch-flexy:not([is-two-columns_]) #primary #player ~ #info ytd-menu-renderer a{
        white-space: nowrap;
    }
    
    ytd-watch-flexy:not([is-two-columns_]) #player ~ #info > #info-contents > ytd-video-primary-info-renderer{
        border:0;
    }
    
    ytd-watch-flexy:not([is-two-columns_]) #player ~ #info > #info-contents #menu-container{
        padding: 0;
        margin: 0;
        margin-left: 60px;
    }
    
    ytd-watch-flexy:not([is-two-columns_]) #player ~ #info > #info-contents #menu-container > #menu{
        padding: 0;margin: 0;
        position: static;
    }
    
    ytd-watch-flexy:not([is-two-columns_]) #player ~ #info > #info-contents #menu-container > #menu > ytd-menu-renderer{
        padding: 0;margin: 0;
        height: var(--ytd-user-comment_-_line-height);
        align-items: center;
    }
    
    ytd-watch-flexy:not([is-two-columns_]) #player ~ #info > #info-contents > ytd-video-primary-info-renderer > #container >#info >#info-text{
        max-height: none;
    }
    
    ytd-watch-flexy:not([is-two-columns_]) #player ~ #info > #info-contents, 
    #player ~ #info > #info-contents > ytd-video-primary-info-renderer > #container{
        flex-grow: 1;
    }
    ytd-watch-flexy:not([is-two-columns_]) #player ~ #info > #info-contents, 
    ytd-watch-flexy:not([is-two-columns_]) #player ~ #info > #info-contents > ytd-video-primary-info-renderer, 
    ytd-watch-flexy:not([is-two-columns_]) #player ~ #info > #info-contents > ytd-video-primary-info-renderer > #container{
        display: flex;
        height: 100%;
        flex-direction: column;
    }
    
    ytd-watch-flexy:not([is-two-columns_]) #player ~ #info > #info-contents > ytd-video-primary-info-renderer > #container > .title.ytd-video-primary-info-renderer{
        flex-grow: 1;
    }
    
    
    
    
    
    
    
    
    
    
    
    /* ytd-watch-flexy[is-two-columns_] #player ~ #info > #info-contents */
    
    
    
    
    /* ytd-watch-flexy[is-two-columns_] #player ~ #info */
    
    ytd-watch-flexy[is-two-columns_] #player ~ #info {
        display: flex;
        flex-direction: column;
    }
    
    ytd-watch-flexy[is-two-columns_] #player ~ #info{
        padding-bottom: 6px;
        border: 0;
        outline: 0;
    }
    
    ytd-watch-flexy[is-two-columns_] #primary #player ~ #info ytd-menu-renderer a{
        white-space: nowrap;
    }
    
    ytd-watch-flexy[is-two-columns_] #player ~ #info > #info-contents > ytd-video-primary-info-renderer{
        border:0;
    }
    
    ytd-watch-flexy[is-two-columns_] #player ~ #info > #info-contents #menu-container{
        padding: 0;
        margin: 0;
        margin-left: 60px;
    }
    
    ytd-watch-flexy[is-two-columns_] #player ~ #info > #info-contents #menu-container > #menu{
        padding: 0;margin: 0;
        position: static;
    }
    
    ytd-watch-flexy[is-two-columns_] #player ~ #info > #info-contents #menu-container > #menu > ytd-menu-renderer{
        padding: 0;margin: 0;
        height: var(--ytd-user-comment_-_line-height);
        align-items: center;
    }
    
    ytd-watch-flexy[is-two-columns_] #player ~ #info > #info-contents > ytd-video-primary-info-renderer > #container >#info >#info-text{
        max-height: none;
    }
    
    ytd-watch-flexy[is-two-columns_] #player ~ #info > #info-contents, 
    #player ~ #info > #info-contents > ytd-video-primary-info-renderer > #container{
        flex-grow: 1;
    }
    ytd-watch-flexy[is-two-columns_] #player ~ #info > #info-contents, 
    ytd-watch-flexy[is-two-columns_] #player ~ #info > #info-contents > ytd-video-primary-info-renderer, 
    ytd-watch-flexy[is-two-columns_] #player ~ #info > #info-contents > ytd-video-primary-info-renderer > #container{
        display: flex;
        height: 100%;
        flex-direction: column;
    }
    
    ytd-watch-flexy[is-two-columns_] #player ~ #info > #info-contents > ytd-video-primary-info-renderer > #container > .title.ytd-video-primary-info-renderer{
        flex-grow: 1;
    }
    
    
    
    
    
    
    
    
    
    /* ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer ytd-menu-renderer  */
    
    
    ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer ytd-menu-renderer,
    ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer ytd-menu-renderer #button.ytd-menu-renderer{
        --yt-icon-button-icon-width: var(--ytd-margin-4x);
        --yt-icon-button-icon-height: var(--ytd-margin-4x);
        --paper-icon-button_-_width: var(--ytd-margin-4x);
        --paper-icon-button_-height: var(--ytd-margin-4x);
    }
    
    /* ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer .metadata  */
    
    
    ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer .metadata{
        height: 100%;
    }
    
    ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer .metadata > a{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer .metadata .secondary-metadata{
        flex-grow: 1;
        display: flex;
        flex-direction: row;
    }
    ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer .metadata .secondary-metadata .badge{
        box-sizing: border-box;
        margin: 2px 2px;
        width: 100%;
        text-align: center;
    }
    
    ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer .metadata .secondary-metadata >ytd-video-meta-block{
        flex-grow: 1;
        overflow: hidden;
    }
    
    ytd-watch-flexy[is-two-columns_] #tab-videos ytd-compact-video-renderer .metadata .secondary-metadata ytd-badge-supported-renderer{
        flex-direction: column;
        white-space: nowrap;
    }
    
    
    
    
    
    
    
    
    
    
    
    /* #tab-info ytd-expander */
    
    #tab-info ytd-expander{
        /* space fix for tab INFO */
        padding: 0;
        margin: 0;
        zoom: 0.95; /* smaller text in tab Info */
    }
    
    #tab-info ytd-expander, 
    #tab-info ytd-expander .content.ytd-metadata-row-header-renderer, 
    #tab-info ytd-expander #title.ytd-metadata-row-renderer, 
    #tab-info ytd-expander .ytd-metadata-row-renderer, 
    #tab-info ytd-expander ytd-metadata-row-renderer {
        /* smaller text for tab INFO */
        font-size: var(--ytd-user-comment_-_font-size);
        font-weight: var(--ytd-user-comment_-_font-weight);
        line-height: var(--ytd-user-comment_-_line-height);
        letter-spacing: var(--ytd-user-comment_-_letter-spacing);
    }
    
    
    
    
    
    /* smaller text in tab Comments */
    #tab-comments > #comments #main.ytd-comment-renderer{
        zoom: 0.95;
    }
    
    #tab-comments ytd-comments-header-renderer{
        padding: 0;margin-top: 0;margin-left: 0;margin-right: 0;
    }
    
     
    
    /* smaller text for tab Videos */
    #tab-videos [placeholder-videos] ytd-compact-video-renderer .details > .metadata.style-scope.ytd-compact-video-renderer {
        zoom:0.94;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    #tab-list ytd-playlist-panel-renderer#playlist yt-icon-button#expand-button{
        /* hide expand button */
        display: none;
    }
    
    #tab-list ytd-playlist-panel-renderer#playlist #header-description, 
    #tab-list ytd-playlist-panel-renderer#playlist #header-description yt-formatted-string[class]{
    
    /* fix playlist title */
    
        font-size: var(--ytd-user-comment_-_font-size);
        font-weight: var(--ytd-user-comment_-_font-weight);
        line-height: var(--ytd-user-comment_-_line-height);
        letter-spacing: var(--ytd-user-comment_-_letter-spacing);
        height: calc(1 * var(--ytd-subheadline-one-line-ellipsis_-_max-height));
        white-space: nowrap;
        
    }
    
    #tab-list ytd-playlist-panel-renderer#playlist #header-contents:hover #header-description, 
    #tab-list ytd-playlist-panel-renderer#playlist #header-contents:hover #header-description yt-formatted-string[class]{
        height: auto;
        max-height: none;
        white-space: normal;
    }
    
    #tab-list ytd-playlist-panel-renderer#playlist #header-contents {
        cursor:default;
    }
    #tab-list ytd-playlist-panel-renderer#playlist #header-contents #publisher-container, #tab-list ytd-playlist-panel-renderer#playlist #header-contents #playlist-actions{
        display: none;
    }
    
    #tab-list ytd-playlist-panel-renderer#playlist #header-contents:hover #publisher-container, #tab-list ytd-playlist-panel-renderer#playlist #header-contents:hover #playlist-actions{
        display: block;
    }
    
    
    /* #tab-list ytd-playlist-panel-renderer#playlist #container */
    
    #tab-list ytd-playlist-panel-renderer#playlist #container{
        border:0; /* hide playlist default border */
    }
    
    #tab-list ytd-playlist-panel-renderer#playlist #container > .header{
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        z-index: 1;
        min-height: var(--ytd-subheadline-one-line-ellipsis_-_max-height);
        max-height: none;
        padding: 10px 16px;
        box-shadow:0 2px 4px 0 var(--ytd-searchbox-border-color, rgba(0,0,0,.22));
        margin-top: 1px; /* as tab use outline 1px */
        background-color: var(--yt-spec-general-background-b);
    }
    
    #tab-list ytd-playlist-panel-renderer#playlist #container > .header yt-icon-button{
        background-color: var(--yt-spec-badge-chip-background);
    }
    
    #tab-list ytd-playlist-panel-renderer#playlist #container > .header + #items{
        margin-top: calc(var(--ytd-subheadline-one-line-ellipsis_-_max-height) + 32px);  
    }
            
    
    
    
    /* hide playlist border & toggle button */
    
    
    
    
    /* hide original right tabs {#related} */
    #primary-inner>#related, #secondary-inner>#related, /* during resizing - relocate it between {#primary} and {#secondary} */
    *:not(#tab-videos)>#related,
    #related #related, /* youtube coding bug */
    *:not([placeholder-videos]) > ytd-watch-next-secondary-results-renderer,  /* hide videos list & play list before script loading */
    #related > #related-skeleton, #related > #player-ads,
    *:not(#ytd-userscript-playlist) > ytd-playlist-panel-renderer#playlist,  /* hide videos list & play list before script loading */
    #primary #player ~ #meta #meta-contents ytd-expander /* meta-contents relocated */
    {
        position: absolute;
        z-index: -1;
        visibility:collapse;
        pointer-events: none;
        max-height: 40px;
        overflow: hidden;
        margin-top: -40px;
    }
    
    #primary-inner #player ~ ytd-comments#comments{
        position: absolute;
        z-index: -1;
        visibility:collapse;
        pointer-events: none;
    }
    
    
    
    
    /* responsive to non-column flexy */
    ytd-watch-flexy:not([is-two-columns_]) #columns.ytd-watch-flexy{
        flex-direction: column; /* from (flex-direction: column;) | overriding {#columns.ytd-watch-flexy} */
    }
    ytd-watch-flexy:not([is-two-columns_]) #columns #secondary.ytd-watch-flexy{
        display: block; /* from (display: inline-block;) | overiding {ytd-watch-flexy:not([is-two-columns_]) #secondary.ytd-watch-flexy} */
    }
    
    
    /* css fix for responsive two columns flex , width */
    
    ytd-watch-flexy[flexy]:not([is-two-columns_]):not([fullscreen]) #secondary.ytd-watch-flexy {
        min-width: var(--ytd-watch-flexy-min-player-width);
        width: auto;
    }
    ytd-watch-flexy[flexy][is-two-columns_] #secondary.ytd-watch-flexy {
        width: var(--ytd-watch-flexy-sidebar-width);
        min-width: var(--ytd-watch-flexy-sidebar-min-width);
    }
    
    ytd-watch-flexy[theater][is-two-columns_] #secondary.ytd-watch-flexy { 
        margin-top: var(--ytd-margin-3x);
        padding-bottom: 0;
    }
    
    
    
    /* css fix for responsive two columns flex , align {#secondary} style like {#primary} */
    
    ytd-watch-flexy:not([fullscreen]):not([is-two-columns_]) #ytd-userscript-playlist #container{
        max-height: calc(100vh - var(--ytd-watch-flexy-masthead-height) - var(--ytd-margin-6x) - var(--userscript-sticky));
    }
    
    ytd-watch-flexy:not([fullscreen]):not([is-two-columns_]) #primary.ytd-watch-flexy{
        margin-top: 0;
        margin-bottom: 0;
        padding-top: var(--ytd-margin-3x);
        padding-bottom: 0;
    }
    
    
    /* two column mainly;  theater view make font smaller */
    ytd-watch-flexy[theater] #player ~ #info #info-contents .title{
        font-size:var(--ytd-user-comment_-_font-size);
    }
    
    
    /* <<< sticky right-tabs header --- */
    
        /* keep the single column view css as simple as possible */
        /* use js coding to make it like sticky */
        /* tried native sticky but the sticky element is "covered" by tab content (z-index no use) */
        #right-tabs>header{
            position: relative;
            box-sizing:border-box;
        }
        ytd-watch-flexy[flexy] #right-tabs>header{
            background-color: var(--yt-spec-general-background-a);
        }
        ytd-watch-flexy[flexy]:not([is-two-columns_]) #right-tabs[userscript-sticky]>header{
            z-index: 2;
            position: fixed;
            top: var(--ytd-watch-flexy-masthead-height);
            width: var(--userscript-sticky-width, 100%);
        }
    
        @supports (top: var(--ytd-watch-flexy-masthead-height-xs-x)){
            
        }
    
        ytd-watch-flexy[flexy]:not([is-two-columns_]) #right-tabs[userscript-sticky]{
            padding-top: var(--userscript-sticky);
        }
    
    
        
    
    /* --- sticky right-tabs header >>> */
    
    /* << whole page scroll bar (original-type) */
    
        /* the scrollbar of the entire page is wrong due to youtube coding, just hide it */
        /* siginificant empty at the right side (vertical bar) in the dark mode */
        html body {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
        html body::-webkit-scrollbar {
            display: none; /* Blink and Webkit */
        }
    
    /* whole page scroll bar (original-type) >> */
    
    /*  overflow fix */
    ytd-popup-container #contentWrapper.tp-yt-iron-dropdown ytd-menu-popup-renderer[slot="dropdown-content"]{
        overflow: hidden;
    }
    
    
    /* <<< page height setting - two-column-normal ---  */
    
        /* two column height = 100vh */
        ytd-watch-flexy[flexy][is-two-columns_]:not([theater]):not([fullscreen]) #columns.ytd-watch-flexy {
            margin-bottom: 0;
            /* max-height: none; */
            height: calc(100vh - var(--ytd-watch-flexy-masthead-height));
            padding-bottom: 0;
            overflow: auto;
        }
    
        /* it is possible that #info is too height, make it overflow: auto with no scroll-bar */
        ytd-watch-flexy[flexy][is-two-columns_]:not([theater]):not([fullscreen]) #primary-inner{
            overflow: auto;
            max-height: 100%;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
        ytd-watch-flexy[flexy][is-two-columns_]:not([theater]):not([fullscreen]) #primary-inner::-webkit-scrollbar {
            display: none; /* Blink and Webkit */
        }
    
        /* video player sticky at the top */
    
        ytd-watch-flexy[flexy][is-two-columns_]:not([theater]):not([fullscreen]) #primary-inner>#player:first-child {
            top: 0;
            position: sticky; /* as the parent is scrollable, the player can be sticky to the top */
        }
    
    
    /* --- page height setting - two-column-normal >>>  */
    
    
    
    /* <<< page height setting - two-column-theater ---  */
    
    
        /* theater mode: the player is extracted from two column view */
        /* only set padding & margin */
        ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen]) #columns.ytd-watch-flexy {
            margin-bottom: 0;
            padding-bottom: 0; 
        }
    
        /* theater mode same mechanism */
        ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen]){
            height: calc(100vh - var(--ytd-watch-flexy-masthead-height));
            overflow: auto;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
        ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen])::-webkit-scrollbar {
            display: none;
        }
        /* video player sticky at the top */
        ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen])>#player-theater-container {
            top: 0;
            position: sticky; /* as the parent is scrollable, the player can be sticky to the top */
        }
    
    
    /* --- page height setting - two-column-theater >>>  */
    
    
    ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen]) #columns.ytd-watch-flexy {
        margin-bottom: 0;
        padding-bottom: 0; 
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* ytd-live-chat-frame#chat:not([collapsed]) */
    
    ytd-live-chat-frame#chat:not([collapsed]):not([yt-userscript-iframe-loaded])::before{
        position: absolute;
        content: " ";
        z-index: 0;
        display: block;
        height: 100%;
        color: var(--yt-spec-text-primary);
        background-color: var(--ytd-searchbox-legacy-button-hover-border-color);
        width: 100%;
        text-align: center;
        /* line-height: 300px; */
        line-height: var(--userscript-chatroom-height);
        animation: animatedLoading 300ms linear infinite alternate;
        font-family: var(--userscript-loading-content-font-family);
    }
    
    
    ytd-live-chat-frame#chat:not([collapsed]){
        position: relative; 
    }
    
    ytd-live-chat-frame#chat:not([collapsed]) > * {
        z-index: 1;
        position: inherit;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* flexbox | ytd-watch-flexy[is-two-columns_]:not([theater]):not([fullscreen]) | #primary-inner | #info */
    
    ytd-watch-flexy[is-two-columns_]:not([theater]):not([fullscreen]) #primary-inner{
        display: flex;
        flex-flow: column;
        height: 100%;
    }
    ytd-watch-flexy[is-two-columns_]:not([theater]):not([fullscreen]) #primary-inner>#info{
        flex: 1;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* flexbox | ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen]) | #columns | #primary-inner | #info */
    
    ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen]){
        display: flex;    
        flex-direction: column;
    }
    ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen])>#columns{
        flex: 1;
        overflow: auto;
    }
    ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen])>#columns>#primary{
        overflow: auto;
    }
    ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen])>#columns #primary-inner{
        display: flex;
        flex-flow: column;
        height: 100%;
    }
    ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen])>#columns #primary-inner>#info{
        flex: 1;
    }
    ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen])>#columns>#secondary{
        overflow: hidden;
    }
    
    
    
    
    ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen])>#columns>#primary{
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    ytd-watch-flexy[is-two-columns_][theater]:not([fullscreen])>#columns>#primary::-webkit-scrollbar {
        display: none;
    }
    
    
    
    
         
    
    
    
    
    
    
    
    
    
    
    
    
    /* flexbox */
    
    
    
    ytd-watch-flexy[userscript-auto-scroll-playlist]:not([is-two-columns_]) #tab-list:not(.tab-content-hidden) ytd-playlist-panel-renderer>#container{
        max-height: none;
    }
    
    
    
    
    ytd-watch-flexy[is-two-columns_]:not([theater]) #tab-videos{
        padding: 0;
    }
    
    
    ytd-watch-flexy[is-two-columns_]:not([theater]) [placeholder-for-youtube-play-next-queue]>#suggestions-search{
        position: sticky; 
        top: calc( -1 * var(--tab-content-padding, 0px)) ;
        z-index: 2;
    }
    
    ytd-watch-flexy[is-two-columns_]:not([theater]) #tab-videos [placeholder-videos]{
        overflow: auto;
        padding: var(--tab-content-padding, 0px);
        padding-right: 4px;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* autocomplete */
    
    autocomplete-positioner>.autocomplete-suggestions{
        position: absolute !important;
        left:auto !important;
        top:auto !important;
        width: 100% !important;
        margin: 0 !important;   
        z-index: 99; 
    }
    
    autocomplete-positioner{
        overflow: visible;
        display: block;
        position: relative;
        height: 0;
        width: 100%;
        margin-top: calc( -1 * ( var(--sb-margin-bottom) ) );
        margin-bottom: calc( 1 * ( var(--sb-margin-bottom) ) );
        z-index: 99; 
    }
    
    
    
    
    
    
    
    /* autocomplete | position-fixed-by-tabview-youtube */
    
    autocomplete-positioner[position-fixed-by-tabview-youtube]{
        position: sticky;
        top: calc( var(--height, auto) - var(--tab-content-padding, 0px)) ;
        z-index: 2; 
    }
    autocomplete-positioner[position-fixed-by-tabview-youtube]>.autocomplete-suggestions[position-fixed-by-tabview-youtube]{
        z-index: 2; 
    }
    
    
    
    
    
    
    
    /* ytd-watch-flexy:not([is-two-columns_]) #columns */
    
    
    ytd-watch-flexy:not([is-two-columns_]) #columns.ytd-watch-flexy{
        overflow: auto;
    }
    
    
    ytd-watch-flexy:not([is-two-columns_]) #columns{
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    ytd-watch-flexy:not([is-two-columns_]) #columns::-webkit-scrollbar {
        display: none;
    }
    
    
    
    
    
    
    
    
    
    
    /* plugin - #youtube-play-next-queue-renderer */
    
    #youtube-play-next-queue-renderer .queue-button{
        height: auto;
        zoom:0.8;    
    }
    
    #youtube-play-next-queue-renderer .queue-button.queue-play-now, 
    #youtube-play-next-queue-renderer .queue-button.queue-play-next, 
    #youtube-play-next-queue-renderer .queue-button.queue-remove{
        margin: 2px !important;
    }
    
    #youtube-play-next-queue-renderer ytd-badge-supported-renderer {
        align-self: flex-end;
    }
    
    
    
    
    /* align scrollbar style */
    #youtube-play-next-queue-renderer::-webkit-scrollbar {
        width: 16px;
    }
    #youtube-play-next-queue-renderer::-webkit-scrollbar-thumb {
        height: 56px;
        border-radius: 8px;
        border: 4px solid transparent;
        background-clip: content-box;
        background-color: var(--yt-spec-text-secondary);
    }
    /* Colorize the scroll bar (chrome, safari, edge) */
    #youtube-play-next-queue-renderer::-webkit-scrollbar-thumb, #youtube-play-next-queue-renderer::-webkit-scrollbar-thumb{
        background-color: var(--paper-checkbox-unchecked-color) !important;
    }
    #youtube-play-next-queue-renderer::-webkit-scrollbar-thumb:hover, #youtube-play-next-queue-renderer::-webkit-scrollbar-thumb:hover{
        background-color: var(--paper-checkbox-checked-color) !important;
    }
    #youtube-play-next-queue-renderer::-webkit-scrollbar-corner {
        background-color: transparent;
    }
    
    
    ytd-watch-flexy[flexy][is-two-columns_][theater] #primary.ytd-watch-flexy{
    
        --ytd-watch-flexy-min-player-width: 0;
    
    }
    
    ytd-watch-flexy[flexy]:not([is-two-columns_]) #player ~ #info ytd-video-primary-info-renderer #info{
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* live fill up view */
    .YouTubeLiveFilledUpView #primary-inner > #right-tabs:not(#player){
        padding: 0;
    }
    .YouTubeLiveFilledUpView ytd-watch-flexy[is-two-columns_] #right-tabs{
        padding: 0;
        margin: 0;
    }
    .YouTubeLiveFilledUpView ytd-watch-flexy[is-two-columns_]{
        --YouTubeLiveFilledUpView-header-height: calc(var(--ytd-watch-flexy-masthead-height) + var(--tabview-youtube-tabbtn-height));
    }
    .YouTubeLiveFilledUpView ytd-watch-flexy[is-two-columns_]{
        --YouTubeLiveFilledUpView-primary-width: calc(100vw - var(--ytd-watch-flexy-sidebar-width));
        --YouTubeLiveFilledUpView-secondary-width: var(--ytd-watch-flexy-sidebar-width);
    }
    /*
    .YouTubeLiveFilledUpView ytd-watch-flexy[flexy][js-panel-height_]:not([is-two-columns_]) ytd-live-chat-frame#chat.ytd-watch-flexy:not([collapsed]){
        height: var(--userscript-chatroom-height) !important;
    }*/
    .YouTubeLiveFilledUpView ytd-watch-flexy[flexy][js-panel-height_][is-two-columns_] ytd-live-chat-frame#chat.ytd-watch-flexy:not([collapsed]){
        height: calc(100vh - var(--YouTubeLiveFilledUpView-header-height)) !important;
    } 
    









    /* ensure the iframe is fully hidden */
    ytd-watch-flexy[userscript-chat-collapsed] #chat[collapsed] iframe#chatframe{
        display: none;
    }




    @supports (will-change: scroll-position){
/*
        ytd-watch-flexy[is-two-columns_] #right-tabs #tab-comments:not(.tab-content-hidden).tab-content-cld{
            will-change: scroll-position;
        }

        ytd-watch-flexy[is-two-columns_] #right-tabs #tab-videos:not(.tab-content-hidden).tab-content-cld{
            will-change: scroll-position;
        }*/

        /* iframe */
        /*yt-live-chat-item-list-renderer #item-scroller{
            will-change: scroll-position;
        }*/

    }


    @supports (content-visibility: hidden){

        ytd-watch-flexy .tab-content-cld#comments ytd-item-section-renderer#sections>#contents,
        ytd-watch-flexy .tab-content-cld#tab-videos [placeholder-videos]{
            content-visibility: auto;
        }

        iframe#chatframe{
            content-visibility: auto;
        }
    
        /* iframe */
        yt-live-chat-renderer #items{
            content-visibility: auto;
        }

        
    }
    

    ytd-watch-flexy #player{
        contain: content;
    }


    yt-icon-button, .ytp-button{
        contain: strict;
    }
    yt-img-shadow{
        contain: content;
    }