<div class="Header__navbar" id="navBar">
  <div class="Header__container" id="navBarContainer">
    <div class="Header__logo">
      <a href="${PortalLinkBackUrl}">
        <img src="${PortalLogo}" />
      </a>
    </div>
    <div class="Header__name"></div>
    <div class="Header__menuTab">
      <ul class="Header__menuList">
        <li class="Header__tabsTab" id="portal_tabHome"> ${Home} </li>
        <li class="Header__tabsTab" id="portal_tabCases"> ${MyRequests} </li>
        <li class="Header__tabsTab" id="portal_tabSolutions"> ${KnowledgeBase} </li>
        <li class="Header__tabsTab" id="portal_tabCommunity"> ${Community} </li> ${SignInSignOut} ${UserPreference}
      </ul>
    </div> ${Search} <div class="Header__menuicon">
      <span class="Header__menuBoxMain" id="menuIconContainer">
        <span class="Header__menu" id="menuBox"></span>
      </span>
    </div>
    <div class="Header__clBoth"></div>
  </div>
</div>
<div id="headerContent" class='Header__searchSection'>
  <div class='Header__container'>
    <h2 class='Header__searchTitle'>${WelcomeText}</h2>
    <p class='Header__description'>${WelcomeDescription}</p>
    <div class="custom-search-wrapper"> ${SearchHome} </div>
  </div>
</div>
<style>
  /* Black border on search bar input */
  .custom-search-wrapper input[type="text"],
  .custom-search-wrapper input[type="search"],
  .custom-search-wrapper input {
    border: 2px solid #000000 !important;
    border-radius: 4px;
    outline: none;
  }

  /* Ensure border is visible on focus too */
  .custom-search-wrapper input:focus {
    border: 2px solid #000000 !important;
    box-shadow: none !important;
  }

  /* Fallback: targets any input inside headerContent */
  #headerContent input {
    border: 2px solid #000000 !important;
    border-radius: 4px;
  }

  #headerContent input:focus {
    border: 2px solid #000000 !important;
    box-shadow: none !important;
    outline: none;
  }
</style>
