.search{
            display: block;
        }

        .header{
             height: 55px;

            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: rgb(225, 224, 224);

            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: white;
            z-index: 100;
            
        }

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


        }

        .youtube-logo{
            height: 20px;
        }

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

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

        }

        .search-bar{
            flex: 1;
            height: 36.5px;
            padding-left: 10px;
            font-size: 16px;
            border: 1px solid rgba(184, 183, 183, 0.89);
            border-radius: 2px;
            box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.05);
            width: 0;
        }

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

        .search-button{
            height: 40px;
            width: 66px;
            background-color: rgb(225, 221, 221);
            border-width: 1px;
            border-style: solid;
            border-color: rgba(184, 183, 183, 0.89);
            margin-left: -1px;
            margin-right: 10px;

        }

        .search-button , .voice-search-button , .upload-icon-container, .yt-app-container, .notifications-icon-container, .menu-container{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .search-button .tooltip,
        .voice-search-button .tooltip,
        .upload-icon-container .tooltip,
        .yt-app-container .tooltip,
        .notifications-icon-container .tooltip,
        .menu-container .tooltip{
            font-family: Roboto,Arial, Helvetica, sans-serif;
            position: absolute;
            background-color: grey;
            color: white;
            padding: 4px 8px 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,
        .yt-app-container:hover .tooltip,
        .notifications-icon-container:hover .tooltip,
        .menu-container:hover .tooltip{
            opacity: 1;
        }

        .menu-container .tooltip {
            z-index: 2000; /* force tooltip to appear on top of sidebar */
        }


        .search-icon{ 
            height: 25px;
        }

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

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

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

        .upload-icon{
            height: 24px;
        }
        

        .notifications-icon{
            height: 24px;
        }

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

        .current-user-picture{
            height: 35px;
            width: 35px;
            border-radius: 18px;
        }

        .notifications-count{
            position: absolute;
            font-family: Roboto,Arial, Helvetica, sans-serif;
            background-color: red;
            color: white;
            top: -2px;
            right: -4px;
            font-size: 10px;
            padding: 2px 5px 2px 5px;
            border-radius: 10px;
        }

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