.container{
  display:grid;
  /* height:100%; */
  background-color: white;
  font-family:  Roboto, Arial;
  column-gap: 5px;
  grid-template-columns: 250px auto; /* Sidebar and main content area */
  height: 100vh; 
}

.childsidebar{
  overflow-y: auto;
  scrollbar-width: thin; /* Enable vertical scrolling */
  height: 100%; /* Make it take full height */ /* Optional: Adjust padding */
  background-color:white; /* Optional: Background color for visibility */
}
.childmaindisplay{
  overflow-y: auto;
  scrollbar-width: thin; /* Enable vertical scrolling */
  height: 100%; /* Make it take full height */ /* Optional: Adjust padding */
  background-color:white; /* Optional: Background color for visibility */
}
.hamburger-icon{
  height:25px;
  padding:10px;
  margin-top:7px;
}
.images{
  display:flex;
  /* justify-content: space-between; */
}
.youtube-icon{
  height:25px;
  padding:10px;
  margin-top:6px
}
#search{
  width:600px;
  padding:7px;
  margin-top:10px;
  margin-left:200px;
  border-radius:20px;
  border:1px solid grey;
}
.search-icon{
  height:20px;
  margin-left:770px;
  margin-top:-27px;
}
.upload{
  height:25px;
  margin-left:1070px;
  margin-top:-26px
}

.notifs{
  height:25px;
  margin-left:1120px;
  margin-top:-26px;
}
.profile{
  height:28px;
  margin-left:1170px;
  margin-top:-30px;
  border-radius:50%;
  border:1px solid  rgb(181, 180, 180);
}
.home-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.homie{
  display:flex;
  gap:30px;
}
.homee{
  margin-top:5px
}
.home{
  margin-top:5px;
}
.home:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.subs-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.subs:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.subscrip{
  display:flex;
  gap:30px;
}
.subs{
  margin-top:-10px;
}
.subss{
  margin-top:5px
}
.explore-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.explore{
  margin-top:-10px;
}
.explore:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.exp{
  display:flex;
  gap:30px;
}
.exploree{
  margin-top:5px
}
.part{
  height:1px;
  background-color: rgb(212, 210, 210);
  margin-top:10px;
}
.you{
  margin-top:10px;
  font-family: Roboto, Arial;
  color:rgb(44, 43, 43);
  padding:10px;
  font-size:18px;
  font-weight: bold;;
}
.you:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.history-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.history{
  margin-top:-10px;
}
.history:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.his{
  display:flex;
  gap:30px;
}
.historyy{
  margin-top:5px
}
.playlist-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.playlist{
  margin-top:-10px;
}
.playlist:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.play{
  display:flex;
  gap:30px;
}
.playy{
  margin-top:5px
}
.liked-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.liked{
  margin-top:-10px;
}
.liked:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.like{
  display:flex;
  gap:30px;
}
.likedd{
  margin-top:5px
}
.watch-later-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.watch-later{
  margin-top:-10px;
}
.watch-later:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.watch{
  display:flex;
  gap:30px;
}
.watchh{
  margin-top:5px
}
.subsc{
  margin-top:10px;
  font-family: Roboto, Arial;
  color:rgb(44, 43, 43);
  padding:10px;
  font-size:18px;
  font-weight: bold;
}
.subsc:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.channel1-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
  border-radius:50%;
}
.channel1{
  margin-top:-10px;
}
.channel1:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.one{
  display:flex;
  gap:30px;
}
.channell1{
  margin-top:6px;
  font-size:15px;
}
.channel2-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
  border-radius:50%;
}
.channel2{
  margin-top:-10px;
}
.channel2:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.two{
  display:flex;
  gap:30px;
}
.channell2{
  margin-top:6px;
  font-size:15px;
}
.channel3-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
  border-radius:50%;
}
.channel3{
  margin-top:-10px;
}
.channel3:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.three{
  display:flex;
  gap:30px;
}
.channell3{
  margin-top:6px;
  font-size:15px;
}
.channel4-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
  border-radius:50%;
}
.channel4{
  margin-top:-10px;
}
.channel4:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.four{
  display:flex;
  gap:30px;
}
.channell4{
  margin-top:6px;
  font-size:15px;
}
.exploresection{
  margin-top:10px;
  font-family: Roboto, Arial;
  color:rgb(44, 43, 43);
  padding:10px;
  font-size:18px;
  font-weight: bold;
}
.exploresection:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.trending-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
  border-radius:50%;
}
.trending{
  margin-top:-10px;
}
.trending:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.tren{
  display:flex;
  gap:30px;
}
.trendingg{
  margin-top:6px;
  font-size:15px;
}
.music-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
  border-radius:50%;
}
.music{
  margin-top:-10px;
}
.music:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.mus{
  display:flex;
  gap:30px;
}
.musicc{
  margin-top:6px;
  font-size:15px;
}
.movie-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.movie{
  margin-top:-10px;
}
.movie:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.mov{
  display:flex;
  gap:30px;
}
.moviee{
  margin-top:6px;
  font-size:15px;
}
.live-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.live{
  margin-top:-10px;
}
.live:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.liv{
  display:flex;
  gap:30px;
}
.livee{
  margin-top:6px;
  font-size:15px;
}
.podcast-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.podcast{
  margin-top:-10px;
}
.podcast:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.pod{
  display:flex;
  gap:30px;
}
.podd{
  margin-top:6px;
  font-size:15px;
}
.sports-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.sports{
  margin-top:-10px;
}
.sports:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.spo{
  display:flex;
  gap:30px;
}
.spoo{
  margin-top:6px;
  font-size:15px;
}
.course-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.course{
  margin-top:-10px;
}
.course:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.cou{
  display:flex;
  gap:30px;
}
.coursee{
  margin-top:6px;
  font-size:15px;
}
.game-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.game{
  margin-top:-10px;
}
.game:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.gam{
  display:flex;
  gap:30px;
}
.gamee{
  margin-top:6px;
  font-size:15px;
}
.more{
  margin-top:10px;
  font-family: Roboto, Arial;
  color:rgb(44, 43, 43);
  padding:10px;
  font-size:18px;
  font-weight: bold;
}
.more:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.premium-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.premium{
  margin-top:-10px;
}
.premium:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.prem{
  display:flex;
  gap:30px;
}
.premiumm{
  margin-top:6px;
  font-size:15px;
}
.app2-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.app2{
  margin-top:-10px;
}
.app2:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.ap2{
  display:flex;
  gap:30px;
}
.app22{
  margin-top:6px;
  font-size:15px;
}
.kids-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.kids{
  margin-top:-10px;
}
.kids:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.kid{
  display:flex;
  gap:30px;
}
.kidd{
  margin-top:6px;
  font-size:15px;
}
.settings-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.settings{
  margin-top:3px;
  color:rgb(77, 76, 76);
}
.settings:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.set{
  display:flex;
  gap:30px;
}
.settingss{
  margin-top:6px;
  font-size:15px;
}
.flag-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.flag{
  margin-top:-10px;
  color:rgb(77, 76, 76);
}
.flag:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.fla{
  display:flex;
  gap:30px;
}
.flagg{
  margin-top:6px;
  font-size:15px;
}
.help-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.help{
  margin-top:-10px;
  color:rgb(77, 76, 76);
}
.help:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.hel{
  display:flex;
  gap:30px;
}
.helpp{
  margin-top:6px;
  font-size:15px;
}
.feedback-icon{
  height:28px;
  margin-top:15px;
  margin-left:9px;
}
.feedback{
  margin-top:-10px;
  color:rgb(77, 76, 76);
}
.feedback:hover{
  background-color: rgb(235, 232, 232);
  border-radius:10px;
}
.feed{
  display:flex;
  gap:30px;
}
.feedd{
  margin-top:6px;
  font-size:15px;
}
.last{
  font-size:13px;
  color:rgb(100, 99, 99);
  cursor:pointer;
}
.navbar{
  display: flex; /* Arrange items in a row */
  overflow-x: auto; /* Enable horizontal scrolling */
  white-space: nowrap; /* Prevent wrapping of items */
  background-color:white;
  padding: 5px;
  border: 1px solid white;
  position: relative;
  gap:10px;
  margin-top: 12px;;
}
.navbar a{
  float:left;
  text-align: center;
  text-decoration: none;
  font-size:13px;
  cursor:pointer;

}
#allin{
  background-color: #333;
  color:white;
}
.item {
  padding:9px;
  margin: 5px;
  text-align: center;
  border-radius: 7px;
  background-color: rgb(241, 241, 241);
  font-weight: bold;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.item:hover{
  background-color: rgb(225, 225, 225);
}
.videoline1{
  display: flex;
  gap:20px;
}
.video1{
  margin-top: 15px;
  border-radius: 15px;
}

.video-container {
  text-align: left; 
  width: 400px;
}

.video-title {
  font-size: 14px;
  color: #333; 
  text-align: left;
  line-height: 1.2; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  flex: 1;
  font-weight: bold;
}
.channel-icon{
  width: 30px;
  height: 30px; 
  border-radius: 50%; 
  margin-right: 10px; 
  flex-shrink: 0; 
}
.video-title-container {
  display: flex;
  align-items: center; 
  margin-top: 10px; 
}
iframe{
  border-radius:15px;
}
.videoline2{
  display: flex;
  gap:20px;
  margin-top:20px;
}
.part2{
    height:1px;
    background-color: rgb(212, 210, 210);
    margin-top:50px;
    margin-bottom:50px;
}