/* ==========================================================================
   LEGAL DEMO PAGE - CENTERED LAYOUT
   ========================================================================== */

/* Override body width to allow centering */
body {
  width: 100%;
  min-width: 1440px; /* Maintain minimum width for design */
}

/* Main page container - centered with max-width */
#base {
  position: relative; /* Changed from absolute */
  max-width: 1440px;
  margin: 0 auto; /* Center the container */
  padding-top: 88px; /* Space for fixed header */
  padding-bottom: 56px; /* Space for fixed footer */
  min-height: calc(100vh - 144px); /* 88px header + 56px footer */
}

/* Main content wrapper - flexbox layout */
#base::after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================================
   LEFT CONTENT COLUMN
   ========================================================================== */

/* Decorative SVG */
#decorativeSvg {
  position: relative; /* Changed from absolute */
  left: auto;
  top: auto;
  width: 487px;
  height: 429px;
  display: block;
  margin: 131px auto 0 268px; /* top: 219px - 88px header = 131px from content start */
  transition: none;
}

#decorativeSvg .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#decorativeSvg_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 487px;
  height: 429px;
}

#decorativeSvg_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

/* Demo Intro Heading */
#demoIntroHeading_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 403px;
  height: 99px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 0px;
  transition: none;
  font-family: "Roboto-Bold", "Roboto Bold", "Roboto", sans-serif;
  font-style: normal;
  color: #000000;
  text-align: center;
}

#demoIntroHeading {
  border-width: 0px;
  position: absolute; /* Keep absolute for precise positioning */
  left: 310px;
  top: 104px;
  width: 403px;
  height: 99px;
  display: flex;
  transition: none;
  transform-origin: 50% 50%;
  font-family: "Roboto-Bold", "Roboto Bold", "Roboto", sans-serif;
  font-style: normal;
  color: #000000;
  text-align: center;
}

#demoIntroHeading .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
}

#demoIntroHeading_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
}

/* Pay As You Go Heading */
#payAsYouGoHeading_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 403px;
  height: 21px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 0px;
  transition: none;
  font-family: "Roboto-Bold", "Roboto Bold", "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  color: #000000;
  text-align: center;
}

#payAsYouGoHeading {
  border-width: 0px;
  position: absolute; /* Keep absolute for precise positioning */
  left: 310px;
  top: 664px;
  width: 403px;
  height: 21px;
  display: flex;
  transition: none;
  transform-origin: 50% 50%;
  font-family: "Roboto-Bold", "Roboto Bold", "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  color: #000000;
  text-align: center;
}

#payAsYouGoHeading .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
}

#payAsYouGoHeading_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
}

/* ==========================================================================
   RIGHT FORM COLUMN
   ========================================================================== */

/* Form Container - positioned on right side */
#demoFormContainer {
  border-width: 0px;
  position: absolute;
  right: 46px; /* 1440 - 1037 - 357 = 46px from right edge */
  top: 112px;
  width: 357px;
  height: auto;
  min-height: 586px;
}

/* Elevation shadow layers - maintain absolute positioning for layered shadows */
#formElevation24 {
  border-width: 0px;
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: auto;
}

#formElevation12 {
  border-width: 0px;
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: auto;
}

/* Dialog background layers - Material Design elevation effect */
#dialogBg3_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 357px;
  height: 586px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  filter: drop-shadow(0px 12px 8.5px rgba(0, 0, 0, 0.13725490196078433));
  transition: none;
}

#dialogBg3 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 357px;
  height: 586px;
  display: flex;
  transition: none;
  transform-origin: 50% 50%;
}

#dialogBg3 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#dialogBg3_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#dialogBg2_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 357px;
  height: 586px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  filter: drop-shadow(0px 5px 11px rgba(0, 0, 0, 0.11764705882352941));
  transition: none;
}

#dialogBg2 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 357px;
  height: 586px;
  display: flex;
  transition: none;
  transform-origin: 50% 50%;
}

#dialogBg2 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#dialogBg2_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#dialogBg1_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 357px;
  height: 586px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  filter: drop-shadow(0px 7px 4px rgba(0, 0, 0, 0.2));
  transition: none;
}

#dialogBg1 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 357px;
  height: 586px;
  display: flex;
  transition: none;
  transform-origin: 50% 50%;
}

#dialogBg1 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#dialogBg1_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

/* ==========================================================================
   FORM FIELDS CONTAINER
   ========================================================================== */

#formFieldsContainer {
  border-width: 0px;
  position: relative;
  left: 0px;
  top: 0px;
  width: 0px;
  height: auto;
  padding: 74px 24px 24px 24px; /* top: 186-112=74px, sides: (357-303)/2≈27px, use 24px */
}

#formFieldsInner {
  border-width: 0px;
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: auto;
}

/* Form Heading */
#demoFormHeading_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 351px;
  height: 38px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 0px;
  transition: none;
  font-family: "Poppins-Regular", "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #000000;
}

#demoFormHeading {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 16px; /* 128-112=16px from form container top */
  width: 351px;
  height: 38px;
  display: flex;
  transition: none;
  transform-origin: 50% 50%;
  font-family: "Poppins-Regular", "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #000000;
}

#demoFormHeading .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 24px 0px 24px;
  box-sizing: border-box;
  width: 100%;
}

#demoFormHeading_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
}

/* ==========================================================================
   FORM FIELDS - VERTICAL STACK
   ========================================================================== */

/* First Name Field */
#firstName {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: rgba(0, 0, 0, 0.8666666666666667);
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#firstName.hint {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: #999999;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#firstName.disabled {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: rgba(0, 0, 0, 0.8666666666666667);
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#firstName.hint.disabled {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: #999999;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#firstNameField_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#firstNameField {
  border-width: 0px;
  position: relative; /* Changed from absolute */
  left: auto;
  top: auto;
  width: 303px;
  height: 60px;
  display: flex;
  margin-bottom: 16px; /* Spacing between fields: 262-186-60=16px */
  transition: none;
  transform-origin: 50% 50%;
  font-size: 20px;
}

#firstNameField .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 8px;
  box-sizing: border-box;
  width: 100%;
}

#firstNameField_div.hint {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#firstNameField.hint {
}

#firstNameField_div.disabled {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(240, 240, 240, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#firstNameField.disabled {
}

#firstNameField_div.hint.disabled {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(240, 240, 240, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#firstNameField.hint.disabled {
}

/* Last Name Field */
#lastName {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: rgba(0, 0, 0, 0.8666666666666667);
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#lastName.hint {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: #999999;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#lastName.disabled {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: rgba(0, 0, 0, 0.8666666666666667);
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#lastName.hint.disabled {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: #999999;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#lastNameField_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#lastNameField {
  border-width: 0px;
  position: relative; /* Changed from absolute */
  left: auto;
  top: auto;
  width: 303px;
  height: 60px;
  display: flex;
  margin-bottom: 16px;
  transition: none;
  transform-origin: 50% 50%;
  font-size: 20px;
}

#lastNameField .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 8px;
  box-sizing: border-box;
  width: 100%;
}

#lastNameField_div.hint {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#lastNameField.hint {
}

#lastNameField_div.disabled {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(240, 240, 240, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#lastNameField.disabled {
}

#lastNameField_div.hint.disabled {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(240, 240, 240, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#lastNameField.hint.disabled {
}

/* Email Field */
#email {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: rgba(0, 0, 0, 0.8666666666666667);
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#email.hint {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: #999999;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#email.disabled {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: rgba(0, 0, 0, 0.8666666666666667);
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#email.hint.disabled {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: #999999;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#emailField_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#emailField {
  border-width: 0px;
  position: relative; /* Changed from absolute */
  left: auto;
  top: auto;
  width: 303px;
  height: 60px;
  display: flex;
  margin-bottom: 16px;
  transition: none;
  transform-origin: 50% 50%;
  font-size: 20px;
}

#emailField .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 8px;
  box-sizing: border-box;
  width: 100%;
}

#emailField_div.hint {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#emailField.hint {
}

#emailField_div.disabled {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(240, 240, 240, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#emailField.disabled {
}

#emailField_div.hint.disabled {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(240, 240, 240, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#emailField.hint.disabled {
}
#contactTime {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: rgba(0, 0, 0, 0.8666666666666667);
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#contactTime.hint {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: #999999;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#contactTime.disabled {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: rgba(0, 0, 0, 0.8666666666666667);
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#contactTime.hint.disabled {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: #999999;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#bestTimeField_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#bestTimeField {
  border-width: 0px;
  position: relative; /* Changed from absolute */
  left: auto;
  top: auto;
  width: 303px;
  height: 60px;
  display: flex;
  margin-bottom: 16px;
  transition: none;
  transform-origin: 50% 50%;
  font-size: 20px;
}

#bestTimeField .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 8px;
  box-sizing: border-box;
  width: 100%;
}

#bestTimeField_div.hint {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#bestTimeField.hint {
}

#bestTimeField_div.disabled {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(240, 240, 240, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#bestTimeField.disabled {
}

#bestTimeField_div.hint.disabled {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(240, 240, 240, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#bestTimeField.hint.disabled {
}

/* Phone Field */
#phone {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: rgba(0, 0, 0, 0.8666666666666667);
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#phone.hint {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: #999999;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#phone.disabled {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: rgba(0, 0, 0, 0.8666666666666667);
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#phone.hint.disabled {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  padding: 2px 2px 2px 8px;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: normal;
  color: #999999;
  text-align: left;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
}

#phoneField_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#phoneField {
  border-width: 0px;
  position: relative; /* Changed from absolute */
  left: auto;
  top: auto;
  width: 303px;
  height: 60px;
  display: flex;
  margin-bottom: 24px; /* Extra space before ROI text */
  transition: none;
  transform-origin: 50% 50%;
  font-size: 20px;
}

#phoneField .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 8px;
  box-sizing: border-box;
  width: 100%;
}

#phoneField_div.hint {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#phoneField.hint {
}

#phoneField_div.disabled {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(240, 240, 240, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#phoneField.disabled {
}

#phoneField_div.hint.disabled {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 303px;
  height: 60px;
  background: inherit;
  background-color: rgba(240, 240, 240, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 0px;
  transition: none;
  font-size: 20px;
}

#phoneField.hint.disabled {
}

/* ==========================================================================
   ROI TEXT AND SUBMIT BUTTON
   ========================================================================== */

/* ROI Text */
#roiText_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 326px;
  height: 17px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 0px;
  transition: none;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #000000;
}

#roiText {
  border-width: 0px;
  position: relative; /* Changed from absolute */
  left: auto;
  top: auto;
  width: 326px;
  height: 17px;
  display: flex;
  margin-bottom: 23px; /* Spacing before button: 614-574-17=23px */
  transition: none;
  transform-origin: 50% 50%;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #000000;
}

#roiText .text {
  position: absolute;
  align-self: flex-start;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
  width: 100%;
}

#roiText_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
}

/* Request Demo Button */
#requestDemoButton_div {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 309px;
  height: 60px;
  background: inherit;
  background-color: rgba(0, 102, 179, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 84px;
  transition: none;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #FFFFFF;
}

#requestDemoButton {
  border-width: 0px;
  position: relative; /* Changed from absolute */
  left: auto;
  top: auto;
  width: 309px;
  height: 60px;
  display: flex;
  margin: 0 auto; /* Center the button */
  transition: none;
  transform-origin: 50% 50%;
  font-family: "Roboto-Regular", "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #FFFFFF;
}

#requestDemoButton .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#requestDemoButton_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
}

/* ==========================================================================
   UNUSED ELEMENTS - HIDDEN
   ========================================================================== */

#u75 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
}

#u76 {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
}

#u77_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 66px;
  height: 67px;
}

#u77 {
  border-width: 0px;
  position: absolute;
  left: 1058px;
  top: 10px;
  width: 66px;
  height: 67px;
  display: flex;
}

#u77 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u77_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u78_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 68px;
  height: 69px;
}

#u78 {
  border-width: 0px;
  position: absolute;
  left: 1165px;
  top: 10px;
  width: 68px;
  height: 69px;
  display: flex;
}

#u78 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u78_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u79_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 36px;
  height: 32px;
}

#u79 {
  border-width: 0px;
  position: absolute;
  left: 1129px;
  top: 32px;
  width: 36px;
  height: 32px;
  display: flex;
}

#u79 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u79_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u80_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 36px;
  height: 32px;
}

#u80 {
  border-width: 0px;
  position: absolute;
  left: 1239px;
  top: 32px;
  width: 36px;
  height: 32px;
  display: flex;
}

#u80 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u80_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u81_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 71px;
  height: 69px;
}

#u81 {
  border-width: 0px;
  position: absolute;
  left: 1279px;
  top: 10px;
  width: 71px;
  height: 69px;
  display: flex;
}

#u81 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u81_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u82_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 36px;
  height: 32px;
}

#u82 {
  border-width: 0px;
  position: absolute;
  left: 1017px;
  top: 32px;
  width: 36px;
  height: 32px;
  display: flex;
}

#u82 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u82_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}

#u83_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 91px;
  height: 70px;
}

#u83 {
  border-width: 0px;
  position: absolute;
  left: 918px;
  top: 10px;
  width: 91px;
  height: 70px;
  display: flex;
}

#u83 .text {
  position: absolute;
  align-self: center;
  padding: 2px 2px 2px 2px;
  box-sizing: border-box;
  width: 100%;
}

#u83_text {
  border-width: 0px;
  word-wrap: break-word;
  text-transform: none;
  visibility: hidden;
}
#demoRequestContainer {
  border-width:0px;
  position:absolute;
  left:1016px;
  top:308px;
  width:357px;
  height:200px;
}
#requestElevation24 {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:0px;
  height:0px;
}
#requestElevation12 {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:0px;
  height:0px;
}
#requestDialogBg3_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:357px;
  height:200px;
  background:inherit;
  background-color:rgba(255, 255, 255, 1);
  border-radius:4px;
  filter:drop-shadow(0px 12px 8.5px rgba(0, 0, 0, 0.13725490196078433));
  transition:none;
}
#requestDialogBg3 {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:357px;
  height:200px;
  display:flex;
  transition:none;
  transform-origin:50% 50%;
}
#requestDialogBg3 .text {
  position:absolute;
  align-self:center;
  padding:2px 2px 2px 2px;
  box-sizing:border-box;
  width:100%;
}
#requestDialogBg3_text {
  border-width:0px;
  word-wrap:break-word;
  text-transform:none;
  visibility:hidden;
}
#requestDialogBg2_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:357px;
  height:200px;
  background:inherit;
  background-color:rgba(255, 255, 255, 1);
  border-radius:4px;
  filter:drop-shadow(0px 5px 11px rgba(0, 0, 0, 0.11764705882352941));
  transition:none;
}
#requestDialogBg2 {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:357px;
  height:200px;
  display:flex;
  transition:none;
  transform-origin:50% 50%;
}
#requestDialogBg2 .text {
  position:absolute;
  align-self:center;
  padding:2px 2px 2px 2px;
  box-sizing:border-box;
  width:100%;
}
#requestDialogBg2_text {
  border-width:0px;
  word-wrap:break-word;
  text-transform:none;
  visibility:hidden;
}
#requestDialogBg1_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:357px;
  height:200px;
  background:inherit;
  background-color:rgba(255, 255, 255, 1);
  border-radius:4px;
  filter:drop-shadow(0px 7px 4px rgba(0, 0, 0, 0.2));
  transition:none;
}
#requestDialogBg1 {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:357px;
  height:200px;
  display:flex;
  transition:none;
  transform-origin:50% 50%;
}
#requestDialogBg1 .text {
  position:absolute;
  align-self:center;
  padding:2px 2px 2px 2px;
  box-sizing:border-box;
  width:100%;
}
#requestDialogBg1_text {
  border-width:0px;
  word-wrap:break-word;
  text-transform:none;
  visibility:hidden;
}
#requestDemoButtonAlt_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:309px;
  height:58px;
  background:inherit;
  background-color:rgba(0, 102, 179, 1);
  box-sizing:border-box;
  border-width:1px;
  border-style:solid;
  border-color:rgba(121, 121, 121, 1);
  border-radius:84px;

  transition:none;
  font-family:"Roboto-Regular", "Roboto", sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:20px;
  color:#FFFFFF;
}
#requestDemoButtonAlt {
  border-width:0px;
  position:absolute;
  left:24px;
  top:70px;
  width:309px;
  height:58px;
  display:flex;
  transition:none;
  transform-origin:50% 50%;
  font-family:"Roboto-Regular", "Roboto", sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:20px;
  color:#FFFFFF;
}
#requestDemoButtonAlt .text {
  position:absolute;
  align-self:center;
  padding:2px 2px 2px 2px;
  box-sizing:border-box;
  width:100%;
}
#requestDemoButtonAlt_text {
  border-width:0px;
  word-wrap:break-word;
  text-transform:none;
}
#demoDescription_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:342px;
  height:48px;
  background:inherit;
  background-color:rgba(255, 255, 255, 0);
  border-radius:0px;

  transition:none;
  font-family:"Poppins-Regular", "Poppins", sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:14px;
  color:#000000;
  text-align:center;
}
#demoDescription {
  border-width:0px;
  position:absolute;
  left:5px;
  top:141px;
  width:342px;
  height:48px;
  display:flex;
  transition:none;
  transform-origin:50% 50%;
  font-family:"Poppins-Regular", "Poppins", sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:14px;
  color:#000000;
  text-align:center;
}
#demoDescription .text {
  position:absolute;
  align-self:center;
  padding:0px 0px 0px 0px;
  box-sizing:border-box;
  width:100%;
}
#demoDescription_text {
  border-width:0px;
  word-wrap:break-word;
  text-transform:none;
}
#demoHeadingAlt_div {
  border-width:0px;
  position:absolute;
  left:0px;
  top:0px;
  width:357px;
  height:38px;
  background:inherit;
  background-color:rgba(255, 255, 255, 0);
  border-radius:0px;

  transition:none;
  font-family:"Roboto-Regular", "Roboto", sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:16px;
  color:#000000;
}
#demoHeadingAlt {
  border-width:0px;
  position:absolute;
  left:0px;
  top:16px;
  width:357px;
  height:38px;
  display:flex;
  transition:none;
  transform-origin:50% 50%;
  font-family:"Roboto-Regular", "Roboto", sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:16px;
  color:#000000;
}
#demoHeadingAlt .text {
  position:absolute;
  align-self:flex-start;
  padding:0px 24px 0px 24px;
  box-sizing:border-box;
  width:100%;
}
#demoHeadingAlt_text {
  border-width:0px;
  word-wrap:break-word;
  text-transform:none;
}