
<turbo-stream action="update" target="portal_booking_modal"><template>
  <div id="booking-login-modal" class="modal hidden flex z-[140]!" data-booking-modal-target="modal">
  <div id="booking-login-modal-wrapper"></div>
</div>

</template></turbo-stream>
  <turbo-stream action="replace" target="booking-login-modal-wrapper"><template>
    
<div id="booking-login-modal-wrapper" data-controller="booking-modal" data-booking-modal-modal-id-value="booking-login-modal" data-booking-modal-open-on-connect-value=&quot;true&quot; class="relative max-w-[700px] m-auto w-full pointer-events-auto shadow-xl bg-white rounded-lg overflow-hidden">
  <div class="flex justify-between items-center p-[10px] sm:p-[16px_20px] border-b border-solid border-border_color gap-[10px]">
    <div class="flex items-center gap-2.5">
      <button type="button" class="close-modal bg-[#FAFAFB] rounded-md border-[0.9px] border-solid border-border_color w-[36px] h-[36px] grid place-items-center text-[#051237]/[0.6] text-[18px]" data-action="click->booking-modal#close">
        <i class="icon-chevron-left"></i>
      </button>
      <h6 class="text-[rgba(5,18,55,0.76)] text-base font-medium leading-6 font-text_font">Create an account, or log in</h6>
    </div>
    <span class="block cursor-pointer close-modal h-[20px] w-[20px]" data-action="click->booking-modal#close">
      <i class="icon-x text-[20px] text-[#051237]/[0.32]"></i>
    </span>
  </div>
  <div class="flex sm:flex-row flex-col h-full">
    <div class="w-full sm:max-w-[300px] p-5 after-gradient border-b-1 border-b-border_color md:border-b-0 md:border-r md:border-r-border_color">
      <div class="flex flex-col gap-[20px] relative">
        <figure class="w-full max-h-[150px] h-full overflow-hidden rounded-[10px] relative flex-none [&_>div]:h-[150px]">
            <div class="w-full h-full bg-[#F3F4F6]"></div>
        </figure>
        <div class="flex flex-col gap-1">
          <div class="flex items-start justify-between flex-wrap gap-1.5">
            <div class="flex flex-col">
              <h6 class="text-[rgba(5,18,55,0.76)] text-base font-medium leading-6 font-text_font relative cursor-pointer">
                
              </h6>
              <span class="text-[rgba(5,18,55,0.60)] text-sm font-normal leading-5 font-text_font -mt-[2px] [&_span]:text-sm! [&_span]:font-normal!">
                
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-[rgba(5,18,55,0.02)] mt-5 rounded-[10px] flex items-center gap-2.5 p-2.5">
        <span class="anron-calendar border rounded-[100px] border-solid border-border_color w-[28px] h-[28px] grid place-content-center bg-white text-[14px] text-[#051237]/[0.6]"></span>
        <div class="flex flex-col">
          <span class="text-[rgba(5,18,55,0.60)] text-sm font-normal leading-5 block font-text_font">Meeting Type</span>
          <strong class="text-[rgba(5,18,55,0.76)] text-[13px] font-medium leading-5 block font-text_font"></strong>
        </div>
      </div>
    </div>
    <div class="w-full mx-auto p-5">
      
<ul class="flex items-center gap-2.5 [&_li]:flex-1">
  <li>
    <form class="button_to" method="post" action="/users/auth/linkedin"><button class="flex items-center justify-center gap-[6px] p-[9px_14px] border bg-white h-10 rounded-lg border-solid border-[rgba(47,44,37,0.20)] w-full close-modal" data-turbo="false" type="submit">
      <img class="w-4 object-cover" src="https://topline.com/assets/auth/linkedin-aa3be738.svg" alt="logo">
      <span class="text-[#2F2C25] text-center text-sm not-italic font-semibold leading-[140%] tracking-[0.2px] font-manrope">LinkedIn</span>
</button><input type="hidden" name="authenticity_token" value="2SBfrBjiI_3zfRo8eJdZq0YUv4IQEnNlDbguL5kQ6tE5ZPaxHaxFYKWyV5bEuduKolvItrvx0J73VXnXWAJ7Bw" autocomplete="off" /></form>  </li>
  <li>
    <form class="button_to" method="post" action="/users/auth/google_oauth2"><button class="flex items-center justify-center gap-[6px] p-[9px_14px] border bg-white h-10 rounded-lg border-solid border-[rgba(47,44,37,0.20)] w-full close-modal" data-turbo="false" type="submit">
      <img class="w-4 object-cover" src="https://topline.com/assets/auth/google-cce31e7e.svg" alt="logo">
      <span class="text-[#2F2C25] text-center text-sm not-italic font-semibold leading-[140%] tracking-[0.2px] font-manrope">Google</span>
</button><input type="hidden" name="authenticity_token" value="QQFBZs_nlb83n2mZcxsJTHiPQcKszOeYjev6ZnMSA72FvSqPbYWEneVUwAXUruDcUZAiEI1X1AwQx-srToCRyA" autocomplete="off" /></form>  </li>
  <li>
    <form class="button_to" method="post" action="/users/auth/twitter"><button class="flex items-center justify-center gap-[6px] p-[9px_14px] border bg-white h-10 rounded-lg border-solid border-[rgba(47,44,37,0.20)] w-full close-modal" data-turbo="false" type="submit">
      <img class="w-4 object-cover" src="https://topline.com/assets/auth/x-7e5ac011.svg" alt="logo">
      <span class="text-[#2F2C25] text-center text-sm not-italic font-semibold leading-[140%] tracking-[0.2px] font-manrope">Twitter</span>
</button><input type="hidden" name="authenticity_token" value="UnHaBSrRQfq1tNsiPlrFVmOBN16cYNHatYCW-On6El8VeTJzGhIYzqoPz_AXVsC-0n2P4LkXYq1b2eKZVBNlcg" autocomplete="off" /></form>  </li>
</ul>
<div class="w-full flex items-center justify-center mt-5 relative after:absolute after:top-[50%] after:translate-y-[-50%] after:left-0 after:w-full after:h-[1px] after:bg-[rgba(47,44,37,0.08)] after:z-[0]">
  <span class="p-[0px_10px] text-[rgba(47,44,37,0.80)] text-center text-xs not-italic font-normal leading-4 font-manrope tracking-[0.2px] inline-block z-[1] relative bg-white">
    OR Continue with
  </span>
</div>
<div data-booking-modal-target="signin">
  <div class="flex flex-col gap-[14px]">
    <form data-action="submit-&gt;booking-modal#submit" class="flex flex-col gap-[14px]" action="/users/popup/callback" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="Bvc759Mt_bTasEl4OtPGDGJXNcIwy3FZZ5H1D8i_hTWNZIrFD-kNuGHEDuDl1du8n3WKuNFDPR4YQWEJ7Fibiw" autocomplete="off" />
    <input autocomplete="off" value="https://topline.com/booking-login-modal?modal_id=booking-login-modal&amp;type=social" type="hidden" name="user[redirect_url]" id="user_redirect_url" />
    <div data-booking-modal-target="errors"></div>
    <div class="form-group w-full cursor-pointer">
      <label class="text-[#2F2C25] text-sm not-italic leading-5! font-manrope! mb-1" for="booking-login-modal-email">Email</label>
      <input id="booking-login-modal-email" autocomplete="email" placeholder="Enter Email Address" class="w-full text-[16px]! font-normal! rounded-lg! border-[rgba(47,44,37,0.20)]! leading-6! text-[#2F2C25]! placeholder:text-[rgba(47,44,37,0.50)]! h-[40px]" type="email" name="user[email]" />
    </div>
    <div class="form-group w-full cursor-pointer">
      <label class="text-[#2F2C25] text-sm not-italic leading-5! font-manrope! mb-1" for="booking-login-modal-password">Password</label>
      <input id="booking-login-modal-password" autocomplete="current-password" placeholder="Enter Password" class="w-full text-[16px]! font-normal! rounded-lg! border-[rgba(47,44,37,0.20)]! leading-6! text-[#2F2C25]! placeholder:text-[rgba(47,44,37,0.50)]! h-[40px]" type="password" name="user[password]" />
    </div>
    <div class="cf-turnstile" data-controller="cloudflare-turnstile"
      data-sitekey="0x4AAAAAAA6CqrkTPt2fbvMv"
      data-callback="cloudflareTurnstileCallback" data-size="flexible" data-theme="light">
    </div>
    <div class="flex flex-col gap-2">
      <button name="button" type="submit" class="db-btn-primary-v2 w-full justify-center" data-booking-modal-target="submitButton">
        <div class="content" data-hover-text="Sign In">
          <span>Sign In</span>
        </div>
</button>      <div class="flex items-center justify-between mt-2 max-[480px]:flex-col max-[480px]:gap-2 max-[480px]:items-start">
        <span class="flex items-center gap-1 text-[rgba(47,44,37,0.80)] text-sm not-italic font-normal leading-[140%] font-manrope">
          Don't have an account?
          <a data-action="click-&gt;booking-modal#showSignup" data-turbo="false" class="cursor-pointer text-[#2F2C25] font-semibold underline decoration-solid decoration-auto underline-offset-auto font-manrope" href="/booking-login-modal?modal_id=booking-login-modal&amp;type=signup">Sign Up</a>
        </span>
        <a data-turbo-stream="true" class="text-[#2F2C25] text-sm not-italic font-semibold leading-[140%] underline decoration-solid decoration-auto underline-offset-auto font-manrope" href="/booking-login-modal?modal_id=booking-login-modal&amp;type=password">Lost Password?</a>
      </div>
    </div>
</form></div>
</div>

<div data-booking-modal-target="signup" class="hidden">
  <form class="flex flex-col gap-[12px]" data-turbo="false" data-controller="phone-input" data-action="submit-&gt;phone-input#handleSignupPhoneSubmit" action="/users" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="bnnWrwFFHUqTt2Svy4XZP-TiH1KUT6dttSXJiPWuQ8hCh6WqxAiL1ldpQdTl1rb6Yf75f7pzchPKFCWpaG9EuQ" autocomplete="off" />
  <div class="form-group">
    <div class="snomxik-tycqzpjfh_1784151541"><style media="screen">.snomxik-tycqzpjfh_1784151541 {display:none;}</style><label for="snomxik-tycqzpjfh">If you are a human, ignore this field</label><input type="text" name="snomxik-tycqzpjfh" id="snomxik-tycqzpjfh" autocomplete="off" tabindex="-1" /><input type="hidden" name="spinner" value="836f8ce0c5d2e5baa46912726389ffa0" autocomplete="off" /></div>
  </div>
  <div class="form-group w-full cursor-pointer [&_label]:font-semibold! [&_label]:text-[#2F2C25]">
    <label class="text-[#2F2C25] text-sm not-italic leading-5! font-manrope! mb-1">Email</label>
    <input autocomplete="email" id="mdl_join_email_address" placeholder="Enter Email Address" class="w-full text-[16px]! font-normal! rounded-lg! border-[rgba(47,44,37,0.20)]! leading-6! text-[#2F2C25]! placeholder:text-[rgba(47,44,37,0.50)]! h-[40px]" autofocus="autofocus" type="email" value="" name="user[email]" />
  </div>
  <div class="form-group w-full cursor-pointer [&_label]:font-semibold! [&_label]:text-[#2F2C25]">
    <label class="text-[#2F2C25] text-sm not-italic leading-5! font-manrope! mb-1">Full name</label>
    <input placeholder="Enter Full Name" id="mdl_join_fullname" class="w-full text-[16px]! font-normal! rounded-lg! border-[rgba(47,44,37,0.20)]! leading-6! text-[#2F2C25]! placeholder:text-[rgba(47,44,37,0.50)]! h-[40px]" type="text" value="" name="user[name]" />
  </div>
  <div class="form-group w-full cursor-pointer [&_label]:font-semibold! [&_label]:text-[#2F2C25]">
    <label class="text-[#2F2C25] text-sm not-italic leading-5! font-manrope! mb-1">Password</label>
    <input autocomplete="new-password" id="mdl_join_password" placeholder="Enter Password" class="w-full text-[16px]! font-normal! rounded-lg! border-[rgba(47,44,37,0.20)]! leading-6! text-[#2F2C25]! placeholder:text-[rgba(47,44,37,0.50)]! h-[40px]" type="password" name="user[password]" />
  </div>
  <div class="form-group db-required w-full cursor-pointer [&_label]:font-semibold! [&_label]:text-[#2F2C25]">
    <label class="text-[#2F2C25] text-sm not-italic leading-5! font-manrope! mb-1" for="signup_phone">Phone</label>
    <div class="relative w-full [&>.iti]:w-full border bg-white rounded-lg border-solid border-[rgba(47,44,37,0.20)]">
      <input type="tel" id="signup_phone" name="phone_number" value="" required="required" autocomplete="tel" placeholder="Enter Phone Number" class="w-full text-[16px]! font-normal! rounded-lg! leading-6! text-[#2F2C25]! placeholder:text-[rgba(47,44,37,0.50)]! h-[40px] custom-phone-input pl-[90px]!" data-phone-input-target="phoneInput">
      <input autocomplete="off" value="" data-phone-input-target="formattedNumber" type="hidden" name="user[phone]" id="user_phone" />
    </div>
    <p id="signup-phone-number-error" class="hidden text-[#FD306E] text-xs not-italic font-normal leading-4 mt-1 font-manrope" role="alert">Please enter a valid phone number</p>
  </div>
  <div class="checkboxtwo checkbox flex items-start gap-2.5">
    <input name="user[terms_of_service]" type="hidden" value="0" autocomplete="off" /><input id="tos" class="form-checkbox mt-1 w-[18px] h-[18px] shrink-0" type="checkbox" value="1" name="user[terms_of_service]" />
    <label for="tos" class="text-[rgba(47,44,37,0.80)] text-xs not-italic font-normal leading-[140%] font-manrope pt-0.5 select-none">
      I accept the <a target="_blank" id="signup_tos" class="text-[#2F2C25] font-semibold underline decoration-solid decoration-auto underline-offset-auto font-manrope" href="https://company.topline.com/terms-of-service/">terms of service</a> &amp; <a target="_blank" class="text-[#2F2C25] font-semibold underline decoration-solid decoration-auto underline-offset-auto font-manrope" href="https://topline.com/privacy-policy/">privacy policy</a>
    </label>
  </div>
  <div class="checkboxtwo checkbox flex items-start gap-2.5">
    <input name="user[sms_2fa_opt_in]" type="hidden" value="0" autocomplete="off" /><input id="sms_2fa" class="form-checkbox mt-1 w-[18px] h-[18px] shrink-0" type="checkbox" value="1" name="user[sms_2fa_opt_in]" />
    <label for="sms_2fa" class="text-[rgba(47,44,37,0.80)] text-xs not-italic font-normal leading-[140%] font-manrope pt-0.5 select-none">
      By clicking this checkbox, you consent to receive <strong>2FA text messages from Topline. Text STOP to opt out. Text HELP for support. Terms and rates may apply.</strong>
    </label>
  </div>
  <div id="turnstile-widget" class="cf-turnstile mt-1" data-controller="cloudflare-turnstile"
    data-sitekey="0x4AAAAAAA6CqrkTPt2fbvMv"
    data-callback="cloudflareTurnstileCallback" data-size="flexible" data-theme="light">
  </div>
  <div class="form-group w-full mt-1">
    <button name="button" type="submit" class="db-btn-primary-v2 w-full justify-center">
      <div class="content" data-hover-text="Signup">
        <span>Signup</span>
      </div>
</button>  </div>
</form><div class="mt-3 text-sm flex items-center justify-between max-[480px]:flex-col max-[480px]:gap-2 max-[480px]:items-start">
  <span class="flex items-center gap-1 text-[rgba(47,44,37,0.80)] text-sm not-italic font-normal leading-[140%] font-manrope">
    Already have an account?
    <a data-action="click-&gt;booking-modal#showSignin" class="cursor-pointer text-[#2F2C25] font-semibold underline decoration-solid decoration-auto underline-offset-auto font-manrope" href="#">Sign in</a>
  </span>
  <a data-turbo-stream="true" class="text-[#2F2C25] text-sm not-italic font-semibold leading-[140%] underline decoration-solid decoration-auto underline-offset-auto font-manrope" href="/booking-login-modal?modal_id=booking-login-modal&amp;type=password">Lost Password?</a>
</div>

</div>
<div data-booking-modal-target="note" class="mt-[20px] flex p-[10px_12px] items-center justify-center gap-2 border bg-[#F2F2F2] rounded-lg border-solid border-[rgba(47,44,37,0.12)]">
  <img class="w-4 h-4" alt="gold-star" src="https://topline.com/assets/ai-assistant-e52c6bcf.svg" />
  <span class="inline gap-[8px] text-[rgba(47,44,37,0.80)] text-sm not-italic font-normal leading-[140%] font-manrope">
    Start hassle-free, get a
    <a data-turbo-stream="true" class="cursor-pointer text-[#2F2C25] font-semibold underline decoration-solid decoration-auto underline-offset-auto font-manrope" href="/booking-login-modal?modal_id=booking-login-modal&amp;type=magiclink">
      magic link
</a>    to your account now
  </span>
</div>

    </div>
  </div>
</div>

</template></turbo-stream>