@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");@import url("https://fonts.googleapis.com/icon?family=Material+Icons");.yt{font-family:Roboto,Noto,serif}.yt .header{display:flex;flex-direction:column;position:fixed;width:100%;top:0;background-color:#fff;opacity:.9}.yt .header .main{display:flex;justify-content:space-between;align-items:center;height:3.5rem}.yt .header .main .banner{display:flex;align-items:center;flex:.2 1;height:100%;padding-left:20px}.yt .header .main .banner .menu-icon{color:#404040;cursor:pointer}.yt .header .main .banner .yt-logo{width:9rem;padding:0 20px;display:flex;height:100%;position:relative;cursor:pointer}.yt .header .main .banner .yt-logo:after{content:"IN";font-size:.6rem;color:#404040;top:13px;left:4px;position:relative}.yt .header .main .search{display:flex;flex:.6 1;justify-content:center;align-items:center;height:2.5rem}.yt .header .main .search .search-wrapper{display:flex;justify-content:space-between;align-items:center;flex-grow:.8;height:100%;border:1px solid rgba(0,0,0,.1)}.yt .header .main .search .search-wrapper:hover,.yt .header .main .search .search-wrapper:hover .search-inp{background-color:#f1f1f1}.yt .header .main .search .search-wrapper .search-inp{border-radius:2px;padding:.2rem .5rem;height:-webkit-max-content;height:max-content;line-height:1.5rem;font-size:1rem;font-weight:400;color:#000;width:100%}.yt .header .main .search .search-wrapper .search-inp:focus{border:1px solid #000}.yt .header .main .search .search-wrapper .lens{color:#404040;background-color:#f1f1f1;width:80px;height:100%;border-left:1px solid rgba(0,0,0,.1);cursor:pointer}.yt .header .main .search .search-wrapper .lens:hover{background-color:#f1f1f1}.yt .header .main .search .search-wrapper .lens .lens-icon{width:1.2rem;height:1.2rem}.yt .header .main .search .mic{color:#404040;padding-left:20px;cursor:pointer}.yt .header .main .action{display:flex;flex:.2 1;align-items:center;justify-content:flex-end;min-width:16rem;height:100%;padding-right:16px}.yt .header .main .action .btn{color:#404040;margin-left:20px;cursor:pointer}.yt .header .main .action .signin{display:flex;align-items:center;justify-content:space-around;color:#065fd4;text-transform:uppercase;font-size:.9rem;font-weight:700;padding:5px;border:1px solid #065fd4;width:105px}.yt .header .main .action .signin .icon{width:28px;height:28px}.yt .header .suggestions{display:flex;height:3.5rem;width:calc(100% - 15rem);align-self:flex-end}.yt .header .suggestions .chips{width:100%;height:100%;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1)}.yt .main-content{position:absolute;display:flex;top:3.5rem;left:15rem;flex-wrap:wrap;width:calc(100% - 15rem);z-index:-1;background-color:#f1f1f1}.yt .video-card{display:flex;flex-direction:column;margin:8px;cursor:pointer}.yt .video-card .thumbnail{width:260px;position:relative}.yt .video-card .thumbnail .image{width:100%;height:100%}.yt .video-card .thumbnail .duration{position:absolute;font-size:.75rem;bottom:5px;right:5px;color:#fff;background-color:#000;padding:2px;border-radius:2px}.yt .video-card .thumbnail .actions{display:none}.yt .video-card .content{width:260px;display:flex;margin:12px 0 20px}.yt .video-card .content .avatar{flex:.2 1}.yt .video-card .content .avatar img{width:35px;height:35px;border-radius:50%;margin:5px 0 0 5px}.yt .video-card .content .data{flex:.7 1}.yt .video-card .content .data .title{font-size:.9rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.yt .video-card .content .data .channel{display:flex;align-items:center}.yt .video-card .content .data .channel .channel-title{overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:.9rem;color:#404040;margin-top:8px}.yt .video-card .content .data .channel .verified span{font-size:.8rem;color:#404040;position:relative;top:4px;left:4px}.yt .video-card .content .data .stats{display:flex;justify-content:flex-start;align-items:center;font-size:.9rem;color:#404040}.yt .video-card .content .data .stats .views:after{content:".";font-size:1.2rem;line-height:10px;font-weight:bolder;position:relative;padding:0 5px;bottom:5px}.yt .video-card .content .more{display:none}.video-card:hover .actions{display:flex;justify-content:center;align-items:center;flex-direction:column;position:absolute;top:0;right:0;gap:4px;margin:5px}.video-card:hover .actions div{display:flex;justify-content:center;align-items:center;color:#fff;background-color:#000;padding:4px;border-radius:2px;opacity:.9}.video-card:hover .actions div span{font-size:1.3rem}.video-card:hover .more{display:block;flex:.1 1;position:relative;-webkit-transform:translateX(8px);transform:translateX(8px);color:#404040}.yt .navbar{display:flex;flex-direction:column;position:fixed;width:15rem;height:calc(100vh - 3.5rem);top:3.5rem}.yt .navbar .navbar-content{overflow-y:hidden;padding-top:8px}.yt .navbar .navbar-content:hover{overflow-y:scroll;scrollbar-color:#a5a5a5 #fff;scrollbar-width:thin}.yt .navbar .navbar-content::-webkit-scrollbar{width:5px;height:8px;background-color:#fff}.yt .navbar .navbar-content::-webkit-scrollbar-thumb{background:#a5a5a5}.yt .navbar .navbar-content .item-group .divider{border-bottom:1px solid rgba(0,0,0,.1);margin:8px 0}.yt .navbar .navbar-content .item-group .item{display:flex;align-items:center;padding:6px 20px;cursor:pointer}.yt .navbar .navbar-content .item-group .item.selected{background-color:#e5e5e5;font-weight:700}.yt .navbar .navbar-content .item-group .item.selected .item-icon{color:red}.yt .navbar .navbar-content .item-group .item.selected:hover{background-color:#d9d9d9}.yt .navbar .navbar-content .item-group .item:hover{background-color:#f2f2f2}.yt .navbar .navbar-content .item-group .item-icon{color:#404040}.yt .navbar .navbar-content .item-group .item-text{vertical-align:middle;font-size:.9rem;padding-left:20px}.yt .navbar .navbar-content .item-group .item-title{text-transform:uppercase;font-size:.9rem;font-weight:500;color:#404040;padding:10px 20px}*{box-sizing:border-box;margin:0;padding:0}html{height:100%}body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;font-size:16px}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}button,input,input:focus{border:none;outline:none}button{background:none}a{text-decoration:none}.app{position:relative}