{% if current_person.signed_in? %}
  {% assign splitted_email = current_person.email | split: "@" %}
  {% assign splitted_domain = splitted_email[1] | split: "." %}
  {% assign account_name = splitted_domain[0] %}

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const cookieName = 'GSUTimestamp';
      const cookieValue = document.cookie.split('; ').find(row => row.startsWith(cookieName + '='));
      const currentTimestamp = Date.now();

      if (!cookieValue) {
        document.cookie = `${cookieName}=${currentTimestamp}; path=/`;
        identifyLearner();
        return;
      }

      const cookieTimestamp = parseInt(cookieValue.split('=')[1], 10);
      const thirtyMinutesInMillis = 30 * 60 * 1000;
      if (currentTimestamp > cookieTimestamp + thirtyMinutesInMillis) {
        document.cookie = `${cookieName}=${currentTimestamp}; path=/`;
        identifyLearner();
      }
    });

    function identifyLearner() {
      aptrinsic('identify',
        {
          'id': "{{ current_person.id }}",
          'email': "{{ current_person.email }}",
          'signedUpAt': new Date("{{ current_person.created_at }}").getTime(),
          'firstName': "{{ current_person.first_name }}",
          'lastName': "{{ current_person.last_name }}"
        },
        {
          'id': "{{ account_name }}",
          'name': "{{ account_name }}"
        }
      );
    }
  </script>
{% endif %}

<header class="np-header np-header-color">
  <div class="np-header-top np-hidden-mobile">
    <ul class="np-header-top-nav">
      <li class="np-header-top-nav-item">
        <a href="/app/faq" class="np-header-top-nav-link np-header-font-color">
          FAQs
        </a>
      </li>
      {% for website_navigation in navigations.header_navigations_external %}
        <li class="np-header-top-nav-item">
          <a
            href="{{ website_navigation.path }}"
            class="np-header-top-nav-link np-header-font-color"
            target="_blank">
            {{ website_navigation.name }}
          </a>
        </li>
      {% endfor %}
    </ul>
  </div>
  <div class="np-header-content">

    <div class="np-hidden-desktop np-header-mobile-menu-nav">
      <button
        data-toggle-class="np-hidden"
        class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
        data-toggle-target=".np-header-mobile-avatar-menu,
          .np-header-mobile-menu-content, .np-main, .np-footer">
</button>
      <button
        data-test="open-mobile-menu"
        data-toggle-class="np-hidden"
        class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
        data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer">
        <i class="far fa-bars"></i>
      </button>
    </div>
    {% if current_school.logo_url %}
      <h1 class="np-header-logo">
        <a href="{% route home %}">
          <img
            alt="{{ current_school.name }}"
            class="np-header-logo-image"
            src="{{ current_school.logo_url }}" />
        </a>
      </h1>
    {% else %}
      <a href="{% route home %}" class="np-school-name np-header-font-color">
        {{ current_school.name }}
      </a>
    {% endif %}

    <div class="np-hidden-mobile np-header-desktop-nav">
      <ul class="np-header-desktop-nav-list">
        <li class="np-header-desktop-nav-item dropdown-desktop-link">
          <a
            data-toggle-class-on-target="np-hidden"
            data-test="open-dropdown-menu"
            class="np-header-desktop-nav-link np-header-font-color"
            data-toggle-target=".desktop-link-dropdown"
            data-toggle-outside>
            Training Directory
            <i class="far fa-chevron-down"></i>
          </a>
          <div class="desktop-link-dropdown np-hidden">
            <div class="desktop-link-dropdown-content">
              <div class="dropdown-content-column cs-dropdown-content-column">
                <div class="dropdown-content-column-header gs-light-blue">
                  <a href="/app/customer-success">Customer Success</a>
                </div>
                <ul>
                  <li>
                    <details>
                      <summary class="cs-nav-section">Admin</summary>
                      <ul>
                        <li><a href="https://gainsight-university.northpass.com/p/553ba982f97a639f5f620828ec7cf0b6ea7e36dd">Getting Started: Admin Level 1 Certification Prep</a></li>
                        <li><a href="https://gainsight-university.northpass.com/p/982b1ea4462144e5ece92868448ccc42076eb630">Core Components</a></li>
                        <li><a href="https://gainsight-university.northpass.com/p/edbc2fd62f5b7c85ec2dcf56da88913b1b5bd70a">Analytics & Insights</a></li>
                        <li><a href="https://gainsight-university.northpass.com/p/03da72a1577b130f8ceb55eecb0f81dcc227d176">Customer Outreach</a></li>
                        <li><a href="https://gainsight-university.northpass.com/p/682b382102e86babdc47898ef67778a2acbc1aaf">Configuring CSM Tools</a></li>
                      </ul>
                    </details>
                  </li>
                  <li>
                    <details>
                      <summary class="cs-nav-section">End User</summary>
                      <ul>
                        <li><a href="https://gainsight-university.northpass.com/p/adf314f18680d01ea0951ff7019ec422bdf0078a">Getting Started with Gainsight</a></li>
                        <li><a href="https://gainsight-university.northpass.com/p/44820815993c74e243ff104b2d7928c25a1801e8">Advanced Customer Success Management</a></li>
                      </ul>
                    </details>
                  </li>
                  <li>
                    <details>
                      <summary class="cs-nav-section">Japanese Training</summary>
                      <ul>
                        <li><a href="https://gainsight-university.northpass.com/p/84e44487f3e52f24b748c1e9f55f879db9f5abb1">管理者トレーニング (Japanese Admin Training)</a></li>
                        <li><a href="https://gainsight-university.northpass.com/p/c3ed0f337b423320f05634ab744064de0b89d71a">エンドユーザートレーニング (Japanese End User Training)</a></li>
                      </ul>
                    </details>
                  </li>
                  <li>
                    <div class="cs-nav-section">
                      <a href="/app/quick-tip-videos">
                        Quick Tip Videos
                      </a>
                    </div>
                  </li>
                  <li>
                    <div class="cs-nav-section">
                      <a href="/app/catalog">Instructor-Led Training</a>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="dropdown-content-column px-dropdown-content-column">
                <div class="dropdown-content-column-header gs-yellow">
                  <a href="/app/product-experience">Product Experience</a>
                </div>
                <ul>
                  <li><a href="https://gainsight-university.northpass.com/p/9524bbec2b5d8470fa473b169b6193d0c4a3b7e0">Getting Started: PX Certification Prep</a></li>
                  <li><a href="https://gainsight-university.northpass.com/p/710103a510448a2f8f210e09473a054e60a59e1d">CS & PX Better Together</a></li>
                </ul>
              </div>
              <div class="dropdown-content-column cc-dropdown-content-column">
                <div class="dropdown-content-column-header gs-pink">
                  <a href="/app/customer-communities">Customer Communities</a>
                </div>
                <ul>
                  <li><a href="https://gainsight-university.northpass.com/p/490a664e8fe0b235b3b5fcc6b72915fc523df8a2">Community Setup and Administration</a></li>
                  <li><a href="https://gainsight-university.northpass.com/p/60c1d7dfe33746e628a51f259a640acebc0d179d">Community Management and Moderation</a></li>
                </ul>
              </div>
              <div class="dropdown-content-column cx-dropdown-content-column">
                <div class="dropdown-content-column-header gs-green">
                  <a href="/app/customer-education">Customer Education</a>
                </div>
                <ul>
                  <li><a href="https://gainsight-university.northpass.com/p/cf4c8fbed48f70451e1b1b45b75b73cc94a6d53c">Academy Setup and Customization</a></li>
                  <li><a href="https://gainsight-university.northpass.com/p/64819bbf07e761fc46029d1ad1f10ad996b46302">Course Building</a></li>
                  <li><a href="https://gainsight-university.northpass.com/p/952cb1244e37f41d2913a8b363cb2387b86f347c">Learner Management and Engagement</a></li>
                  <li><a href="https://gainsight-university.northpass.com/p/20de5e0b52f9255cafa4b1f112847d3ba0e65c4e">Certification and Analytics</a></li>
                </ul>
              </div>
            </div>
          </div>
        </li>
        {% for link in navigations.sub_navigation %}
          {% unless link.label == "Learning Paths" or link.label == "Catalog" or link.label == "Home" %}
            <li class="np-header-desktop-nav-item">
              <a href="{{ link.url }}" class="np-header-desktop-nav-link np-header-font-color">
                {% if link.label == "Dashboard" %}
                  My Learning
                {% elsif link.label == "Events" %}
                  Live Training
                {% else %}
                  {{ link.label }}
                {% endif %}
              </a>
            </li>
          {% endunless %}
        {% endfor %}
        <li class="np-header-desktop-nav-item">
          <a href="/app/certification-programs" class="np-header-desktop-nav-link np-header-font-color">Certifications</a>
        </li>
      </ul>
    </div>

    {% if current_person.signed_in? %}
      <a class="np-hidden-mobile np-header-button shopping-cart" href="{% route cart %}">
        <i class="np-header-button-icon far fa-shopping-cart"></i>
        {% t .cart %}
      </a>
      <div class="np-hidden-mobile np-header-search np-header-search-expanded">
        <form
          action="{% route search %}"
          method="get"
          data-test="desktop-search">
          <input
            aria-label="{% t .search %}"
            class="np-header-search-input gs-bg-gray"
            type="text"
            name="q"
            placeholder="Search by keyword..." />
          <i class="np-header-search-icon far fa-search"></i>
        </form>
      </div>
      <div class="np-hidden-mobile np-header-avatar">
        <button
          class="np-header-avatar-button"
          data-test="open-desktop-menu"
          data-toggle-class-on-target="np-hidden"
          data-toggle-target=".np-header-avatar-tooltip"
          data-toggle-outside>
          <i class="fas fa-user-circle gs-navy" style="font-size:40px;"></i>
        </button>
        <div class="np-header-avatar-tooltip np-hidden" role="tooltip">
          <span class="np-header-avatar-tooltip-arrow-up"></span>
          <div class="np-header-avatar-tooltip-learner">
            <div class="np-header-avatar-tooltip-learner-name">
              {{ current_person.name }}
            </div>
            <div class="np-header-avatar-tooltip-learner-email">
              {{ current_person.email }}
            </div>
          </div>
          <nav class="np-header-avatar-tooltip-navigation">
            {% unless current_school.sso_active? %}
              <a class="np-header-avatar-tooltip-navigation-link" href="{% route account %}">
                {% t.profile_settings %}
              </a>
            {% endunless %}
            {% if current_person.signed_in? %}
              <a class="np-header-avatar-tooltip-navigation-link" href="{% route transcript %}">
                {% t.transcript %}
              </a>
            {% endif %}
            {% if current_person.signed_in? %}
              <a
                class="np-header-avatar-tooltip-navigation-link"
                href="{% route order_history %}"
              >
                {% t .order_history %}
              </a>
            {% endif %}
            <a class="np-header-avatar-tooltip-navigation-link gs-light-blue" href="{% route logout %}">
              {% t.sign_out %}
            </a>
          </nav>
        </div>
      </div>
    {% else %}
      <a
        class="np-header-sign-in np-header-desktop-nav-link gs-light-blue"
        aria-label="{% t shared.sign_in %}"
        href="{% route login %}">
        {% t shared.sign_in %}
      </a>
    {% endif %}
  </div>
</header>

<div class="np-hidden-desktop np-mobile-menu">
  <div class="np-header-mobile-menu-content np-hidden">
    {% if current_person.signed_in? %}
      <div class="np-header-mobile-menu-content-name">
        {{ current_person.name }}
      </div>
    {% endif %}
    <div class="np-header-mobile-menu-content-nav">
      {% if current_person.signed_in? %}
        <form
          class="np-header-search"
          data-test="mobile-search"
          method="get"
          action="{% route search %}">
          <input
            aria-label="{% t .search %}"
            class="np-header-search-input"
            type="text"
            name="q"
            placeholder="{% t .search %}" />
          <i class="np-header-search-icon far fa-search"></i>
        </form>
      {% endif %}
      {% if current_person.signed_in? %}
        {% for website_navigation in navigations.header_navigations %}
          {% unless website_navigation.name == "Learning Paths" or website_navigation.name == "Catalog" %}
            <a
              href="{{ website_navigation.path }}"
              class="np-header-mobile-menu-content-button"
              {% if website_navigation.external? %}
              target="_blank"
              {% endif %}>
              {% if website_navigation.name == "Dashboard" %}
                My Learning
              {% elsif website_navigation.name == "Events" %}
                Live Training
              {% else %}
                {{ website_navigation.name }}
              {% endif %}
            </a>
          {% endunless %}
        {% endfor %}
        <a href="/app/certification-programs" class="np-header-mobile-menu-content-button">
          Certifications
        </a>
        <a href="/app/faq" class="np-header-mobile-menu-content-button">
          FAQs
        </a>
        <details class="cs-nav-mobile">
          <summary class="np-header-mobile-menu-content-button">
            Training Directory
          </summary>
          <details>
            <summary class="np-header-mobile-menu-content-button">
              Customer Success
            </summary>
              <ul>
                <li>
                  <details>
                    <summary class="cs-nav-section np-header-mobile-menu-content-button">Admin</summary>
                    <ul>
                      <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/553ba982f97a639f5f620828ec7cf0b6ea7e36dd">Getting Started: Admin Level 1 Certification Prep</a></li>
                      <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/982b1ea4462144e5ece92868448ccc42076eb630">Core Components</a></li>
                      <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/edbc2fd62f5b7c85ec2dcf56da88913b1b5bd70a">Analytics & Insights</a></li>
                      <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/03da72a1577b130f8ceb55eecb0f81dcc227d176">Customer Outreach</a></li>
                      <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/682b382102e86babdc47898ef67778a2acbc1aaf">Configuring CSM Tools</a></li>
                    </ul>
                  </details>
                </li>
                <li>
                  <details>
                    <summary class="cs-nav-section np-header-mobile-menu-content-button">End User</summary>
                    <ul>
                      <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/adf314f18680d01ea0951ff7019ec422bdf0078a">Getting Started with Gainsight</a></li>
                      <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/44820815993c74e243ff104b2d7928c25a1801e8">Advanced Customer Success Management</a></li>
                    </ul>
                  </details>
                </li>
                <li>
                  <details>
                    <summary class="cs-nav-section np-header-mobile-menu-content-button">Japanese Training</summary>
                    <ul>
                      <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/84e44487f3e52f24b748c1e9f55f879db9f5abb1">管理者トレーニング (Japanese Admin Training)</a></li>
                      <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/c3ed0f337b423320f05634ab744064de0b89d71a">エンドユーザートレーニング (Japanese End User Training)</a></li>
                    </ul>
                  </details>
                </li>
                <li>
                  <div class="cs-nav-section np-header-mobile-menu-content-button">
                    <a href="/app/quick-tip-videos">
                      Quick Tip Videos
                    </a>
                  </div>
                </li>
                <li>
                  <div class="cs-nav-section np-header-mobile-menu-content-button">
                    <a href="/app/catalog">Instructor-Led Training</a>
                  </div>
                </li>
              </ul>
          </details>
          <details>
            <summary class="np-header-mobile-menu-content-button">Product Experience</summary>
            <ul>
              <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/9524bbec2b5d8470fa473b169b6193d0c4a3b7e0">Getting Started: PX Certification Prep</a></li>
              <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/710103a510448a2f8f210e09473a054e60a59e1d">CS & PX Better Together</a></li>
            </ul>
          </details>
          <details>
            <summary class="np-header-mobile-menu-content-button">Customer Communities</summary>
            <ul>
              <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/490a664e8fe0b235b3b5fcc6b72915fc523df8a2">Community Setup and Administration</a></li>
              <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/60c1d7dfe33746e628a51f259a640acebc0d179d">Community Management and Moderation</a></li>
            </ul>
          </details>
          <details>
            <summary class="np-header-mobile-menu-content-button">Customer Education</summary>
            <ul>
              <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/cf4c8fbed48f70451e1b1b45b75b73cc94a6d53c">Academy Setup and Customization</a></li>
              <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/64819bbf07e761fc46029d1ad1f10ad996b46302">Course Building</a></li>
              <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/952cb1244e37f41d2913a8b363cb2387b86f347c">Learner Management and Engagement</a></li>
              <li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/20de5e0b52f9255cafa4b1f112847d3ba0e65c4e">Certification and Analytics</a></li>
            </ul>
          </details>
        </details>
        <div class="np-header-mobile-menu-content-line"></div>
        {% unless current_school.sso_active? %}
          <a class="np-header-mobile-menu-content-button" href="{% route account %}">
            {% t.profile_settings %}
          </a>
        {% endunless %}
        {% if current_person.signed_in? %}
          <a class="np-header-mobile-menu-content-button" href="{% route transcript %}">
            {% t.transcript %}
          </a>
        {% endif %}
        <a
          class="np-header-mobile-menu-content-button"
          href="{% route order_history %}"
        >
          {% t .order_history %}
        </a>
        <div class="np-header-mobile-menu-content-line"></div>
        <a
          class="np-header-mobile-menu-content-button"
          href="{% route cart %}"
        >
          <i class="np-header-mobile-menu-content-button-icon far fa-shopping-cart"></i>
          {% t .cart %}
        </a>
        <a class="np-header-mobile-menu-content-button np-danger" href="{% route logout %}">
          {% t.sign_out %}
        </a>
      {% else %}
        <a href="/app" class="np-header-mobile-menu-content-button">Home</a>
        <a href="/app/certification-programs" class="np-header-mobile-menu-content-button">Certifications</a>
        <a href="/app/faq" class="np-header-mobile-menu-content-button">FAQs</a>
        {% for website_navigation in navigations.header_navigations %}
          {% if website_navigation.external? %}
            <a
              href="{{ website_navigation.path }}"
              class="np-header-mobile-menu-content-button"
              target="_blank">
              {{ website_navigation.name }}
            </a>
          {% endif %}
        {% endfor %}
      {% endif %}
    </div>
  </div>
</div>

{% include "messages" %}

<style>
  .shopping-cart {
    color: #000 !important;
  }

  .np-header {
    position: fixed;
    top: 0;
  }

  .np-homepage > *:first-child,
  .custom-page,
  .np-certificate-top-bar-spacing,
  .np-dashboard,
  .np-catalog,
  .np-learning-paths,
  .np-training-events,
  .np-commerce-order-history-page,
  .faq,
  .np-search {
    margin-top: 70px;
  }

  .np-header-mobile-menu-nav-button {
    height: 30px;
  }

  .np-header-mobile-menu-nav-button {
    color: #48b2eb;
    font-size: 30px;
  }

  .np-header-mobile-menu-content-button.gs-light-blue {
    border: none;
    margin-top: 16px;
  }

  .np-header-mobile-menu-content-button.np-danger {
    border: 2px solid #48b2eb;
    color: #48b2eb;
  }

  .np-header-logo {
    justify-content: left;
  }

  .np-header-mobile-menu-content {
    background-color: #fff;
  }

  .np-header-mobile-menu-content-button {
    box-shadow: none;
    color: #153d5e;
    font-size: 16px;
  }

  .np-header-search-input {
    border: 1px solid #dce2e7;
    color: #153d5e;
  }

  .np-header-search-input:focus::placeholder {
    color: #ccc;
  }

  .np-header-search-icon {
    color: #153d5e;
  }

  .np-header-mobile-menu-content-line {
    border: 1px solid #153d5e;
  }

  .np-header-desktop-nav-link {
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
  }

  .np-header-desktop-nav-list {
    padding-right: 8px;
    padding-left: 12px;
  }

  .np-header-avatar-tooltip-navigation-link {
    font-size: 14px;
    font-weight: 500;
  }

  .np-header-avatar-tooltip-navigation-link:not(.gs-light-blue) {
    color: #153d5e;
  }

  .np-header-avatar-tooltip-navigation-link:hover {
    background: none;
    font-weight: 600;
  }

  .np-header-avatar-tooltip-learner {
    border-bottom: 2px solid #E1E1E1;
  }

  .dropdown-desktop-link {
    position: relative;
  }

  .desktop-link-dropdown {
    position: absolute;
    padding: 14px 20px;
    background-color: #fff;
    top: 40px;
    left: 0;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
  }

  .desktop-link-dropdown-content {
    display: flex;
  }

  .dropdown-content-column {
    padding: 20px 16px;
  }

  .dropdown-content-column-header {
    font-weight: 700;
    margin-bottom: 12px;
    text-wrap: nowrap;
  }

  .dropdown-content-column ul {
    padding: 0;
    list-style: none;
  }

  .dropdown-content-column ul a {
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    text-wrap: balance;
  }

  .cs-nav-section {
    font-weight: 700;
    margin-bottom: 8px;
    cursor: pointer;
  }

  .cs-dropdown-content-column a:hover {
    color: #48B2EB;
    font-weight: 600;
  }

  .px-dropdown-content-column a:hover {
    color: #F9A825;
    font-weight: 600;
  }

  .cc-dropdown-content-column a:hover {
    color: #F06292;
    font-weight: 600;
  }

  .cx-dropdown-content-column a:hover {
    color: #4CAF50;
    font-weight: 600;
  }

  .cs-nav-section:hover {
    color: #48B2EB;
    font-weight: 600;
  }

  .cs-nav-mobile ul {
    padding: 0;
  }

  .cs-nav-mobile summary {
    list-style: none;
  }

  .cs-nav-mobile li {
    list-style-type: none;
    padding: 0;
    text-align: center;
  }

  .dropdown-content-column-header a {
    text-decoration: none;
  }

  @media (max-width: 767px) {
    .np-header-sign-in {
      right: 64px;
    }

    .np-header-logo-image {
      height: auto;
      max-width: 230px;
    }
  }

  @media (min-width: 768px) {
    .np-header {
      height: 64px;
    }

    .np-homepage > *:first-child,
    .custom-page,
    .np-certificate-top-bar-spacing,
    .np-dashboard,
    .np-commerce-order-history-page,
    .np-catalog,
    .np-learning-paths,
    .np-training-events,
    .faq,
    .np-search {
      margin-top: 64px;
    }

    .np-header-top {
      display: flex;
      justify-content: end;
    }

    .np-header-top-nav {
      display: flex;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .np-header-top-nav-link {
      padding: 12px 14px;
      text-decoration: none;
      display: block;
      color: #5b5b5b;
      font-size: 14px;
      text-transform: uppercase;
    }

    .np-header-logo,
    .np-header-desktop-nav-list {
      margin: 0;
    }

    main.np-main.np-max-width.np-page-container:not(.np-certificate) {
      margin-top: 124px;
    }

    .np-header-search-input {
      border: 1px solid #5B6D86;
      height: 40px;
    }

    .np-header-search-icon {
      right: 13px;
      top: 11px;
      font-size: 18px;
    }

    .np-header-logo-image {
      height: 20px;
    }

    .np-header-desktop-nav-item {
      padding: 4px 10px;
    }
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    .np-header .np-hidden-desktop,
    .np-mobile-menu {
      display: block !important;
    }

    .np-header .np-hidden-mobile {
      display: none !important;
    }

    .np-header .np-header-content {
      flex-direction: row-reverse;
    }
  }

  @media (min-width: 1024px) {
    .np-header {
      height: 90px;
      display: block;
    }

    .np-homepage > *:first-child,
    .custom-page,
    .np-certificate-top-bar-spacing,
    .np-dashboard,
    .np-commerce-order-history-page,
    .np-catalog,
    .np-learning-paths,
    .np-training-events,
    .faq,
    .np-search {
      margin-top: 100px;
    }

    .np-header-logo {
      flex-grow: unset;
    }

    .np-header-desktop-nav {
      flex-direction: row;
    }

    .np-header-search-input:focus {
      border: 1px solid #bac4ca;
      font-size: 14px;
      padding: 0 44px 0 16px;
      color: #333;
    }
  }

  @media (min-width: 1366px) {
    .np-header {
      height: 100px;
    }

    .np-header-desktop-nav-list {
      padding-left: 32px;
    }

    .np-header-desktop-nav-item {
      padding: 6px 14px;
    }

    .np-header-desktop-nav-link {
      font-size: 16px;
    }

    .np-header-logo-image {
      height: 30px;
    }

    .desktop-link-dropdown {
      top: 55px;
    }
  }

</style>