.header{
  height:55px;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;

  background-color:white;
  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:rgb(228,228,228);
}
.left-section{
  display:flex;
  align-items:center;
}
.hamburger-menu{
  height:24px;
  margin-left:24px;
  margin-right:24px;
}
.youtube-logo{
  height:20px;
  cursor:pointer;
}
.search-button{
  height:40px;
  width:66px;
  background-color:rgb(240, 240, 240);
  border-width:1px;
  border-style:solid;
  border-color:rgb(192,192,192);
  margin-left:-1px;
  margin-right:10px;
}
.search-icon{
  height:25px;
}
.middle-section{
  flex:1;
  margin-left:70px;
  margin-right:35px;
  max-width:500px;
  display:flex;
  align-items:center;
}
.search-bar{
  flex:1;
  height:36px;
  padding-left:10px;
  font-size:16px;
  border:1px solid rgb(192,192,192);
  border-radius:2px;
  box-shadow:inset 1px 2px 3px rgba(0,0,0,0.05);
  width:0;
}
.search-bar::placeholder{
  font-size:16px;
}
.search-button{
  height:40px;
  width:66px;
  background-color:rgb(240, 240, 240);
  border-width:1px;
  border-style:solid;
  border-color:rgb(192,192,192);
  margin-left:-1px;
  margin-right:10px;
}
.search-button,
.voice-search-button,
.upload-icon-container,
.youtube-apps-container,
.notifications-icon-container,
.current-user-container{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
}
.search-button .tooltip,
.voice-search-button .tooltip,
.upload-icon-container .tooltip,
.youtube-apps-container .tooltip,
.notifications-icon-container .tooltip,
.current-user-container .tooltip{
  position:absolute;
  background-color:gray;
  color:white;
  padding:4px 8px;
  border-radius:2px;
  font-size:12px;
  bottom:-30px;
  opacity:0;
  transition:opacity 0.15s;
  pointer-events:none;
  white-space:nowrap;
}

.search-button:hover .tooltip,
.voice-search-button:hover .tooltip,
.upload-icon-container:hover .tooltip,
.youtube-apps-container:hover .tooltip,
.notifications-icon-container:hover .tooltip,
.current-user-container:hover .tooltip{
  opacity:1;
}
.search-icon{
  height:25px;
}
.voice-search-button{
  height:40px;
  width:40px;
  border-radius:20px;
  border:none;
  background-color:rgb(245,245,245);
}
.right-section{
  width:180px;
  margin-right:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;

}
.upload-icon{
  height:24px;
}
.youtube-apps-icon{
  height:24px;
}
.notifications-icon{
  height:24px;
}
.notifications-icon-container{
  position:relative;
}
.notifications-count{
  position:absolute;
  top:-2px;
  right:-5px;
  background-color:rgb(200,0,0);
  color:white;
  font-size:11px;
  padding:2px 5px;
  border-radius:10px;
}
.current-user-picture{
  height:32px;
  width:32px;
  border-radius:16px;
  object-fit:cover;
  object-position:center;
}