#peertube-plugin-chatwindowx-iframe {
        flex: 1 0 auto;
        height: 100%;
}

#peertube-plugin-chatwindowx-container {
        display: flex;
        flex: 1 1 max(100%, 450px);
        flex-direction: column;
}

.triangle-element {
        display: none;
}

.theater-enabled #peertube-plugin-chatwindowx-iframe {
        display: none !important;
}

.theater-enabled #peertube-plugin-chatwindowx-container {
        display: none !important;
}

#custom-css .video-info-name {
        font-size: 1.4em;
        margin: 0px;
}

.video-top-info-bar {
        display: flex;
        width: 100%;
        align-items: center;
}

.video-top-info-bar label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        margin: 0px;
        align-items: center;
}


#custom-css .video-bottom {
        margin-top: 0px !important;
}

#custom-css .alert {
        margin-bottom: 0px;
}

@media screen and (max-width: 1200px) {
        my-app {
                display: inline-block;
                width: 100vw;
        }

        .root {
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            height: calc(100vh - 50px);
            width: 100vw;
        }

        .triangle-element {
                display: inline-block !important;
                width: 15px;
                height: 10px;
                background: #2e2f32;
                transform: rotate(90deg);
                clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                margin-top: 8px;
                margin-left: 5px;
                margin-right: 5px;
        }
        #custom-css #video-wrapper {
                flex-direction: column;
                justify-content: center;
                flex: 1 0 auto;
        }

        #custom-css .peertube-container {
                padding: 0px;
        }

        #custom-css .margin-content {
                flex: 0 1 auto;
                padding-bottom: 0px !important;
        }

        #custom-css .main-col, .main-col.expanded {
                --horizontalMarginContent: 6px;
        }

        #custom-css .video-bottom[_ngcontent-wxs-c174] .video-info[_ngcontent-wxs-c174] .video-info-first-row[_ngcontent-wxs-c174] .video-actions-rates[_ngcontent-wxs-c174] {
                margin-top: 4px;
                margin-bottom: 4px;
        }

        #custom-css .video-bottom {
                margin-top: 0.2rem;
        }


        #toggleBottom:checked ~ div  #peertube-plugin-chatwindowx-container {
                flex: 0 1 auto;
                animation-name: shrink_to_nothing;
                animation-duration: 0.25s;
                animation-fill-mode: forwards;
        }

        #toggleBottom:checked ~ div #peertube-plugin-chatwindowx-iframe {
                flex: 0 1 auto;
                animation-name: shrink_to_nothing;
                animation-duration: 0.25s;
                animation-fill-mode: forwards;
        }

        #toggleBottom:checked ~ .root {
                overflow-y: scroll;
        }

        #toggleBottom:not(:checked) ~ .root {
                overflow-y: hidden;
        }

        #toggleBottom:not(:checked) ~ div .video-info-channel * {
                display: none !important;
                margin: 0px !important;
        }

        #toggleBottom:not(:checked) ~ div .video-info-channel  {
                display: none !important;
                margin: 0px !important;
        }


        #toggleBottom:not(:checked) ~ div my-video-description {
                display: none !important;
                margin: 0px !important;
        }

        #toggleBottom:not(:checked) ~ div .video-info-description {
                margin: 0px !important;
        }

        #toggleBottom:not(:checked) ~ div .video-info-date-views {
                display: none !important;
                margin: 0px !important;
        }


        #toggleBottom:not(:checked) ~ div my-video-attributes * {
                display: none !important;
                margin: 0px !important;
        }

        #toggleBottom:not(:checked) ~ div my-video-comments * {
                display: none !important;
        }

        #toggleBottom:not(:checked) ~ div my-video-views-counter * {
                display: none !important;
        }

        #toggleBottom:not(:checked) ~ div my-recommended-videos * {
                display: none !important;
        }

        #toggleBottom:not(:checked) ~ div .video-bottom-intro-bar {
                display: none !important;
        }

        #toggleBottom:not(:checked) ~ div .video-attributes {
                display: none;
                margin: 0px !important;
        }

        #toggleBottom:not(:checked) ~ div my-video-comments.border-top {
                margin: 0px !important;
                display: none;
        }

        .toggleLabel {
                display: inline-flex;
        }

        div my-action-buttons {
                margin-right: auto !important;
        }

}

#videojs-wrapper {
        min-width: calc(100% - 450px);
}

.hidden_checkbox {
        display: none;
}

@keyframes triangle_rotate {
        0%: {transform:rotate(90deg);}
        100% {transform: rotate(180deg);}
}

@keyframes shrink_to_nothing {
        0%: { height: 100%;}
        100% { height: 0px;}
}


#toggleBottom:checked  ~ div .triangle-element {
   animation-name: triangle_rotate;
   animation-duration: 0.25s;
   animation-fill-mode: forwards;
}