<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Macro Helix Login</title>    
    <link
      rel="stylesheet"
      type="text/css"
      href="https://sta1prb2c01.z13.web.core.windows.net/b2c/index.css"
      media="screen"
    />
    <style>
      #api {
        display: flex;
        flex-direction: column;
      }

      .social {
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        -ms-flex-order: 3;
        -webkit-order: 3;
        order: 3;
      }

      .divider {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2;
      }

      .localAccount {
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
      }

      .accountButton {
          padding: 8px 20px 8px 20px !important;
      }

      #next {
        padding: 8px 18px 8px 18px !important;
      }

      a.helpLink {        
        display: none !important;    
      }

      #McKessonOktaConnectFederationExchange {
        display: none;
      }  

      .ico {
          width:70px;
          display:inline;
          height:12px;
          background:black;
          color:white;
          text-decoration:none;
          padding:0px;
      }
      .ico:before {
          content: '';
          background:url('https://sta1prb2c01.z13.web.core.windows.net/b2c/eye_icon.png');
          background-size:cover;
          position:absolute;
          width:15px;
          height:15px;
          margin-left:-22px;
          margin-top: 12px;
      }
      
      .heading {
        display: none;
      }
    </style>    
  </head>

  <body>
    <div id="background_branding_container">
      <img
        id="background_background_image"
        src="https://sta1prb2c01.z13.web.core.windows.net/b2c/Pharmacy.svg"
        alt="Illustration"
      />
    </div>
    <p
      id="page_loaded_msg"
      role="alert"
      aria-live="assertive"
      tabindex="-1"
      aria-label="Page has been loaded successfully"
    ></p>
    <div class="panel" id="panel">
      <table class="panel_layout" id="signuporsigninpage">
        <tbody>
          <tr class="panel_layout_row">
            <td id="panel_left"></td>
            <td id="panel_center">
              <div class="inner_container">
                <div class="api_container normaltext">
                  <img
                    class="logoImage"
                    src="https://sta1prb2c01.z13.web.core.windows.net/b2c/MH_Logo-Color.png"
                    alt="Macro Helix Logo"
                  />
                  <div id="api"></div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script type="text/javascript">
      $(document).ready(function(){
           $("#readOnlyEmail_success").html('Email is verified, you can continue.');
           $("#email_success").html('Email is verified, you can continue.');
           $('#continue').bind('mousedown keydown click', function(){
               var f0 = $('#oldPassword');
               var f1 = $('#newPassword');
               var f2 = $('#reenterPassword');
               if(f0) {f0.prop("type", "password");}
               if(f1) {f1.prop("type", "password");}
               if(f2) {f2.prop("type", "password"); }});

           var btnSend = $('#email_ver_but_send').length > 0 ? $('#email_ver_but_send') : ($('#readOnlyEmail_ver_but_send').length > 0  ? $('#readOnlyEmail_ver_but_send') : null);
           var btnVerify = $('#email_ver_but_verify').length > 0 ? $('#email_ver_but_verify') : ($('#readOnlyEmail_ver_but_verify').length > 0  ?  $('#readOnlyEmail_ver_but_verify') : null);
           var htmlSuccess = $('#email_success').length > 0 ? $('#email_success') : ($('#readOnlyEmail_success').length > 0  ?  $('#readOnlyEmail_success') : null);

           if((btnSend &&  btnSend.css("display") != 'none') ||  (btnVerify && btnVerify.css("display") != 'none')) { $('#continue').css('background-color', '#99BAD0'); $('#continue').css('cursor', 'unset'); }                
           setInterval(function(){ if(htmlSuccess && htmlSuccess.css("display") != 'none') { $('#continue').css('background-color', '#005489'); $('#continue').css('cursor', 'pointer');}}, 100);

           function makePwdToggler(p) {
               var id = p.id + 'toggler'; 
               var div = document.createElement('div');
               div.setAttribute("class", "ico");
               p.insertAdjacentElement('afterend', div);                    
               function toggle(){ if(p.type === 'password'){ p.type = 'text';}  else {p.type = 'password';}}
               div.onclick = toggle;
           }
           function setupPwdTogglers(){
               var p = document.querySelectorAll('input[type=password]');
               
               for (var i = 0; i < p.length; i++) {
                   makePwdToggler(p[i]);
               }
           }                
           setupPwdTogglers();           
       }); //</script>
  </body>
</html>