
<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">
  <button type="button" class="close-modal bg-[#FAFAFB] rounded-md border border-solid border-border_color w-[36px] h-[36px] grid place-items-center text-[#051237]/[0.6] text-[18px] absolute top-[16px] right-[16px] z-10" data-action="click->booking-modal#close">
    <i class="icon-x"></i>
  </button>
  <div class="p-[20px] sm:p-[30px]">
    <div class="flex flex-col gap-5">
  <div class="flex items-center justify-between right-5 top-5 absolute w-[92%]">
    <a data-turbo-stream="true" class="flex cursor-pointer" href="/booking-login-modal?modal_id=booking-login-modal&amp;type=social">
      <i class="icon-arrow-left text-[24px] text-[#2F2C25]"></i>
</a>    <a data-action="click-&gt;booking-modal#close" class="flex cursor-pointer" href="#">
      <i class="anron-cross text-[24px] text-[#2F2C25]"></i>
</a>  </div>
  <div class="flex flex-col gap-4">
    <div class="flex flex-col items-center gap-4">
      <img alt="logo" src="https://topline.com/assets/logo-94740f7e.png" />
      <h4 class="text-[#2F2C25] text-2xl text-center leading-8 font-bold font-manrope">Account sign in</h4>
    </div>
    <form class="flex flex-col gap-3" data-turbo="false" action="/users/sign_in" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="-rz12dRzkgfqBB_I8M-plZ7jdOh-MS1d9hATACu-RNzhbn5tNWGS-0gUPw7aL-RXMMpDY8XwLIp5eSitTNWh4w" autocomplete="off" />
      <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 autofocus="autofocus" id="mdl_email_address" 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]:font-semibold! [&_label]:text-[#2F2C25]">
        <label class="text-[#2F2C25] text-sm not-italic leading-5! font-manrope! mb-1">Password</label>
        <input autocomplete="current-password" id="mdl_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 id="turnstile-widget" class="cf-turnstile" data-controller="cloudflare-turnstile"
              data-sitekey="0x4AAAAAAA6CqrkTPt2fbvMv"
              data-callback="cloudflareTurnstileCallback" data-size="flexible" data-theme="light">
      </div>
      <div class="form-group w-full">
        <button name="button" type="submit" class="db-btn-primary-v2 w-full justify-center">
          <div class="content" data-hover-text="Login">
            <span>Login</span>
          </div>
</button>      </div>
</form>  </div>
  <div class="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>
  <span class="text-[rgba(47,44,37,0.80)] text-xs not-italic font-normal leading-[140%] font-manrope text-center block">By proceeding, you agree to our
    <a class="text-[#2F2C25] font-semibold underline decoration-solid decoration-auto underline-offset-auto font-manrope" href="https://company.topline.com/terms-of-service/" target="_blank">Terms of Use</a> and
    <a class="text-[#2F2C25] font-semibold underline decoration-solid decoration-auto underline-offset-auto font-manrope" href="https://topline.com/privacy-policy/" target="_blank">Privacy Policy</a>
  </span>
  <div class="flex items-center justify-between border-t border-solid border-[rgba(47,44,37,0.08)] p-[20px_30px] lg:m-[0_-30px_-30px] m-[0_-20px_-20px]">
    <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=signup">
      Join us
</a>    <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>
</div>

</template></turbo-stream>