<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>
.Footer__footerCopyrigt { background-color: #f8f9fa; color: #343a40; padding: 30px 25px 15px; width: 100%; box-sizing: border-box; } /* Footer Container */ .Footer__container2 { width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; } /* Company Information */ .Footer__footerInfo { width: 100%; margin: 0 0 25px 0; text-align: left; } /* Main Heading */ .Footer__footerInfo h3 { font-size: 22px; font-weight: 600; text-align: left; margin: 0 0 25px 0; color: #343a40; } /* Company Information Layout */ .Footer__footerInfoContent { display: flex; flex-wrap: wrap; gap: 30px; justify-content: flex-start; align-items: flex-start; text-align: left; } /* Individual Company Sections */ .Footer__footerInfoItem { flex: 1 1 250px; min-width: 0; text-align: left; } /* Company Names */ .Footer__footerInfoItem h4 { font-size: 17px; font-weight: 600; margin: 0 0 10px 0; color: #f36c21; text-align: left; } /* Company Descriptions */ .Footer__footerInfoItem p { font-size: 14px; line-height: 1.7; margin: 0; padding: 0; color: #495057; text-align: left; } /* Bottom Footer Links */ .Footer__footerBottom { border-top: 1px solid #dee2e6; padding-top: 15px; text-align: left; font-size: 13px; color: #6c757d; } /* Help Desk Link */ .Footer__footerLink { color: #f36c21; text-decoration: none; margin-left: 5px; } .Footer__footerLink:hover { text-decoration: underline; } /* Responsive Design for Tablets and Mobile */ @media (max-width: 768px) { .Footer__footerCopyrigt { padding: 25px 15px 15px; } .Footer__footerInfo h3 { font-size: 19px; line-height: 1.5; margin-bottom: 20px; } .Footer__footerInfoContent { flex-direction: column; gap: 20px; } .Footer__footerInfoItem { flex: 1 1 100%; width: 100%; } .Footer__footerInfoItem h4 { font-size: 16px; } .Footer__footerInfoItem p { font-size: 14px; } }
.Footer__footerCopyrigt .Footer__container2 > span { display: none !important; } /* Remove unnecessary spacing from the footer link */ .Footer__footerLink { margin-left: 0 !important; }
