@charset "utf-8";

#overlayContainer { z-index: 1; position: relative; min-height: 100%; display: flex; align-items: center; justify-content: center; width: 100%; background-color: rgba(0, 0, 0, 0.75); transition: opacity 0.5s; opacity: 1; }

#overlayContainer--content { display: flex; flex-direction: column; height: 100%; }

#page { position: relative; display: flex; flex: 0 0 auto; min-height: 600px; width: min(600px, 100vw); flex-direction: row; background-color: rgb(255, 255, 255); background-repeat: no-repeat; background-size: cover; background-position: center center; opacity: 1; justify-content: center; align-items: center; box-shadow: none; }

#closeIconContainer { display: flex; justify-content: center; align-items: center; position: absolute; top: 0px; padding: 16px; right: 0px; z-index: 3; cursor: pointer; margin-top: 0px; margin-right: 0px; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }

#closeIconSvg { stroke: rgb(255, 255, 255); stroke-width: 4px; top: 6px; left: 6px; width: 18px; height: 18px; }

#contentframe { flex: 1 0 0%; position: relative; overflow: hidden auto; max-height: 100%; height: 100%; background-image: url("https://iconfitness-res.cloudinary.com/image/upload/f_auto,q_auto/v1688672079/proform.com/cdn/images/marketing/pf-sms-modal-bg_mobile.png"); background-color: rgb(255, 255, 255); background-repeat: no-repeat; background-size: cover; background-position: center center; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }

#content { width: 100%; max-width: 600px; min-height: 600px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 4.5rem 1rem 4rem; overflow-wrap: break-word; z-index: 2; }

#fieldCaptureHeaderBlock { display: flex; flex-direction: column; width: 100%; flex: 0 0 auto; }

#logo { align-self: center; flex-shrink: 0; max-width: 100%; height: 24px; margin-bottom: 2rem; margin-top: 0px; display: flex; justify-content: center; overflow: hidden; }

#logo img { height: 24px; max-width: 100%; }

#fieldCaptureHeadersContainer { margin: 0px 0px 1rem; }

#fieldcaptureheader1 { color: rgb(255, 255, 255); font-size: 2.5rem; font-family: Nunito; font-weight: 800; letter-spacing: 0px; margin: 5px 0px 1.5rem; text-align: center; max-width: 100%; text-decoration: none; display: block; }

#fieldcaptureheader2 { margin: auto; color: rgb(255, 255, 255); font-size: 1rem; font-family: Nunito; font-weight: 400; letter-spacing: 0px; text-align: center; max-width: 100%; width: 80%; text-decoration: none; display: block; }

#legal { font-family: "Roboto Condensed"; font-size: 0.9375rem; letter-spacing: 0px; line-height: 1.25em; text-align: justify; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); padding: 0.25rem; margin-bottom: 0.5rem; margin-top: 1rem; max-width: 100%; display: flex; }

#legal a { color: rgb(255, 255, 255); text-decoration: underline; }

#fieldCaptureForm { width: 100%; }

#input0, #input1 { display: flex; flex: 1 1 0%; font-size: 1rem; font-family: Roboto; color: rgb(0, 0, 0); position: relative; margin-top: 0rem; margin-bottom: 0.5rem; border-width: 1px; border-color: rgb(151, 151, 151); border-radius: 32px; border-style: solid; overflow: hidden; }

#input0input, #input1input { padding-left: 1rem; background: rgb(255, 255, 255); height: 3rem; width: 100%; flex: 1 1 0%; font-size: 1em; box-sizing: border-box; transition: 0.3s linear; border: medium none; text-align: left; }

#input0label, #input1label { position: absolute; top: calc(50% - 0.5rem); left: 0px; opacity: 0; transition: 0.3s; color: rgb(0, 0, 0); padding-left: 1rem; font-size: 0.75em; }

#form-button-container { display: flex; flex-direction: column; }

#ctabutton1 { display: flex; justify-content: center; align-items: center; flex: 0 0 100%; background-color: rgb(209, 69, 0); width: 100%; min-width: 45px; min-height: 4rem; padding: 0.625em 1em; border-width: 0px; border-color: rgb(0, 0, 0); margin-top: 0px; border-radius: 32px; }

#ctaIcon { margin-bottom: 4px; margin-right: 8px; }

#ctabutton1container { flex: 1 1 0%; flex-direction: column; display: flex; padding: 0px 0.5rem; }

#ctabutton1header1 { color: rgb(255, 255, 255); font-size: 1.125rem; font-family: Nunito; font-weight: 800; letter-spacing: 0px; margin: 2.25px 0px; text-align: center; max-width: 100%; width: 100%; text-decoration: none; display: block; }

#ctabutton1header2 { width: 100%; color: rgb(255, 255, 255); font-size: 0.9375rem; font-family: Nunito; font-weight: 400; letter-spacing: 0px; margin: 1.875px 0px; text-align: center; max-width: 100%; text-decoration: none; display: block; }

#containeroverlay { width: 100%; height: 100%; background: rgb(0, 0, 0); opacity: 0; position: absolute; left: 0px; }

.submission-response, .submission-error { font-family: Roboto; color: black; background-color: rgba(255, 255, 255, 0.75); display: none; text-align: center; font-size: 1rem; padding: 0.7rem 0.5rem; border-radius: 1rem; }

@media screen and (min-width: 540px) {
  #contentframe { background-image: url("https://iconfitness-res.cloudinary.com/image/upload/f_auto,q_auto/v1688672079/proform.com/cdn/images/marketing/pf-sms-modal-bg.jpg"); }
  #content { padding: 2.5rem 5.5rem 2rem; }
}