.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(225, 214, 214); 
}

.left-section {
   display:flex;
   align-items:center;
}

.hamburger-menu{
    height: 25px;
    margin-left:24px;
    margin-right:24px;
}

.youtube-logo{
  margin-top:2px;
  height:20px;
}

.middle-section{
  flex:1;
  margin-left:70px;
  margin-right:35px;
  max-width:500px;
  display:flex;
  align-items:center;
}

.search-bar::placeholder{
  font-family:Roboto , Arial; 
  font-size:16px;
}

.search-bar{
  flex:1;
  height:36px;
  padding-left:10px;
  font-size:16px;
  border-width:1px;
  border-style:solid;
  border-color:rgb(192, 192, 192);
  border-radius:2px;
  box-shadow:inset 1px 2px 3px rgba(0,0,0,0.05);
  width:0;
}


.search-button{
 height:39px;
  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;
 cursor: pointer;
}

@media (max-width:600px){
  .middle-section{
    margin-left:10px;
    margin-right:10px;  
    max-width:50%
  }

  .search-bar{
    height:32px;
    font-size:14px;
    width: 30px;

  }

  .search-button{
    height:36px;
    width:50px;
  }

  .voice-search-button{
    height:36px;
    width:36px;
    margin-left:5px;
  }
  .left-section{
    margin-right:5px;
  }
}




.search-button, 
.voice-search-button,
.upload-icon-container,
.youtube-apps-container,
.notification-icon-container,
.user-icon-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,
.notification-icon-container .tooltip,
.user-icon-container .tooltip{
font-family:Roboto,Arial;
position:absolute;  
background-color:grey;
color:white;
padding-top:4px;
padding-right:8px;
padding-left:8px;
padding-bottom:4px;
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,
.notification-icon-container:hover .tooltip,
.user-icon-container:hover .tooltip{
 opacity:1;
}

.search-icons{
   height:25px;
}

.voice-search-button{
 height:40px;
 width:40px;
 border-radius:20px;
 border:none;
  background-color:rgb(245, 245, 245);
  cursor: pointer;
}

.voice-search-icons{
  height:24px;
 
}

.right-section{
  width:185px;
  margin-right:12px;
  display:flex;
  align-items:center; 
  justify-content:space-around;
  flex-shrink:0;
}

.upload-icon{
   height:24px; 
 cursor: pointer;  
}


.youtube-apps-icon{
  height:24px;
 cursor: pointer;

}

.notification-icon{
  height:24px;
  cursor: pointer;
}

.notification-icon-container{
  position:relative;
cursor: pointer;  
}

.notification-count{
  position:absolute;
  top: -2px;
  right:-5px;
  background-color:rgb(201, 6, 6);
  color:white;
  font-family:Roboto,Arial;
  font-size:10px;
  padding-left:5px;
  padding-right:5px;
  padding-top:1.5px;
  padding-bottom:1.5px;
  border-radius:10px;
}

.current-user-picture{
 height:32px;
 border-radius:16px;
 cursor: pointer;
}