<div class="login-widget-wrapper np-hidden">
  <div class="login-widget-background"></div>
  <div class="login-widget-window">
    <div class="login-widget">
      <h3 class="login-widget-title">
        <span class="lang-en">Learn for free</span>
        <span class="lang-de"></span>
        <span class="lang-es"></span>
        <span class="lang-fr"></span>
        <span class="lang-br"></span>
      </h3>
      <div style="display: flex; margin-bottom: 40px;">
        <a class="button-1 button-large" href="/learners/sign_in">
          <span class="lang-en">Log in with Pipedrive</span>
          <span class="lang-de"></span>
          <span class="lang-es"></span>
          <span class="lang-fr"></span>
          <span class="lang-br"></span>
        </a>
      </div>
      <div class="login-text-wrapper">
        <div class="login-text-strike"></div>
        <div class="login-text body-s">
          <span class="lang-en">Not a Pipedrive user?<br>Create a free account to access courses</span>
          <span class="lang-de"></span>
          <span class="lang-es"></span>
          <span class="lang-fr"></span>
          <span class="lang-br"></span>
        </div>
      </div>
      <div style="display: flex">
        <a class="button-2 button-large" id="redirect-between-academies" href="https://user-learn.pipedrive.com/learners/sign_in">
          <span class="lang-en">Log in or register</span>
          <span class="lang-de"></span>
          <span class="lang-es"></span>
          <span class="lang-fr"></span>
          <span class="lang-br"></span>
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  .login-widget-wrapper {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .login-widget-background {
    background: rgba(25, 36, 53, 0.4);
    height: 100%;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .login-widget-window {
    background: #FFFFFF;
    border: 2px solid #E4E6E9;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    z-index: 101;
  }
  .login-widget {
    padding: 40px;
  }
  .login-widget-title {
    text-align: center;
    margin-bottom: 40px;
  }
  .login-text-wrapper {
    position: relative;
    margin-bottom: 40px;
  }
  .login-text {
    background: white;
    width: fit-content;
    margin: auto;
    padding: 0 10px;
    max-width: 80%;
    text-align: center;
  }
  .login-text-strike {
    border-bottom: 1px solid #E4E6E9;
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    z-index: -1;
  }
</style>

<script>
  function toggleSsoWidget() {
    let widget = document.querySelector('.login-widget-wrapper');
    widget.classList.toggle('np-hidden');
    if (widget.classList.contains('np-hidden')) {
      window.onscroll = function () {};
    } else {
      window.onscroll = function () { window.scrollTo(0, 0); };
    }
  }
  
  addEventListener('DOMContentLoaded', () => {
    document.querySelector('.login-widget-background').addEventListener('click', () => {
      toggleSsoWidget();
    });
  });
  
  window.addEventListener('hashchange', () => {
    if (window.location.hash === '#sso-widget') {
      toggleSsoWidget();
      history.replaceState(null, null, ' ');
    }
  });
</script>
