.header{
 height: 55px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 position: fixed;
 top: 0px;
 left: 0px;
 right: 0px;
 z-index: 100;
 background-color: white;
 border-bottom-width: 1px ;
 border-bottom-style: solid;
 border-bottom-color: rgb(203, 203, 203);
}

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

.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: 60px;   
 background-color: rgb(240, 240, 240);
 border-width: 1px;
 border-style: solid;
 border-color:  rgb(193, 193, 193);
 margin-left: -1px;
 margin-right: 10px;
}

.search-button,
.voice-button,
.upload-icon-container,
.apps-icon-container,
.notification-icon-container,
.profile-icon-container{
 position: relative; 
 display: flex;
 justify-content: center;  
 align-items: center;
}

.search-button .tooltip,
.voice-button .tooltip,
.upload-icon-container .tooltip,
.apps-icon-container .tooltip,
.notification-icon-container .tooltip,
.profile-icon-container .tooltip{
 position: absolute;       
 background-color: grey;
 color: white;  
 padding-top: 4px;
 padding-bottom: 4px;
 padding-left: 8px;
 padding-right: 8px;
 font-size: 12px;
 bottom: -30px;
 opacity: 0;
 transition: opacity 0.15s;
 pointer-events:none;
 border-radius: 2px;
 white-space: nowrap;
}

.search-button:hover .tooltip,
.voice-button:hover .tooltip,
.upload-icon-container:hover .tooltip,
.apps-icon-container:hover .tooltip,
.notification-icon-container:hover .tooltip,
.profile-icon-container:hover .tooltip{
 opacity: 1;    
}

.search-icon{   
 height: 25px;  
}

.voice-button{
 height: 40px;  
 width: 40px;
 border-radius: 40px;
 border: none;
 background-color:rgb(240, 240, 240);
}

.voice-icon{
 height: 24px;   
}

.right-section{
 width: 180px;   
 margin-right: 20px;
 display: flex;
 align-items: center; 
 justify-content: space-between;
 flex-shrink: 0;
}

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

.youtube-logo{
 height: 20px;  
}

.upload-icon{
 height: 24px;   
}

.apps-icon{
 height: 24px;   
}

.notification-icon{
 height: 24px;    
}

.notification-icon-container{
 position: relative; 
 margin-top: 5px;
}

.notification-count{
 position: absolute;
 top: -5px;
 right: -8px;    
 background-color: rgb(200, 0, 0); 
 color: white;
 padding-left: 5px;
 padding-right: 5px;
 padding-top: 2px;
 padding-bottom: 2px;
 border-radius: 20px;
 font-size: 11px;
 border-color: white;
 border-width: 2px;
 border-style: solid;
}

.profile-icon{
 height: 32px;   
 border-radius: 16px; 
}