.search-bar {
     flex: 1;
     height: 37px;
     padding-left: 10px;
     font-size: 16px;
     border-width: 1px;
     border-style: solid;
     border-color: rgb(192, 192, 192);
     margin-left: -1px;
     border-radius: 2px;
     width: 0;

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

 }

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

 .right-section{
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 24px;
    flex-shrink: 0;
    
 }
 
 .middle-section{
    flex: 1;
    max-width: 480px;
    margin-left: 70px;
    margin-right: 35px;
    display: flex;
    align-items: center;
 }

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


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

.youtube-logo{
   height: 24px;
   cursor: pointer;
}

.search-button{
   height: 40px;
   width: 60px;
   background-color: rgb(240, 240, 240);
   border-style: solid;
   border-width: 1px;
   border-color: rgb(192, 192, 192);
   margin-left: -1px;
   margin-right: 10px;
}

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

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

.search-icon{
   height: 25px;   
}

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

.upload-icon{
   height: 24px;
}

.youtube-apps-icon{
   height: 24px;
}

.notifications-icon{
   height: 24px;
}

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

.notifications-count{
   position: absolute;
   top: -2px;
   right: -5px;
   background-color: rgb(200, 0, 0);
   font-family: Roboto,Arial;
   font-size: 11px;
   padding-right: 5px;
   padding-left: 5px;
   padding-top: 2px;
   padding-bottom: 2px;
   border-radius: 10px;

   color: white;


}

.current-user-picture{
   height:32px;
   width: 32px;
   border-radius: 16px;
   object-fit: cover;
}