
<turbo-stream action="update" target="portal_booking_modal"><template>
  <div id="booking-login-modal" class="modal hidden flex" 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 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="db-secbtn text-[16px]! leading-6! font-medium! flex items-center gap-3 w-full close-modal" data-turbo="false" type="submit">
      <img class="w-5 object-cover" src="https://topline.com/assets/auth/linkedin-aa3be738.svg" alt="logo">
</button><input type="hidden" name="authenticity_token" value="5siGY0f3p56Vq5z9U3yp2BdxBZ8v0UksoI2-ac0c7ssJ0mcKVJlB4ulz-yp3lG52SlhAZOyeu_WjwDv53wjjJg" autocomplete="off" /></form>  </li>
  <li>
    <form class="button_to" method="post" action="/users/auth/google_oauth2"><button class="db-secbtn text-[16px]! leading-6! font-medium! flex items-center gap-3 w-full close-modal" data-turbo="false" type="submit">
      <img class="w-5 object-cover" src="https://topline.com/assets/auth/google-cce31e7e.svg" alt="logo">
</button><input type="hidden" name="authenticity_token" value="VbpZ5D1My1po0w97_ttzUBGGA6a9AyBMJ8DTsTPIEth6nXPF7d7yd8NOSsEPXuk2NZNcjsYNGbFEuG5UZb81sA" autocomplete="off" /></form>  </li>
  <li>
    <form class="button_to" method="post" action="/users/auth/twitter"><button class="db-secbtn text-[16px]! leading-6! font-medium! flex items-center gap-3 w-full close-modal" data-turbo="false" type="submit">
      <img class="w-5 object-cover" src="https://topline.com/assets/auth/x-7e5ac011.svg" alt="logo">
</button><input type="hidden" name="authenticity_token" value="S8Z59uaIKA98gRcscuiHnopaiJqVMw61S8b0_IP-uxofcd2Cxl0eBhFW8fWNEJ9AYHZnbiQsrISNzSiqSOgj6Q" 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-border_color after:z-[0]">
  <span class="p-[0px_10px] text-[12px] leading-4 font-medium tracking-[0.2px] font-text_font inline-block text-[rgba(5,18,55,0.60)] text-center z-[1] relative bg-white">
    OR Continue with
  </span>
</div>
<div data-booking-modal-target="signin">
  <div class="flex flex-col gap-[14px] mt-5">
    <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="pmyX4n7uNQvx34nRQ_vx-FRtmeaZ3nnW2n1jk-FHd__RFZ1S72EPmp9akqCsCfO9ObnG3___otCtG1VjwBCaow" 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-[14px] leading-5 !font-normal text-heading_color font-text_font 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 leading-6 text-[rgba(5,18,55,0.80)] h-[40px]" type="email" name="user[email]" />
    </div>
    <div class="form-group w-full cursor-pointer">
      <label class="text-[14px] leading-5 !font-normal text-heading_color font-text_font mb-1" for="booking-login-modal-password">Password</label>
      <input id="booking-login-modal-password" autocomplete="current-password" placeholder="Enter your password" class="w-full text-[16px] font-normal leading-6 text-[rgba(5,18,55,0.80)] 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-primary-button text-[14px] leading-5 font-medium text-white font-text_font p-[8px_22px] w-full" data-booking-modal-target="submitButton">Sign In</button>
      <div class="flex items-center justify-between">
        <a data-action="click-&gt;booking-modal#showSignup" data-turbo="false" class="btn-link text-link_color font-text_font text-[14px] leading-5 font-medium" href="/booking-login-modal?modal_id=booking-login-modal&amp;type=signup">Sign Up</a>
        <a data-turbo-stream="true" class="btn-link text-[rgba(5,18,55,0.60)] font-text_font text-[14px] leading-5 font-medium" 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 data-turbo="false" data-controller="signup-form" action="/users" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="7CYES0_Dwqy1UxtwCC1aT7ixFu7zEXwHOMkGigOqjqevNQR9HCbb-1aRpEgTssaq5pSY4n-SEkOl6qzVKBGMSw" autocomplete="off" />
  <div class="form-group">
    <div class="bko-gdenluhxj_1777302255"><style media="screen">.bko-gdenluhxj_1777302255 {position:absolute!important;top:-9999px;left:-9999px;}</style><label for="bko-gdenluhxj">If you are a human, ignore this field</label><input type="text" name="bko-gdenluhxj" id="bko-gdenluhxj" autocomplete="off" tabindex="-1" /><input type="hidden" name="spinner" value="64796a029bc9549e9e84ecd6c0d075ed" autocomplete="off" /></div>
  </div>
  <div class="flex flex-col sm:flex-row gap-4 mt-[14px]">
    <div class="form-group w-full">
      <label class="text-[14px] leading-5 font-medium text-heading_color font-text_font mb-1">Email</label>
      <input autocomplete="email" id="mdl_join_email_address" placeholder="Enter email address" class="w-full" autofocus="autofocus" data-action="focus-&gt;signup-form#expand click-&gt;signup-form#expand" type="email" value="" name="user[email]" />
    </div>
  </div>
  <div data-signup-form-target="extra" class="flex flex-col sm:flex-row gap-4">
    <div class="form-group w-full">
      <label class="text-[14px] leading-5 font-medium text-heading_color font-text_font mb-1">Full name</label>
      <input placeholder="Enter full name" id="mdl_join_fullname" class="w-full" type="text" value="" name="user[name]" />
    </div>
  </div>
  <div data-signup-form-target="extra" class="flex flex-col sm:flex-row gap-4 mt-[14px]">
    <div class="form-group w-full">
      <label class="text-[14px] leading-5 font-medium text-heading_color font-text_font mb-1">Password</label>
      <input autocomplete="new-password" id="mdl_join_password" placeholder="password" class="w-full" type="password" name="user[password]" />
    </div>
  </div>
  <div data-signup-form-target="extra" class="form-group checkbox flex items-start gap-2 mt-[14px]">
    <input name="user[terms_of_service]" type="hidden" value="0" autocomplete="off" /><input id="mdl_join_tos" class="form-checkbox mt-1 w-[18px] h-[18px] shrink-0 " type="checkbox" value="1" name="user[terms_of_service]" />
    <label for="mdl_join_tos" class="text-sm text-text_color! select-none pt-0.5">
      I accept the <a target="_blank" class="btn-link text-link_color" href="https://company.topline.com/terms-of-service/">terms of service</a>,
      <a target="_blank" class="btn-link text-link_color" href="https://topline.com/privacy-policy/">privacy policy</a>
      & agree to be contacted by Topline via SMS, Phone & Email
    </label>
  </div>
  <div id="turnstile-widget" data-signup-form-target="extra" class="cf-turnstile mt-3" data-controller="cloudflare-turnstile"
    data-sitekey="0x4AAAAAAA6CqrkTPt2fbvMv"
    data-callback="cloudflareTurnstileCallback" data-size="flexible" data-theme="light">
  </div>
  <div data-signup-form-target="extra" class="form-group w-full mt-[14px]">
    <button name="button" type="submit" class="db-primary-button w-full cursor-pointer">Signup</button>
  </div>
</form><div class="mt-3 text-sm flex items-center justify-between">
  <a data-action="click-&gt;booking-modal#showSignin" class="text-link_color" href="#">Sign in</a>
  <a data-turbo-stream="true" class="text-text_color" 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_18px] rounded-[8px] items-start gap-[10px] bg-[#f3f3f3]">
  <svg class="mt-[3px]" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
    <path d="M7 0L8.2724 2.63943C8.92277 3.98855 10.0114 5.07723 11.3606 5.7276L14 7L11.3606 8.2724C10.0114 8.92277 8.92277 10.0114 8.2724 11.3606L7 14L5.7276 11.3606C5.07723 10.0114 3.98855 8.92277 2.63943 8.2724L0 7L2.63943 5.7276C3.98855 5.07723 4.35191 3.41876 4.90937 2.26237L6 0Z" fill="url(#paint0_radial_42639_355084)"></path>
    <defs>
      <radialGradient id="paint0_radial_42639_355084" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.4503 13.4167) rotate(35.3562) scale(7.20206 15.3884)">
        <stop stop-color="#6C4CF3"></stop>
        <stop offset="1" stop-color="#891FDA"></stop>
      </radialGradient>
    </defs>
  </svg>
  <span class="inline gap-[8px] text-text_color text-[14px] font-text_font leading-5 font-normal">
    Start hassle-free, get a
    <a data-turbo-stream="true" class="cursor-pointer text-[14px] leading-5 text-link_color font-text_font" 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>