html, body {
            overflow-x: hidden;
        }

        .topsearchbar {
            background-color: transparent; 
        }
.innerheader .topsearchbar{border-radius: 0;}
        .outer-btn {
            position: absolute;
            right: -2px;
            bottom: 6px;
        }

        .input-group-addon {
            z-index: 9;
            background: #f9fafa;
            line-height: 37px;
        }

        .outer-btn i {
            font-size: 22px;
            color: #34c6f4;
        }

        .topheader .container {
            position: relative;
            min-height: 60px;
            /*overflow: hidden;*/
            max-width:98%;
        }

           /* .topheader .container:after {
                content: "";
                left: 100%;
                bottom: 0px;
                height: 59px;
                position: absolute;
                width: 100%;
                background: #f9fafa;
                z-index: 9;
            }
               */
        .topheader .subheader {
        position: absolute;
    bottom: 0px;
    right:215px;
     left: inherit;
   
    height: 45px;
    top:22px;
        }

        .fixed-top .subheader {
         top: 25px;
            bottom: auto;
            margin-top: 0px;
            /*left: 450px;*/
           /* width: calc(100% - 348px) !important;*/
           width:auto;
        }

        .topheader .stylish-input-group .headersearch.f2fsearchtext {
            max-width: calc(100% - 150px);
            margin-bottom: 0px !important;
            margin-top: 0px !important;
            background-color: #f3f3f3;
                visibility: hidden!important;
        }
        .topheader .stylish-input-group .topsearchbar.active-xs .headersearch.f2fsearchtext{
            visibility:visible !important;
        }
         .topheader.fixed-top .topsearchbar .selectric-esCategory{
            visibility:hidden !important;
        }
         .topheader .topsearchbar.active-xs .selectric-esCategory{
            visibility:visible !important;
        }
        @media screen and (min-width: 768px){
			.fixed-top.topheader .subheader .sub-wrapper.active{
			   min-height:45px;
			}
                .topheader:not(.fixed-top) .stylish-input-group .headersearch.f2fsearchtext {
    width: 400px !important;
}
                .topheader .stylish-input-group .headersearch.f2fsearchtext {
        width: 400px !important;
}
        }

        @media screen and (max-width: 857px)and (min-width: 768px){
			.fixed-top .subheader{
        		    top: 26px;
			}
        }
        .fixed-top.topheader .navbar {
        /* margin-right: 30px;*/ 
            padding-top:10px;
        }

        .topheader .sub-wrapper {
            transform: translateX(100%);
        /*   transition: all 0.5s;*/
            bottom: 0px;
            right: 0px;
            /*width: calc(100% - 50px);*/
            min-width: 410px;
            background-color: #ffffff;
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-align: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
            z-index: 9;
            border-radius: 10px 0 0 10px !important;
        }
        .topheader.fixed-top .sub-wrapper
		{
			 width: calc(100% - 50px);
		}
        @media screen and (max-width:768px) {
			.topheader .sub-wrapper
			{
				 width: calc(100% - 50px);
			}
        }
        .topheader .subheader .sub-wrapper.active {
            transform: translateX(0%);
        }



        .topheader .container .innerheader {
            background: transparent;
            padding: 0px;
        }

            .topheader .container .innerheader .topsearchbar {
             margin: 0px;
    max-width: 100%;
    width: 100%;
    background: #ffffff;
    overflow: visible;
            }
  .topheader .container .innerheader .topsearchbar.active-xs {
      overflow:visible;
}
.topheader:not(.fixed-top) .input-group-addon:after {
background-color:#fff;
}

          /*  .topheader .container .innerheader .search-box {
                width: auto;
            }*/

        ul.esAutoSuggest.ui-widget-content {
            z-index: 9999 !important;
        }

        div#f2fAutoSearching {
            left: 150px !important;
            width: calc(100% - 150px) !important;
            position: absolute !important;
            top: 100% !important;
        }

        .topheader .selectric {
            height:100%;
            border-radius:0px!important;
        }

            .topheader .selectric .button {
                margin-top:0px;
            }
         
        .topheader .selectric .label {
            line-height: 40px;
        }
         .topheader .selectric-items {
            z-index: 9;
        }
        
        @media screen and (max-width: 1199px) {
           /* .topheader .subheader {
                width: 82%;
            }*/
            .headerlogo {
            width:200px;
            }
            .topheader .navbar {
                     width: calc(100% - 390px);
                        margin-top: 6px;
            }
            .topheader .subheader {top:18px;right:212px;}
            .topheader .navbar-expand-md .navbar-nav .nav-link {
        padding-right: 0.4rem;
    padding-left: 0.4rem;
}
        }

        @media screen and (max-width: 991px) {
            .fixed-top .navbar.navbar-expand-md {
                width: calc(75% - 30px) !important;
            }
            .navbar-toggler {
   
    display: block;
    padding-top: 20px;
}
            .topheader .subheader {
                width:70%;
                    right: 60px;
            }
            .welcometext {
            width:44px;
            } 
            .fixed-top .subheader {
                /*left: 216px;*/
                width: calc(73% - 15px) !important;
            }

            .fixed-top.topheader .container {
                max-width: 100%;
            }
             .headerlogo {
    width: 145px;
}
 .topheader .navbar {
    width: calc(100% - 160px);
    margin-top: 6px;
}
 .topheader:not(.fixed-top) .navbar-nav {
    margin-left: 0px;
}
        }

        @media screen and (max-width: 991px) {
            .topheader .subheader .sub-wrapper {
                /*min-width: 50px;
                width: calc(100% - 40px);*/
            }
        }

        @media screen and (max-width: 767px) {
            

            .esAutoSuggest.ui-widget-content {
                width: calc(100% - 260px) !important;
                left: auto !important;
                right: 50px;
            }
			
			.topsearchbar .sub-wrapper, .topsearchbar .input-group-addon
			{
			border:1px solid transparent;
			}
			.topsearchbar.active-xs .sub-wrapper,.topsearchbar.active-xs  .input-group-addon
			{
				border: 1px solid #e5e5e5;
				/*border-right:0px;*/
			}
			/*.topsearchbar.active-xs  .input-group-addon
			{
				border-left:0px;
			}
		*/
            .topheader .container {
                padding-left: 0px;
            }

            

           
            .topheader .container:after {
                display: none;
            }

            .topheader .subheader .sub-wrapper {
                min-width: 45px;
            }

            .topheader .subheader {
              /*  bottom: 10px;*/
                 right: 56px!important;
            }

            .topheader .selectric .button {
                margin-top: 0px;
            }

            div #f2fAutoSearching {
                right: 50px !important;
                width: calc(100% - 90px) !important;
                top: calc(100% + 4px) !important;
                left: auto !important;
            }
        }

        @media screen and (max-width: 500px) {
            .esAutoSuggest.ui-widget-content {
                width: calc(100% - 150px) !important;
            }
        }

        @media screen and (max-width: 360px) {
			.topheader .sub-wrapper{width: calc(100% - 45px);}
            .input-group-addon {
                width: 45px !important;
            }
            .topheader .selectric .button
            {
            	top:8px;}
        }
@media screen and (max-width: 991px) and (min-width:768px)
{
	ul.esAutoSuggest.ui-widget-content{max-width: 350px;}
}