/* make form full width */
.hbspt-form fieldset {
  max-width: 100% !important;
}

/* remove margins and padding from top level elements */
.hbspt-form .submitted-message > * {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* text input fields */
.hs-form-field {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 0 0 30px;
  margin: 0 !important;
  text-align: left;
}

.hs-form-field:not(.hs-fieldtype-booleancheckbox) label {
  padding: 0 5px 5px 0;
  margin-bottom: -12px;
  color: #0A2447;
  background-color: #FFFFFF;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  font-size: 14px;
  z-index: 1;
}

.hs-form-field label > span:first-child {
  padding: 0 3px 0 0;
}

.hs-form-field .input,
.hs-form-field input:not([type="checkbox"]),
.hs-form-field textarea,
.hs-form-field select {
  width: 100% !important;
}

.hs-form-field input:not([type="checkbox"]),
.hs-form-field textarea {
  height: 62px;
  border-radius: 0;
  outline: 0;
  color: #404961;
  border: 1px solid #D0D7E8;
  padding: 15px 20px 10px;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  box-shadow: none;
}

.hs-form-field input:not([type="checkbox"]) {
  transition: all 250ms;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.hs-form-field textarea {
  padding: 21px 20px 20px;
  resize: none;
}

/* select boxes */

.hs-form-field select {
  height: 62px;
  width: 100%;
  color: #404961;
  border-radius: 0;
  outline: 0;
  border: 1px solid #D0D7E8;
  padding: 15px 20px 10px;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  box-shadow: none;
  transition: all 250ms;
  background: url(https://cdn.brief.vet/plumbs/marketing-site/images/icons/Icons_Chevron_Navy_Down.svg) !important;
  background-position: center right 20px !important;
  background-size: 10px !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.hs-form-field .hs-input.is-placeholder {
  color: #7E8BA8;
}

/* form response */

.fake-column-2-content .wp-form-response {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.fake-column-2-content .wp-form-response > * {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

.fake-column-2-content .wp-form-response > p {
  color: #535E79;
  padding: 0 0 25px;
  width: 100%;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 200;
  line-height: 1.6;
  font-size: 18px;
}

.fake-column-2-content .wp-form-response > h2:last-child,
.fake-column-2-content .wp-form-response > h3:last-child,
.fake-column-2-content .wp-form-response > p:last-child {
  padding-bottom: 0;
}

.fake-column-2-content .wp-form-response > a:last-child {
  margin-bottom: 0;
}

/* submit button */

.hs-button[type='submit'] {
  min-width: 180px;
  padding: 22px 40px;
  margin: 0;
  background: linear-gradient(-90deg, #00CAE0, #0590D5);
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  border-radius: 5px;
  border: 0;
  transition: all 250ms;
  user-select: none;
  cursor: pointer;
  z-index: 3;
}

.hs-button[type='submit']:hover {
  box-shadow: rgb(5 144 213 / 40%) 0px 2px 24px;
}

/* payment button */

.fake-column-2-content .wp-form-response .gradient-button {
  height: 64px;
}

/* required fields */
.hbspt-form .hs-form-required {
  color: #0590D5;
}

/* errors */

.hs_error_rollup {
    margin: 0 0 20px;
}

.hs-error-msgs.inputs-list {
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0;
  transition: all 250ms;
}

.hs-error-msgs.inputs-list {
  display: block !important;
}

.hs-error-msg-container label,
.hs-error-msgs label.hs-error-msg {
  color: #F20045;
}

.hs-error-msgs:not(.hs-fieldtype-booleancheckbox) label.hs-error-msg {
  padding-top: 5px;
}

.hs-form-field.hs-error-msg-container .hs-input:not([type="checkbox"]),
.hs-form-field.hs-error-msg-container textarea,
.hs-form-field.hs-error-msg-container .hs-input:focus,
.hs-form-field.hs-error-msg-container .hs-input:hover {
  border-color: #F20045;
}

.hs-form-field .hs-error-msgs.inputs-list label {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  font-size: 14px;
  text-transform: inherit;
}

/* the error that sometimes appears over the submit button -- have seen this happen when I messed up the email field but all others were good */

.hs_error_rollup .hs-error-msgs {
    margin: 0 0 10px 0;
}

.hs_error_rollup label {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.4;
    font-size: 14px;
    text-transform: inherit;
    color: #F20045;
}

/* form response */

.hbspt-form .submitted-message {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin-bottom: -25px;
 }

/*
 .submitted-message > *:last-child {
   padding-bottom: 0;
   margin-bottom: 0;
 }
 */

/* Response Paragraphs and Paragraph Text in the Form*/
 .hbspt-form .submitted-message p {
   padding: 0 0 25px;
   margin-bottom: 0;
   color: #535E79;
   text-align: left;
   width: 100%;
   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   font-weight: 200;
   line-height: 1.6;
   font-size: 18px;
   /* display: flex; */
 }

/* Response Headings (Intended for Group Promo and 2-Col Pages) */
 .hbspt-form .submitted-message h2,
 .page-container .two-column.side-rail .hbspt-form .submitted-message p:first-child {
   color: #0590D5;
   line-height: 1.2;
   font-size: 44px;
   font-weight: 200;
   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   text-align: left;
   width: 100%;
   padding: 0 0 25px;
   margin-bottom: 0;
  }

  @media only screen and (max-width: 760px) {
    .hbspt-form .submitted-message h2,
    .page-container .two-column.side-rail .hbspt-form .submitted-message p:first-child {
      font-size: 34px;
     }
  }

  /* Response Headings (Intended for Forms in Blog Posts) */
  .hbspt-form .submitted-message h3 {
    color: #0590D5;
    text-align: left;
    width: 100%;
    padding: 0 0 25px;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.2;
    font-weight: 700;
    font-size: 22px;
  }

  /* Response Text Links */
  .hbspt-form .submitted-message p a {
    color: #0590D5;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 200;
    line-height: 1.6;
    font-size: 18px;
  }





/*
.page-container .two-column.side-rail .hbspt-form .submitted-message p:first-child {
  color: #0590D5;
  line-height: 1.2;
  font-size: 44px;
}

@media only screen and (max-width: 760px) {
  .page-container .two-column.side-rail .hbspt-form .submitted-message p:first-child {
    font-size: 34px;
  }
}
*/

/*
.page-container .two-column.side-rail .hbspt-form .submitted-message > *:last-child {
  padding-bottom: 0;
}
*/

/* Response Button */
.page-container .two-column.side-rail .hbspt-form .submitted-message > a {
  /* width: 100%; */ /* Not sure why this was set to 100% instead of auto? Changing to auto for now */
  width: auto;
  min-width: 180px;
  padding: 22px 40px;
  margin: 0;
  background: linear-gradient(-90deg, #00CAE0, #0590D5);
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  color: #FFFFFF;
  border-radius: 5px;
  border: 0;
  transition: all 250ms;
  user-select: none;
  cursor: pointer;
}

.page-container .two-column.side-rail .hbspt-form .submitted-message > a:hover {
  box-shadow: rgb(5 144 213 / 40%) 0px 2px 24px;
}

@media only screen and (min-width: 1201px) {
  /* we set a min-height in the hubspot-forms-basic.js file to match the height of the navy bar
  so that the height of the white box that holds the form and thank you response will overlap
  the navy bar so in the event there's extra whitespace at the bottom of the white box,
  we center the copy */
  .hubspot-form-submitted .page-container .two-column.side-rail .fake-column-2-container {
    justify-content: center;
  }

  /* hid the h1 and intro text desktop after the form is submitted */
  .hubspot-form-submitted .page-container .two-column.side-rail .fake-column-2-content > h1,
  .hubspot-form-submitted .page-container .two-column.side-rail .fake-column-2-content > p {
    display: none;
  }
}

 /* user validation */

/* hiding the submit button because this form will never actually be submitted
it's only used to make sure they validate successfully, which will allow them to complete
the actual hubspot form that comes after this form */
 .formidable-form.hubspot-omeda-user-validation .frm_submit,
 .formidable-form.hubspot-omeda-user-validation .frm_verify {
   display: none;
 }

.hbspt-form .hs-button[type="submit"].submit-disabled {
  background: #D0D7E8;
  cursor: default;
}

.hbspt-form .hs-button[type="submit"].submit-disabled:hover {
  background: #D0D7E8;
  box-shadow: none;
}

.submit-button-user-validation ul {
  margin: 0 0 10px 0;
  transition: all 250ms;
  list-style: none;
  padding-left: 0;
}

.submit-button-user-validation ul li label {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  font-size: 14px;
  text-transform: inherit;
  color: #F20045;
  padding: 0 0 12px;
}

/* Hubspot Help Text */

.hs-field-desc {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    margin-top: 10px;
    color: #535E79;
    text-transform: none;
    transition: all 250ms;
}

/* Loader */

.loader  {
  background-image: url(https://cdn.brief.vet/plumbs/marketing-site/images/icons/pro/Icons_Loader_Large.svg);
  background-position: center center;
  background-repeat: no-repeat;
  animation: custom-validation-loader-rotate 1.2s infinite linear;
  min-height: 130px;
  background-size: 50px;
}

/* Upload Buttons */

.hs-form-field.hs-fieldtype-file > label {
  border: 1px solid #D0D7E8;
  padding: 15px 20px 10px;
  position: relative;
  width: 100%;
  margin: 0;
}

.hs-error-msg-container.hs-form-field.hs-fieldtype-file > label {
  border-color: #F20045;
}

.hs-form-field.hs-fieldtype-file > label > span {
  background: #fff;
  position: absolute;
  top: -7px;
  left: -1px;
  padding: 0 5px 5px 0;
}

.hs-form-field input[type="file"] {
  display: none;
}

.hubspot-upload-button-wrapper {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 0 8px;
}

.hubspot-upload-button-wrapper .hubspot-upload-button {
  width: 120px;
  display: flex;
  height: 30px;
  color: #0590D5;
  border: 1px solid #0590D5;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  transition: all 250ms;
  cursor: pointer;
}

.hubspot-upload-button-wrapper .hubspot-upload-button:hover {
  color: #fff;
  background: #0590D5;
}

.hubspot-upload-button-wrapper .hubspot-selected-file-name {
  color: #0590D5;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-transform: none;
}

/* BASIC CHECKBOXES */
.hbspt-form ul.inputs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hbspt-form ul.inputs-list label {
  display: flex;
  align-items: flex-start;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.hbspt-form ul.inputs-list label input[type="checkbox"] {
  margin: 5px 0 0;
}

.hbspt-form ul.inputs-list label input[type="checkbox"] + span {
  flex: 1;
  text-transform: none;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #535E79;
  padding-left: 15px;
}

/* FANCY CHECKBOXES (only multi checkboxes will get these) */
.hbspt-form .hs-multi_checkbox ul.inputs-list li {
  padding: 0 0 6px;
}

.hbspt-form .hs-multi_checkbox .input {
  position: relative;
  top: 10px;
}

/* Customize the label (the container) */
.hbspt-form .hs-multi_checkbox ul.inputs-list label.fancy-checkbox-label {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.hbspt-form .hs-multi_checkbox ul.inputs-list label.fancy-checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.hbspt-form .hs-multi_checkbox ul.inputs-list label.fancy-checkbox-label input[type="checkbox"] ~ .fancy-checkbox {
  position: absolute;
  top: 5px;
  left: 0;
  background: #fff;
  outline-color: #D0D7E8;
  outline-width: 2px;
  outline-style: solid;
  border: 3px solid #fff;
  width: 16px;
  height: 16px;
  transition: all 250ms;
}

/* On mouse-over, add a grey background color */
.hbspt-form .hs-multi_checkbox ul.inputs-list label.fancy-checkbox-label:hover input[type="checkbox"] ~ .fancy-checkbox {
  background: #D0D7E8;
}

/* When the checkbox is checked, add a blue background */
.hbspt-form .hs-multi_checkbox ul.inputs-list label.fancy-checkbox-label input[type="checkbox"]:checked ~ .fancy-checkbox {
  background: #0590D5;
}

.hbspt-form .hs-multi_checkbox ul.inputs-list label.fancy-checkbox-label input[type="checkbox"] + span {
  padding-left: 28px;
  display: inline-block;
}

/* TOGGLE (Only single checkboxes will get these) */
.hbspt-form .hs-fieldtype-booleancheckbox ul.inputs-list label.toggle-label {
  position: relative;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.hbspt-form .hs-fieldtype-booleancheckbox ul.inputs-list label.toggle-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.hbspt-form .hs-fieldtype-booleancheckbox ul.inputs-list label.toggle-label input[type="checkbox"] ~ .toggle-switch {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 250ms;
  display: inline-block;
  width: 40px;
  height: 25px;
  vertical-align: middle;
}

.hbspt-form .hs-fieldtype-booleancheckbox ul.inputs-list label.toggle-label input[type="checkbox"] ~ .toggle-switch .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: .4s;
  border-radius: 30px;
  background-color: #D0D7E8;
}

.hbspt-form .hs-fieldtype-booleancheckbox ul.inputs-list label.toggle-label input[type="checkbox"]:checked ~ .toggle-switch .toggle-slider {
  background-color: transparent;
  background: linear-gradient(-90deg, #00CAE0, #0590D5);
}

.hbspt-form .hs-fieldtype-booleancheckbox ul.inputs-list label.toggle-label input[type="checkbox"] ~ .toggle-switch .toggle-slider:before {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background-color: white;
  transition: .4s;
  box-shadow: 0 2px 6px rgba(41, 58, 82, 0.31);
}

.hbspt-form .hs-fieldtype-booleancheckbox ul.inputs-list label.toggle-label input[type="checkbox"]:checked ~ .toggle-switch .toggle-slider:before {
  transform: translateX(15px);
}

.hbspt-form .hs-fieldtype-booleancheckbox ul.inputs-list label.toggle-label input[type="checkbox"] + span {
  padding-left: 54px;
  display: inline-block;
}

/* RICH TEXT */
.hbspt-form .hs-richtext,
.hbspt-form .hs-richtext p {
  padding: 0 0 30px;
  width: 100%;
  color: #535E79;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  font-size: 15px;
}

.hbspt-form .hs-richtext.hs-main-font-element p {
  padding: 0 0 25px;
  margin-bottom: 0;
  text-align: left;
  font-weight: 200;
  font-size: 18px;
}

/* 2 Columns */
.hbspt-form .form-columns-2 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 37px;
}

@media only screen and (max-width: 760px) {
  .hbspt-form .form-columns-2 {
      flex-direction: column;
      gap: 0;
  }

  .hbspt-form .form-columns-2 .hs-form-field {
    width: 100% !important;
  }
}

/* Hide Elements after Submission */
.hubspot-form-submitted .hide-after-hubspot-submission {
  display: none;
}

/* Footnote Below Submit Button */
.hbspt-form + .form-footnote {
    width: 100%;
    padding: 15px 0;
}