www-main-desktop-watch-page-skeleton.css

#watch-page-skeleton{
    position:relative;
    z-index:1;
    margin:0 auto;
    box-sizing:border-box
}

#watch-page-skeleton #info-container,#watch-page-skeleton #related{
    box-sizing:border-box
}

.watch-skeleton .text-shell{
    height:20px;
    border-radius:2px
}

.watch-skeleton .skeleton-bg-color{
    background-color:hsl(0,0%,89%)
}

.watch-skeleton .skeleton-light-border-bottom{
    border-bottom:1px solid hsl(0,0%,93.3%)
}

html[dark] .watch-skeleton .skeleton-bg-color{
    background-color:hsl(0,0%,16%)
}

html[dark] .watch-skeleton .skeleton-light-border-bottom{
    border-bottom:1px solid hsla(0,100%,100%,.08)
}

.watch-skeleton .flex-1{
    -ms-flex:1;
    -webkit-flex:1;
    flex:1;
    -webkit-flex-basis:.000000001px;
    flex-basis:.000000001px
}

.watch-skeleton #primary-info{
    height:64px;
    padding:20px 0 8px
}

.watch-skeleton #primary-info #title{
    width:400px;
    margin-bottom:12px
}

.watch-skeleton #primary-info #info{
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:row;
    flex-direction:row;
    -webkit-align-items:center;
    align-items:center
}

.watch-skeleton #primary-info #info #count{
    width:200px
}

.watch-skeleton #primary-info #info #menu{
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:row;
    flex-direction:row;
    padding-right:8px
}

.watch-skeleton #primary-info .menu-button{
    height:20px;
    width:20px;
    border-radius:50%;
    margin-left:20px
}

.watch-skeleton #secondary-info{
    height:151px;
    margin-bottom:24px;
    padding:16px 0
}

.watch-skeleton #secondary-info #top-row,.watch-skeleton #secondary-info #top-row #video-owner{
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:row;
    flex-direction:row
}

.watch-skeleton #secondary-info #top-row #video-owner #channel-icon{
    height:48px;
    width:48px;
    border-radius:50%;
    margin-right:16px
}

.watch-skeleton #secondary-info #top-row #video-owner #upload-info{
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:column;
    flex-direction:column;
    -moz-justify-content:center;
    -webkit-justify-content:center;
    justify-content:center
}

.watch-skeleton #secondary-info #top-row #video-owner #upload-info #owner-name{
    width:200px;
    margin-bottom:12px
}

.watch-skeleton #secondary-info #top-row #video-owner #upload-info #published-date{
    width:200px
}

.watch-skeleton #secondary-info #top-row #subscribe-button{
    width:137px;
    height:36px;
    border-radius:2px;
    margin:7px 4px 0 0
}

#watch-page-skeleton #related{
    float:right;
    position:relative;
    clear:right;
    max-width:426px;
    width:calc(100% - 640px)
}

#watch-page-skeleton.theater #related{
    width:100%
}

.watch-skeleton #related .autoplay{
    margin-bottom:16px
}

.watch-skeleton #related[playlist] .autoplay{
    border-bottom:none;
    margin-bottom:0
}

.watch-skeleton #related #upnext{
    height:20px;
    width:120px;
    margin-bottom:14px
}

.watch-skeleton #related[playlist] #upnext{
    display:none
}

.watch-skeleton #related .video-details{
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:row;
    flex-direction:row;
    padding-bottom:8px
}

.watch-skeleton #related:not([playlist]) .autoplay .video-details{
    padding-bottom:16px
}

.watch-skeleton #related .video-details .thumbnail{
    height:94px;width:168px;
    margin-right:8px
}

.watch-skeleton #related .video-details .video-title{
    width:200px;
    margin-bottom:12px
}

.watch-skeleton #related .video-details .video-meta{
    width:120px
}

@media (max-width:999px){
    #watch-page-skeleton{
        width:854px
    }
    #watch-page-skeleton #container{
        display:-moz-flexbox;
        display:-ms-flexbox;
        display:-webkit-flex;
        display:flex;
        -webkit-flex-direction:column;
        flex-direction:column
    }
    #watch-page-skeleton #info-container{
        order:1
    }
    #watch-page-skeleton #related{
        order:2;
        width:100%;
        max-width:100%
    }
}

@media (max-width:856px){
    #watch-page-skeleton{
        width:640px
    }
}

@media (max-width:656px){
    #watch-page-skeleton{
        width:426px
    }
}

@media (min-width:882px){
    #watch-page-skeleton.theater{
        width:100%;
        max-width:1706px;
        padding:0 32px
    }
    #watch-page-skeleton.theater #related{
        margin-top:0
    }
    #watch-page-skeleton.theater #info-container>*{
        margin-right:24px
    }
}

@media (min-width:1000px){
    #watch-page-skeleton{
        width:100%;
        max-width:1066px
    }
    #watch-page-skeleton #related{
        margin-top:-360px;padding-left:24px
    }
    #watch-page-skeleton #info-container{
        width:640px
    }
    #watch-page-skeleton.theater #info-container{
        width:100%;
        padding-right:426px
    }
}

@media (min-width:1294px) and (min-height:630px){
    #watch-page-skeleton{
        width:100%;
        max-width:1280px
    }
    #watch-page-skeleton #related{
        margin-top:-480px
    }
    #watch-page-skeleton #info-container{
        width:854px
    }
}

@media (min-width:1720px) and (min-height:980px){
    #watch-page-skeleton{
        width:100%;
        max-width:1706px
    }
    #watch-page-skeleton #related{
        margin-top:-720px
    }
    #watch-page-skeleton #info-container{
        width:1280px
    }
}

#watch-page-skeleton.theater.theater-all-widths{
    width:100%;
    max-width:1706px;
    padding:0 32px
}

#watch-page-skeleton.theater.theater-all-widths #related{
    margin-top:0
}

#watch-page-skeleton.theater.theater-all-widths #info-container>*{
    margin-right:24px
}

#watch-page-skeleton #related{
    display:none
}