{% include "header" %}
<div class="your-profile-container">
  <div class="your-profile np-max-width">
    your profile
  </div>
</div>
<main class="np-main np-dashboard np-subpage-container np-max-width">
  <div width="100%" height="100%" style="margin-bottom: 46px;">
    <iframe src="https://customer.brighton-science.com/profile-update" frameborder="0" width="100%" height="1400px" id="profile-update-frame"></iframe>
  </div>
</main>
{% include "footer" %}

<style>
  .your-profile-container {
    width: 100%;
    background-color: #F8FBFF;
  }

  .your-profile {
    color: #185A7D;
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    padding: 23px 5% 12px;
  }

  .section-title {
    color: #185A7D;
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
  }

  .embed-wrapper {
    margin-bottom:48px;
  }
</style>
<script>
  document.getElementById("profile-update-frame").name = Date();

  document.addEventListener("DOMContentLoaded", () => {
    addActiveNavigationClass()
  })

  function addActiveNavigationClass() {
    $('.np-header-avatar-button').addClass("np-sub-navigation-content-item-active")
  }
</script>