/** ------- VARIABLES ------- **/
:root {
  --circle-size: 20px;
  --step-gap: 40px;
  --circle-border-width: 1.54195px;

  --checked-choice: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"><circle cy="10" cx="10" r="8.5" fill="none" stroke="%23AD9759"></circle><circle fill="%23776E55" cy="10" cx="10" r="6.8"></circle></svg>');
  --unchecked-choice: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"><circle cy="10" cx="10" r="8.5" fill="none" stroke="%23AD9759"></circle></svg>');
  --checkbox-checked: url('data:image/svg+xml;uft8,<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0.953744 6.52126L5.14778 10.6782L12 0.999023" stroke="white" stroke-width="2"/> </svg> ');
}

@media (max-width: 978px) {
  :root {
    --step-gap: 20px;
  }
}

/** ------- GENERAL ------- **/

/** ------- Title & Description ------- **/
h2.uabb-gf-form-title {
  font-style: italic;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.18;
  color: var(--PrimaryBlackBrown);
  text-align: center;
  letter-spacing: -0.02em;
  margin-block-end: 10px !important;
  margin-block-start: 30px !important;
}
p.uabb-gf-form-desc {
  color: var(--SecondaryCharcoal);
  margin-bottom: 75.1px !important;
  font-size: 20px;
}
@media (max-width: 768px) {
  h2.uabb-gf-form-title {
    font-size: 27px;
  }
  p.uabb-gf-form-desc {
    margin-bottom: 53px !important;
  }
}

/** ------- LAYOUT ------- **/
.fl-module-uabb-gravity-form {
  max-width: 1011px;
  margin-inline: auto;
  padding-inline: 0;
}
.uabb-gf-style .gform_body.gform-body {
  background: #fff;
  margin: 0 auto;
  padding: 80px 60px;
}
.gform_body div.gform_page {
  text-align: center;
  padding-inline: 31px;
}
@media (max-width: 763px) {
  .uabb-gf-style .gform_body.gform-body {
    padding: 40px 20px;
  }
  .gform_body div.gform_page {
    padding-inline: 0;
  }
}

.gsurvey-survey-field.gsurvey-survey-field label.gfield_label {
  text-align: center !important; /*TODO: clean up*/
}

.gform_validation_errors {
  z-index: 10; /*please dont bite me later*/
}

/**
 * ------- COMPONENTS  ------- 
**/

/** ------- Progress Dots ------- **/

.gf_page_steps {
  border: none !important;
}

span.gf_step_label {
  display: none !important;
}

.gf_page_steps.gf_page_steps.gf_page_steps.gf_page_steps {
  padding: 0;
  display: flex;
  justify-content: center;
  margin-block-end: 47px;
  gap: var(--step-gap);
}

.gform_wrapper.gform_wrapper .gf_page_steps .gf_step {
  position: relative;
  min-width: var(--circle-size);
  width: var(--circle-size);
  height: var(--circle-size);
  max-height: var(--circle-size);
  aspect-ratio: 1;
  margin: 0;
}

.gform_wrapper.gform_wrapper .gf_page_steps .gf_step_number {
  border-color: var(--PrimaryGold);
  border-width: var(--circle-border-width);
  line-height: 0;
  font-size: 0;
  height: inherit;
  width: inherit;
}

.gform_wrapper.gform_wrapper .gf_page_steps .gf_step_number:before,
.gform_wrapper.gform_wrapper .gf_page_steps .gf_step_number:after {
  content: none !important;
}

.gform_wrapper.gform_wrapper .gf_page_steps .gf_step_completed .gf_step_number {
  background: #bcb49e;
  border-color: #bcb49e;
}
.gform_wrapper.gform_wrapper .gf_page_steps .gf_step_active .gf_step_number {
  background: var(--PrimaryGold);
}
.gf_step_last {
  display: none !important;
}
/** Connectors **/
.gform_wrapper.gform_wrapper .gf_page_steps .gf_step:not(:first-of-type):after {
  content: "";
  width: var(--step-gap, 32px);
  height: 1px;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  position: absolute;
  background: var(--PrimaryGold);
  opacity: 0.37;
}
@media (max-width: 763px) {
  .gf_page_steps.gf_page_steps {
    margin-block-end: 37px;
  }

  .gf_page_steps {
    --step-gap: 9.8px;
    --circle-size: 12.66px;
    --circle-border-width: 1px;
  }
}

/* tooltip */
.percent-tooltip {
  position: absolute;
  bottom: calc(100% + (var(--circle-size) * 0.66));
  line-height: 1;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 5px 8px;
  border-radius: 3px;
  font-size: 16px;
}
.complete-tooltip {
  line-height: 1;
  margin-inline: auto;
  display: block;
  max-width: min-content;
  margin-block-end: 10px;
  background: #fff;
  padding: 6px 9px;
  border-radius: 3px;
  font-size: 16px;
  color: var(--SecondaryDarkGold);
  border: 1px solid var(--PrimaryGold);
}
.percent-tooltip:after {
  z-index: -1;
  content: "";
  background-color: #fff;
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 2px;
  top: calc(50% + 0.01em);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

/** ------- About text ------- **/
.intro-text {
  padding-block-start: 20px;
}
.intro-text p {
  margin-block-end: 2.4em;
}
.intro-text.intro-text h3 {
  color: var(--SecondaryDarkGold);
  font-size: 14px;
  margin-block-end: 8px;
}
/** ------- Question ------- **/
.gfield_required {
  visibility: hidden;
  position: absolute;
}
.gsurvey-survey-field.gsurvey-survey-field label.gfield_label {
  font-style: normal;
  font-weight: 400;
  font-size: 33px;
  line-height: 1.43;
  color: var(--PrimaryBlackBrown);
  letter-spacing: -0.02em;
  margin-block-end: 57px;
}

.gsurvey-survey-field label.gfield_label:before {
  content: "Ask Yourself";
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 14px;
  color: var(--SecondaryDarkGold);
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-block-end: 10px;
}
@media (max-width: 763px) {
  .ginput_container_likert {
    display: flex;
    margin-bottom: 1.5em;
    gap: 20px;
  }
  .gsurvey-survey-field.gsurvey-survey-field label.gfield_label {
    font-size: 23px;
    margin-block-end: 35px;
  }
}

/** ------- Likert Labels ------- **/
.ginput_container_likert .likert-labels {
  display: flex;
  justify-content: space-between;
}

.ginput_container_likert .likert-labels > .sc-sans-heading {
  font-size: 12px !important; /*TODO: clean up*/
}

.likert-labels .likert-label,
.gform_wrapper table.gsurvey-likert td.gsurvey-likert-choice:before {
  order: 2;
  font-size: 20px;
  color: var(--SecondaryDarkGray);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
}
.likert-label {
  margin-block-end: 20px;
}

/* THE REST OF THIS SECTION IS FOR MOBILE LABELS*/
@media (max-width: 763px) {
  .gsurvey-likert {
    max-width: 250px;
    margin-inline: auto;
  }
  .ginput_container_likert .likert-labels {
    /*on mobile these are shown as pseudo elements*/
    display: none;
  }
  .ginput_container_likert {
    display: flex;
    margin-bottom: 1.5em;
    gap: 20px;
  }
  .ginput_container_likert table {
    margin-bottom: 0;
  }

  .gform_wrapper table.gsurvey-likert td.gsurvey-likert-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background-position: 50px center !important;
  }
  .gform_wrapper table.gsurvey-likert td.gsurvey-likert-choice input {
    order: 1;
  }

  .gform_wrapper .gsurvey-likert-choice:after {
    margin-left: 0px !important;
  }
  /* SET LABEL PSUEDO ELEMENT*/
  /*1 NOT AT ALL*/
  .gform_wrapper
    table.gsurvey-likert
    td.gsurvey-likert-choice:first-child:before {
    content: "Not at all";
  }
  /*5 SOMEWHAT*/
  .gform_wrapper
    table.gsurvey-likert
    td.gsurvey-likert-choice:nth-of-type(6):before {
    /* 6 is put here bc the quiz starts at 0*/
    content: "Somewhat";
  }
  /*10 COMPLETELY*/
  .gform_wrapper
    table.gsurvey-likert
    td.gsurvey-likert-choice:last-child:before {
    content: "Completely";
  }
}

/** ------- Radio Group ------- **/
table.gsurvey-likert {
  margin-block-end: 57px;
}

@media (max-width: 763px) {
  table.gsurvey-likert {
    margin-block-end: 10px;
  }
}

/** ------- Radio Inputs ------- **/
#gform_wrapper_3 th.gsurvey-likert-choice-label.gsurvey-likert-choice-label {
  font-size: 16px;
  text-transform: uppercase;
  border-bottom: 0;
  background: #ddd !important;
}

#gform_wrapper_3
  table.gsurvey-likert
  td.gsurvey-likert-choice.gsurvey-likert-choice.gsurvey-likert-choice.gsurvey-likert-choice.gsurvey-likert-choice {
  /*TODO: use variable*/
  padding: 20px;
  background-size: 19px 19px;
  background-image: var(--unchecked-choice);
  background-repeat: no-repeat;
}

@media (max-width: 763px) {
  #gform_wrapper_3
    td.gsurvey-likert-choice.gsurvey-likert-choice.gsurvey-likert-choice.gsurvey-likert-choice.gsurvey-likert-choice {
    padding: 4px;
  }
}
#gform_wrapper_3
  td.gsurvey-likert-choice.gsurvey-likert-selected.gsurvey-likert-choice.gsurvey-likert-selected.gsurvey-likert-choice.gsurvey-likert-selected.gsurvey-likert-choice.gsurvey-likert-selected {
  background-color: #f7f4ec !important;
  background-image: var(--checked-choice);
}

/** ------- Navigation Buttons ------- **/
.gform_wrapper .gform_page_footer {
  padding-block: 0 !important;
  margin: 0 !important;
}
input#gform_previous_button_3_20 {
  border: 1px solid #ad9759;
  color: black;
}

#gform_wrapper_3 input[type="button"].gform_previous_button,
#gform_wrapper_3 input[type="button"].gform_next_button {
  line-height: 1;
  white-space: nowrap;
  font-family: var(--sans, "Montserrat");
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-block: 15px;
  border-radius: 0;
}

#gform_wrapper_3 input[type="button"].gform_next_button {
  color: #fff;
}
#gform_wrapper_3 input[type="button"].gform_previous_button {
  color: var(--PrimaryBlackBrown);
  border: 1px solid var(--PrimaryGold);
  padding-inline: 15px;
}

#gform_wrapper_3 input[type="button"].gform_next_button:focus,
#gform_wrapper_3 input[type="button"].gform_next_button:hover {
  background: var(--SecondaryDarkGold);
}
#gform_wrapper_3 input[type="button"].gform_previous_button:focus,
#gform_wrapper_3 input[type="button"].gform_previous_button:hover {
  color: var(--SecondaryDarkGold);
  border-color: currentColor;
}

/** ------- EMAIL FORM ------- **/
.email-form-desc {
  margin-block-end: 57px;
}

.email-form-desc h3 {
  font-size: 33px;
  margin-block: 0px 10px;
}
@media (max-width: 763px) {
  .email-form-desc {
    margin-block-end: 10px;
  }
  .email-form-desc h3 {
    font-size: 23px;
  }
}
@media (min-width: 764px) {
  .gform_wrapper.gform_wrapper.gform_wrapper.gravity-theme
    :is(.gfield.email-field, .gfield.name-field) {
    text-align: left;
    grid-column: span 6;
  }
}

.gform_wrapper.gform_wrapper.gform_wrapper.gravity-theme
  :is(.gfield.email-field, .gfield.name-field)
  .gfield_label.gfield_label {
  font-weight: 100;
  text-align: left;
  margin-bottom: 6px;
  line-height: 1.35;
  white-space: nowrap;
  display: block;
  font-style: italic;
  font-size: 20px;
}

#gform_wrapper_3 input[type="text"],
#gform_wrapper_3 input[type="email"] {
  padding: 14px;
  font-style: italic;
  font-size: 20px;
  border-color: var(--PrimaryGold);
  border-radius: 0;
  border-width: 0.5px;
  background: white;
}

#gform_wrapper_3 input[type="text"]::placeholder,
#gform_wrapper_3 input[type="email"]::placeholder {
  color: var(--SecondaryCharcoal);
  opacity: 0.54;
  font-size: 20px;
  font-style: italic;
}

.gform_wrapper.gform_wrapper .newsletter-opt-in {
  text-align: center;
  margin-block-start: 57px;
  margin-inline: auto;
  max-width: 773px;
}
.gform_wrapper.gform_wrapper
  .newsletter-opt-in
  :is(label, .gfield_description) {
  font-size: 20px;
  color: var(--SecondaryCharcoal);
}

.uabb-gf-style
  .gform_body
  .newsletter-opt-in
  .ginput_container_checkbox
  .gfield_checkbox
  .gchoice {
  text-align: center;
}

/* checkbox */
.newsletter-opt-in label {
  /* display: flex !important; */
  /* justify-content: center; */
  /* align-items: center; */
  display: inline-block;
  margin-inline: auto;
}

.newsletter-opt-in .gchoice input {
  visibility: hidden;
  position: absolute;
}
.newsletter-opt-in .gchoice input + label:before {
  content: "";
  display: inline-block;
  position: relative;
  top: 3px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin-right: 10px;
  background: white;
  border: 1px solid #0075ff;
}

.newsletter-opt-in .gchoice input:checked + label:before {
  background-color: #0075ff;
  background-image: var(--checkbox-checked);
  background-repeat: no-repeat;
  background-position: center;
}

.gform_wrapper.gravity-theme .newsletter-opt-in .gfield_description {
  padding-block: 15px 57px;
}

/** ------- Submit Button ------- **/
.uabb-gf-style .gform_page .gform_page_footer #gform_submit_button_3 {
  line-height: 1;
  white-space: nowrap;
  font-family: var(--sans, "Montserrat");
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 15px 28px;
  border-radius: 0;
  outline: none;
}


/* ----- Quiet Quiz ------ */

h5.eyebrow {
  text-transform: uppercase;
  color: #776E55;
  font-family: 'Sackers Gothic';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-align: start;
}

h5.questions {
  font-family: 'Sabon LT Pro';
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 30px;
}

.quiz-submit--hidden {
  display: none;
}

th {
  text-transform: uppercase;
  color: #776E55;
  font-family: 'Sackers Gothic';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-align: start;
}

.boolean--selected input,
.boolean input {
  position: absolute;
  top: 0;
  left: -9999px;
}

.boolean {
  padding: 20px;
  background-size: 19px 19px;
  background-image: var(--unchecked-choice);
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.boolean--selected {
  background-color: #f7f4ec !important;
  background-image: var(--checked-choice);
  background-position: center;
}

.quiz-submit {
  background: #AD9759;
  position: relative;
  color: white;
  font-family: var(--sans, Montserrat);
  text-transform: uppercase;
  font-size: 14px;
  padding: 18px 24px;
  border-radius: 0px;
  border: none;
  outline: 1px solid #AD9759;
  outline-offset: 3px;
  margin-left: 50%;
  transform: translateX(-50%);
}

.quiz-result {
  border: hidden;
  position: relative;
  margin-top: 40px;
}

.quiz-result .false-results,
.quiz-result .true-results {
  margin-block-start: 0px;
  margin-block-end: 0px;
}

.quiz-socials--hidden {
  display: none;
}
