/*#webform-submission-contact-rep-node-101-add-form .form-item-by-submitting-this-form-you-consent-to-the-processing-and-storag label:after
 {
    color: #112337;
    bottom: 4px;
    position: absolute;
    top: auto;
}*/
/* 1. Reduce the width for Territory and Specialty */
#webform-submission-contact-rep-node-101-add-form legend.captcha__title.js-form-required.form-required {
    display: none;
}
#webform-submission-contact-rep-node-101-add-form .form-item-specialty {
  width: 30%; /* reduced from ~48% */
  display: inline-block;
  vertical-align: top;
  margin-right: 2%;
}

/* 2. Increase the box height for the top error message */
#webform-submission-contact-rep-node-101-add-form .form-error-message {
  min-height: 50px; /* taller box */
  line-height: 3.0;
  border-radius: 0; /* 4. remove border radius */
}

/* 3. Decrease the box height for inline field error messages */
#webform-submission-contact-rep-node-101-add-form .error {
  min-height: 24px; /* smaller height */
  line-height: 0.3;
}

#webform-confirmation a {
  text-decoration: none;
  color: #0cafc9;
  transition: color 0.3s ease;
}
#webform-confirmation a:hover {
  color: #cdce00;
}
#webform-submission-contact-rep-node-101-add-form .exclamation-icon {
  position: relative;
  display: inline-block;
  width: 17px;/* Smaller size */
  height: 17px;
  vertical-align: middle;
  border-radius: 50%; /* Makes it circular */
  background-color: rgba(100, 0, 0, 0.2); /* Translucent red fill */
  border: 1px solid #cc0000; /* Red border */
  margin-right:5px;
}

#webform-submission-contact-rep-node-101-add-form .exclamation-icon::before {
  content: "!";
  font-size: 0.6em; /* Smaller font size */
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 15px;
  height: 15px;
  margin: auto;
  color: #cc0000;
}
#webform-submission-contact-rep-node-101-add-form a {
  text-decoration: none;
  color: #0cafc9;
  transition: color 0.3s ease;
}

#webform-submission-contact-rep-node-101-add-form a:hover {
  color: #cdce00;
}

#webform-submission-contact-rep-node-101-add-form .error {
  color: #0cafc9;
  border: 1px solid #0cafc9;
  margin-top: 8px;
  text-align: center;
  background-color: rgba(12, 177, 202, 0.1);
  padding: 8px 12px;
  font-size: 0.9rem;
  display : block;
}
#webform-submission-contact-rep-node-101-add-form .form-error-message{
  color: #0cafc9;
  border: 1px solid #0cafc9;
  margin-top: 8px;
  text-align: center;
  background-color: rgba(12, 177, 202, 0.1);
  padding: 8px 12px;
  font-size: 0.9rem;
  display : block;
}
#webform-submission-contact-rep-node-101-add-form {
  max-width: 942px;
  margin: 3rem auto 0;
  padding: 0 40px;
}
#webform-submission-contact-rep-node-101-add-form input,
#webform-submission-contact-rep-node-101-add-form textarea,
#webform-submission-contact-rep-node-101-add-form select {
  border-radius: 8px;
  background-color : #fff;
}

#webform-submission-contact-rep-node-101-add-form input[type="text"],
#webform-submission-contact-rep-node-101-add-form input[type="email"],
#webform-submission-contact-rep-node-101-add-form textarea,
#webform-submission-contact-rep-node-101-add-form select {
  background-color : #fff;
  border-radius: 8px;
  border: 1px solid #000;
  padding: 14px 15px;
  /* Added for text consistency */
  font-family: Arial, sans-serif;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-weight: inherit;
}

#webform-submission-contact-rep-node-101-add-form textarea {
  min-height: 12rem;
}

#webform-submission-contact-rep-node-101-add-form label,
#webform-submission-contact-rep-node-101-add-form .form-required {
  font-weight: normal !important;
}

#webform-submission-contact-rep-node-101-add-form .form-required::after {
  color: #000 !important;
}

/* Phone Number and Territory side-by-side */
#webform-submission-contact-rep-node-101-add-form .form-item-phone-number,
#webform-submission-contact-rep-node-101-add-form .form-item-territory {
  width: 48%;
  display: inline-block;
  vertical-align: top;
  margin-right: 2%;
}

#webform-submission-contact-rep-node-101-add-form .form-item-territory {
  margin-right: 0;
}

/* Specialty and If Others side-by-side with space */
#webform-submission-contact-rep-node-101-add-form .form-item-specialty {
  width: 30%;              /* Keep Specialty at 30% */
  display: inline-block;
  vertical-align: top;
  margin-right: 20%;      /* Increased margin for more space between them */
  box-sizing: border-box;
}

#webform-submission-contact-rep-node-101-add-form .form-item-specialty .error {
  display: block;
  width: 100%;              /* error message matches Specialty width */
  box-sizing: border-box;
}

#webform-submission-contact-rep-node-101-add-form .form-item-if-other-please-specify {
  width: 48%;               /* Keep at 48% */
  display: inline-block;
  vertical-align: top;
  margin-right: 0;
  box-sizing: border-box;
  margin-top: 7px;
}

#webform-submission-contact-rep-node-101-add-form .form-item-specialty select {
  width: 100%;
}

/* Consent checkbox layout container */
#webform-submission-contact-rep-node-101-add-form 
.form-item-by-submitting-this-form-you-consent-to-the-processing-and-storag {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* aligns checkbox with the top of the label text */
  position: relative;
  padding-bottom: 40px; /* preserve space for the error message */
  gap: 12px; /* spacing between checkbox and label */
  flex-wrap: wrap; /* allow the label to wrap on small screens */
  margin-top: 30px; /* As you set to 30px */
}
/* Hide the default checkbox input */
#webform-submission-contact-rep-node-101-add-form .form-item-by-submitting-this-form-you-consent-to-the-processing-and-storag input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Style the label with padding for the custom checkbox box */
#webform-submission-contact-rep-node-101-add-form .form-item-by-submitting-this-form-you-consent-to-the-processing-and-storag label {
  position: relative;
  cursor: pointer;
  padding-left: 35px; /* Space for the 20px box + 10px gap + 5px for check alignment */
  display: inline-block;
  line-height: 1.5;
  margin: 0;
  flex: 1 1 auto; /* Allow label to take remaining width in flex container */
}
/* Custom checkbox box (red border) - as you adjusted to top: 0.9em */
#webform-submission-contact-rep-node-101-add-form .form-item-by-submitting-this-form-you-consent-to-the-processing-and-storag label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em; /* As you changed */
  width: 22px;
  height: 22px;
  border: 1px solid red;
  background: white;
  border-radius: 2px; /* Optional: slight rounding for modern look */
}
/* Blue checkmark when checked - adjusted top to match the box position so it's inside */
#webform-submission-contact-rep-node-101-add-form .form-item-by-submitting-this-form-you-consent-to-the-processing-and-storag input[type="checkbox"]:checked + label::after {
  content: "✓";
  position: absolute;
  left: -4px; /* Position inside the box */
  top: 1.1em; /* Adjusted to match the box top so the checkmark is inside the 20px box */
  color: #0000FF rgb(0, 0, 255);
  font-size: 16px;
  font-weight: bold;
}
/* Blue shadow on the box when checked */
#webform-submission-contact-rep-node-101-add-form .form-item-by-submitting-this-form-you-consent-to-the-processing-and-storag input[type="checkbox"]:checked + label::before {
  box-shadow: 0 0 5px blue;
}
/* Ensure error message displays below, matching the width of checkbox + label */
#webform-submission-contact-rep-node-101-add-form .form-item-by-submitting-this-form-you-consent-to-the-processing-and-storag span.error {
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  color: #0cafc9;
  border: 1px solid #0cafc9;
  background-color: rgba(12, 177, 202, 0.1);
  border-radius: 0px;
  font-size: 0.8rem;
  text-align: center;
}
}
/* Row wrapper for checkbox + label */
#webform-submission-contact-rep-node-101-add-form 
.form-item-by-submitting-this-form-you-consent-to-the-processing-and-storag .checkbox-label-wrapper {
  display: flex;
  align-items: flex-start; /* align checkbox with top of text */
}

/* Checkbox styling */
#webform-submission-contact-rep-node-101-add-form 
.form-item-by-submitting-this-form-you-consent-to-the-processing-and-storag input[type="checkbox"] {
  margin-right: 12px; /* gap between box and text */
  margin-top: 4px;
  cursor: pointer;
  position:relative;
  top:66px;
  left:3px;
}

/* Label styling */
#webform-submission-contact-rep-node-101-add-form 
.form-item-by-submitting-this-form-you-consent-to-the-processing-and-storag label {
  padding-left: 40px;
  margin: 0;
  flex: 1 1 auto;
  line-height: 1.5;
  cursor: pointer; /* take remaining width */
}

/* Error message positioned below, matching width of checkbox+label */
#webform-submission-contact-rep-node-101-add-form 
.form-item-by-submitting-this-form-you-consent-to-the-processing-and-storag .error {
  margin-top: 8px;
  color: #0cafc9;
  border: 1px solid #0cafc9;
  background-color: rgba(12, 177, 202, 0.1);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  text-align: center;
  align-self: stretch; /* ensures it spans same width as checkbox+label row */
}
#webform-submission-contact-rep-node-101-add-form .form-item-terms-confirm
{
margin-top: -10px;
    margin-bottom: -60px;
}
#webform-submission-contact-rep-node-101-add-form .form-item-by-submitting-this-form-you-consent-to-the-processing-and-storag label::before
{
 background-color: #fff;
 margin-top: 5px;
 margin-left: 4px;
 border-radius: 2px;
 border-color: #000000;
}
/* Mobile-specific styles for iPhone and Android (screens up to 768px wide) */
@media (max-width: 639px) {
  #webform-submission-contact-rep-node-101-add-form {
    max-width: 100%; /* Allow form to take full width on mobile */
    padding: 0 20px; /* Reduce padding for better fit on small screens */
    margin: 1.5rem auto 0; /* Reduce top margin for mobile */
  }
  /* Stack side-by-side fields vertically on mobile */
  #webform-submission-contact-rep-node-101-add-form .form-item-phone-number,
  #webform-submission-contact-rep-node-101-add-form .form-item-territory,
  #webform-submission-contact-rep-node-101-add-form .form-item-specialty,
  #webform-submission-contact-rep-node-101-add-form .form-item-if-other-please-specify {
    width: 100%; /* Full width for each field */
    display: block; /* Change to block for stacking */
    margin-right: 0; /* Remove right margin */
    margin-bottom: 1rem; /* Add bottom margin for spacing between stacked fields */
  }
  /* Adjust input padding for mobile touch targets and prevent text overlap */
  #webform-submission-contact-rep-node-101-add-form input[type="text"],
  #webform-submission-contact-rep-node-101-add-form input[type="email"],
  #webform-submission-contact-rep-node-101-add-form textarea,
  #webform-submission-contact-rep-node-101-add-form select {
    padding: 14px 16px; /* Increased padding for better space */
    word-wrap: break-word; /* Force text to wrap instead of overlapping */
    overflow-wrap: break-word; /* Modern equivalent for better support */
  }
  /* Ensure error messages wrap properly in mobile */
  #webform-submission-contact-rep-node-101-add-form .error {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  /* Ensure checkbox label wraps nicely on small screens */
  #webform-submission-contact-rep-node-101-add-form 
  .form-item-by-submitting-this-form-you-consent-to-the-processing-and-storag {
    gap: 8px; /* Reduce gap for tighter layout */
  }
  #webform-submission-contact-rep-node-101-add-form 
  .form-item-by-submitting-this-form-you-consent-to-the-processing-and-storag label {
    padding-left: -5; /* Remove left padding on mobile */
  }
}
form.webform-submission-contact-rep-add-form .captcha__title {
  display: none;
}