/* Match the Elementor /test/ content frame on Elementor-free clones. */
body:not(.elementor-page):has(.adisc-test-form) {
  background-color: #F5F5F7;
}

body:not(.elementor-page):has(.adisc-test-form) .site-content .ast-container {
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

body:not(.elementor-page):has(.adisc-test-form) .site-content .ast-article-single {
  padding-right: 0;
  padding-left: 0;
}

body:not(.elementor-page) .adisc-test-form {
  box-sizing: border-box;
  width: min(48rem, 87.5vw);
  max-width: 48rem;
  margin-top: -34px;
  margin-right: auto !important;
  margin-left: auto !important;
}

@media only screen and (min-width: 735px) and (max-width: 1068px) {
  body:not(.elementor-page) .adisc-test-form {
    width: min(48rem, calc(100vw - 48px));
  }
}

body:not(.elementor-page) .adisc-test-form .gsurvey-rank {
  padding-left: 0;
  padding-inline-start: 0;
}

body .adisc-test-form {
  /* Hides GF's ugly, default up/down arrows */
  --gf-survey-icon-control-rank: none;

  /* Other */
  --disctm-gf-field-bottom-margin: 4.5rem;        /* Fine-tuned by TM */
  --disctm-gf-field-smaller-bottom-margin: 3rem;  /* Fine-tuned by TM */
  --disctm-gf-field-label-bottom-margin: 1rem;    /* Fine-tuned by TM */
  --disctm-gf-font-weight-light-text: 300;        /* Fine-tuned by TM */
  
  /*
    Styling for Answer Choice Boxes
    MUST use px (not rem) on all devices to optimize sorting speed
  */
  --disctm-gf-answer-choice-box-default-width: 612px; /* Fine-tuned by TM */
  --disctm-gf-answer-choice-box-right-margin: 0px; /* Fine-tuned by TM */
  --disctm-gf-answer-choice-box-bottom-margin: 8px; /* Fine-tuned by TM */
  --disctm-gf-answer-choice-box-top-bottom-padding: 12px; /* Fine-tuned by TM */
  --disctm-gf-answer-choice-box-left-right-padding: 12px; /* Fine-tuned by TM */
  --disctm-gf-answer-choice-box-border-radius: 14px; /* Fine-tuned by TM */

  /* Idle, Hover, and Active of Answer Choice Boxes */
  --disctm-gf-answer-choice-box-bg-idle: rgba(255, 255, 255, 0.79);
  --disctm-gf-answer-choice-box-bg-hover: rgba(255, 255, 255, 1);
  --disctm-gf-answer-choice-box-bg-active: rgba(255, 255, 255, 0.79);
  /* site.built.css has this: .webpush-notification__container {box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);} */
  --disctm-gf-answer-choice-box-box-shadow-idle: 0 0 5px rgba(0, 0, 0, 0.05);
  --disctm-gf-answer-choice-box-box-shadow-hover: 0 0 10px rgba(0, 0, 0, 0.1);
  --disctm-gf-answer-choice-box-box-shadow-active: 0 0 20px rgba(0, 0, 0, 0.2);
  --disctm-gf-answer-choice-box-scale-active: 1.03;

  /* Rank-aware drag handle icons */
  --disctm-gf-width-line-3-horizontal-icon: 26px; /* Fine-tuned by TM */
  --disctm-gf-color-line-3-horizontal-icon: var(--disctm-color-primary-text, #1d1d1f);
  --disctm-gf-opacity-line-3-horizontal-icon-idle: 0.38;
  --disctm-gf-color-line-3-horizontal-icon-with-opacity: color-mix(in srgb, var(--disctm-gf-color-line-3-horizontal-icon) 38%, transparent);
  --disctm-gf-frosted-rail-width: 49px;
  --disctm-gf-frosted-rail-width-mobile: 40px;
  --disctm-gf-rank-handle-icon-width: 11.151px;
  --disctm-gf-rank-handle-icon-height: 18px;
  --disctm-gf-frosted-rail-divider-color: #d8e4f8;
  --disctm-gf-frosted-rail-bg: rgba(250, 250, 251, 0.79);
  --disctm-gf-frosted-rail-bg-hover: rgba(250, 250, 251, 1);
  --disctm-gf-frosted-rail-text-gap: var(--disctm-gf-answer-choice-box-left-right-padding);
  --disctm-gf-rank-handle-icon-1: url("../svg/ellipsis.vertical.double.0.svg?v=202606121049");
  --disctm-gf-rank-handle-icon-2: url("../svg/dot.4.square.0.svg?v=202606121049");
  --disctm-gf-rank-handle-icon-3: url("../svg/dot.2.horizontal.0.svg?v=202606121049");
  --disctm-gf-rank-handle-icon-4: url("../svg/dot.empty.0.svg?v=202606121049");
  --disctm-gf-choice-rank-handle-icon: none;
  --disctm-gf-choice-rank-handle-icon-width: 0px;
  --disctm-gf-choice-rank-handle-icon-height: 0px;

  /* ChatGPT 5.2 Pro's Apple-like Transition Parameters */
  --disctm-motion-ease-out: cubic-bezier(0, 0, 0.58, 1);        /* Apple easeOut */
  --disctm-motion-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);  /* Apple easeInEaseOut */
  --disctm-motion-dur-press: 140ms;
  --disctm-motion-dur-hover: 180ms;
  --disctm-motion-dur-color: 180ms;
  --disctm-motion-dur-fade: 120ms;

  /* Mobile Progress Bar (Cyan Gradient idea) */
  --disctm-gf-mobile-progress-top-offset: 0px;
  --disctm-gf-mobile-progress-track-height: 6px;
  --disctm-gf-mobile-progress-right-overrun: calc(var(--disctm-gf-mobile-progress-track-height, 6px) / 2);
  --disctm-gf-mobile-progress-track-bg: var(--disctm-meter-track-gray-background-color, rgb(209, 209, 214));
  --disctm-gf-mobile-progress-fill-bg: linear-gradient(90deg, rgb(74, 217, 104) 0%, var(--disctm-color-s-green, #00b13f) 100%);
  --disctm-gf-mobile-progress-fill-speed: 1.35s;
  --disctm-gf-mobile-progress-fill-curve: cubic-bezier(0.22, 1, 0.36, 1);
}

body .adisc-disc-form-native [data-adisc-native-after-continue][hidden],
body .adisc-disc-form-native [data-adisc-native-after-continue="true"][hidden] {
  display: none !important;
}

/* Gravity Forms prints rank icon variables inline on shortcode pages after plugin CSS. */
body .adisc-test-form.gform-theme[data-form-index] {
  --gf-survey-icon-control-rank: none !important;
}

/*===========================
  MARGIN RESETTING & SETTING
  ===========================*/
body .adisc-test-form .gform_body .gform_fields .gfield {
  margin-top: 0;
  margin-bottom: var(--disctm-gf-field-bottom-margin);
}
body .adisc-test-form .gform_body .gform_fields .gfield .gfield_label,
body .adisc-test-form .gform_body .gform_fields .gfield .gfield_description {
  margin-top: 0;
  margin-bottom: var(--disctm-gf-field-label-bottom-margin);
}
body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank {  /* Don't use .gsurvey-rank-choice here--verified by TM */
  width: 100%; /* Must have this to not collapse to narrower widths--verified by TM */
  margin: 0; /* Margin reset verified by TM */
}
body .adisc-test-form .gform_body .gform_fields .disctm-gf-field--test-title.gfield {
  margin: 0;
}

body .adisc-test-form .disctm-gf-test-title-wrapper {
  --disctm-gf-test-title-wrapper-height: 220px;
  --disctm-gf-test-title-wrapper-mobile-height: 200px;
  --disctm-gf-test-title-mobile-title-line-1-font-weight: 250;
  --disctm-gf-test-title-mobile-title-line-2-font-size: 44px;
  --disctm-gf-test-title-mobile-title-line-2-font-weight: 750;
  --disctm-gf-test-title-mobile-gap-between-2-lines: 2px;
  --disctm-gf-test-title-orb-pos-x-1: 15%;
  --disctm-gf-test-title-orb-pos-x-2: 35%;
  --disctm-gf-test-title-orb-pos-x-3: 55%;
  --disctm-gf-test-title-orb-pos-x-4: 75%;
  --disctm-gf-test-title-orb-color-1: var(--disctm-color-i-yellow, #ffbe00);
  --disctm-gf-test-title-orb-color-2: var(--disctm-color-s-green, #00b13f);
  --disctm-gf-test-title-orb-color-3: var(--disctm-color-c-blue, #0376bb);
  --disctm-gf-test-title-orb-color-4: var(--disctm-color-d-red, #da251d);
  --disctm-gf-test-title-orb-diameter: min(360px, 50vw);
  --disctm-gf-test-title-orb-mobile-diameter: 50vw;
  --disctm-gf-test-title-orb-blur: 60px;
  --disctm-gf-test-title-orb-mobile-blur: 34px;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: var(--disctm-gf-test-title-wrapper-height);
}

body .adisc-test-form .disctm-gf-test-title-text {
  position: relative;
  margin-top: 0;
  margin-bottom: 20px;
  font-family: var(--disctm-font-family, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", system-ui, "Roboto", "Segoe UI", "Arial", sans-serif);
  font-size: 48px;
  line-height: 1.08349;
  font-weight: 600;
  letter-spacing: 0;
}

@media only screen and (max-width: 1068px) {
  body .adisc-test-form .disctm-gf-test-title-text {
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: 0;
  }
}

@media only screen and (max-width: 734px) {
  body .adisc-test-form .disctm-gf-test-title-text {
    font-size: 32px;
    line-height: 1.125;
    letter-spacing: 0;
  }
}

body .adisc-test-form .disctm-gf-test-title-mobile-text {
  display: none;
}

body .adisc-test-form .disctm-gf-test-title-orb {
  position: absolute;
  top: var(--disctm-gf-test-title-orb-distance-from-top, 50%);
  left: var(--disctm-gf-test-title-orb-distance-from-left, 50%);
  width: var(--disctm-gf-test-title-orb-diameter, 0px);
  height: var(--disctm-gf-test-title-orb-diameter, 0px);
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    color-mix(in srgb, var(--disctm-gf-test-title-orb-bg-color, transparent), transparent 85%),
    transparent
  );
  filter: blur(var(--disctm-gf-test-title-orb-blur));
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%);
}

body .adisc-test-form .disctm-gf-test-title-orb--1 {
  --disctm-gf-test-title-orb-bg-color: var(--disctm-gf-test-title-orb-color-1, #ffbe00);
  --disctm-gf-test-title-orb-distance-from-top: 33%;
  --disctm-gf-test-title-orb-distance-from-left: var(--disctm-gf-test-title-orb-pos-x-1, 15%);
}

body .adisc-test-form .disctm-gf-test-title-orb--2 {
  --disctm-gf-test-title-orb-bg-color: var(--disctm-gf-test-title-orb-color-2, #00b13f);
  --disctm-gf-test-title-orb-distance-from-top: 67%;
  --disctm-gf-test-title-orb-distance-from-left: var(--disctm-gf-test-title-orb-pos-x-2, 35%);
}

body .adisc-test-form .disctm-gf-test-title-orb--3 {
  --disctm-gf-test-title-orb-bg-color: var(--disctm-gf-test-title-orb-color-3, #0376bb);
  --disctm-gf-test-title-orb-distance-from-top: 33%;
  --disctm-gf-test-title-orb-distance-from-left: var(--disctm-gf-test-title-orb-pos-x-3, 55%);
}

body .adisc-test-form .disctm-gf-test-title-orb--4 {
  --disctm-gf-test-title-orb-bg-color: var(--disctm-gf-test-title-orb-color-4, #da251d);
  --disctm-gf-test-title-orb-distance-from-top: 67%;
  --disctm-gf-test-title-orb-distance-from-left: var(--disctm-gf-test-title-orb-pos-x-4, 75%);
}

@media only screen and (max-width: 734px) {
  body .adisc-test-form .disctm-gf-test-title-wrapper {
    --disctm-gf-test-title-wrapper-height: var(--disctm-gf-test-title-wrapper-mobile-height);
    --disctm-gf-test-title-orb-diameter: var(--disctm-gf-test-title-orb-mobile-diameter, 0px);
    --disctm-gf-test-title-orb-blur: var(--disctm-gf-test-title-orb-mobile-blur);
    --disctm-gf-test-title-orb-pos-x-1: 15%;
    --disctm-gf-test-title-orb-pos-x-2: 35%;
    --disctm-gf-test-title-orb-pos-x-3: 55%;
    --disctm-gf-test-title-orb-pos-x-4: 75%;
  }

  body .adisc-test-form .disctm-gf-test-title-desktop-text {
    display: none;
  }

  body .adisc-test-form .disctm-gf-test-title-mobile-text {
    display: flex;
    flex-direction: column;
    gap: var(--disctm-gf-test-title-mobile-gap-between-2-lines, 2px);
  }

  body .adisc-test-form .disctm-gf-test-title-mobile-text span:first-child {
    font-weight: var(--disctm-gf-test-title-mobile-title-line-1-font-weight, 300);
  }

  body .adisc-test-form .disctm-gf-test-title-mobile-text span:last-child {
    font-size: var(--disctm-gf-test-title-mobile-title-line-2-font-size);
    font-weight: var(--disctm-gf-test-title-mobile-title-line-2-font-weight, 800);
  }
}
/* Gap between Question 1's and Gender's label and their description */
body .adisc-test-form .gform_body .gform_fields .disctm-gf-field--question-1.gfield .gfield_label,
body .adisc-test-form .gform_body .gform_fields .disctm-gf-field--gender.gfield .gfield_label {
  margin-bottom: 0.62rem;
}
/* Gap between Question 1 and the Time Expected instruction */
/* Also gap between the Time Expected instruction and the Continue button */
body .adisc-test-form .gform_body .gform_fields .disctm-gf-field--question-1.gfield,
body .adisc-test-form .gform_body .gform_fields .disctm-gf-field--time-expected.gfield {
  margin-bottom: var(--disctm-gf-field-smaller-bottom-margin, 3rem);
}
body .adisc-test-form #disctm-gf-test-continue-button,
body .adisc-test-form .gform_footer :is(button[type="submit"], input[type="submit"]) {
  min-width: 124px;
  margin-top: 0;
}
body .adisc-test-form #disctm-gf-test-continue-button {
  margin-bottom: var(--disctm-gf-field-smaller-bottom-margin, 3rem);
}
body .adisc-test-form .gform_footer :is(button[type="submit"], input[type="submit"]) {
  margin-bottom: 8rem; /* Submit button has larger bottom margin on non-Mobile */
}
body #gform_wrapper_2.adisc-test-form .gform_footer :is(button[type="submit"], input[type="submit"]),
body #gform_wrapper_10.adisc-test-form .gform_footer :is(button[type="submit"], input[type="submit"]),
body #gform_wrapper_1000.adisc-test-form .gform_footer :is(button[type="submit"], input[type="submit"]) {
  margin-bottom: 8rem;
}
body .adisc-test-form.disctm-gate-first-unticked .gform_footer :is(button[type="submit"], input[type="submit"]) {
  display: none !important;
}
@media only screen and (max-width: 734px) {
  body .adisc-test-form .gform_footer :is(button[type="submit"], input[type="submit"]) {
    margin-bottom: 5rem;
  }

  body #gform_wrapper_2.adisc-test-form .gform_footer :is(button[type="submit"], input[type="submit"]),
  body #gform_wrapper_10.adisc-test-form .gform_footer :is(button[type="submit"], input[type="submit"]),
  body #gform_wrapper_1000.adisc-test-form .gform_footer :is(button[type="submit"], input[type="submit"]) {
    margin-bottom: 5rem;
  }
}
body .adisc-test-form .gform_body .gform_fields .disctm-gf-field--question-24.gfield, /* Last question: Question 24 */
body .adisc-test-form .gform_body .gform_fields .disctm-gf-field--user-name.gfield { /* User's Name input field */
  margin-bottom: var(--disctm-gf-field-smaller-bottom-margin, 3rem);
}

/* Hides GF's character counter: 'x of 32 max characters' */
body .adisc-test-form .gform_body .gform_fields .gfield .ginput_container .ginput_counter {
  display: none;
}

/* Light Text class in various fields */
body .adisc-test-form .gform_body .gform_fields .disctm-gf-light-text {
  font-weight: var(--disctm-gf-font-weight-light-text);
}
body .adisc-test-form .gform_body .gform_fields .gfield .gfield_label em {
  font-style: italic;
}

body .adisc-test-form .gform_body .gform_fields .gfield .gfield_description .disctm-gf-inline-drag-icon-cluster {
  white-space: nowrap;
}

body .adisc-test-form .gform_body .gform_fields .gfield .gfield_description .disctm-gf-inline-drag-icon {
  display: inline-block;
  width: 8.674px;
  height: 14px;
  margin: 0 0.08em 0 0.18em;
  color: inherit;
  background-color: currentColor;
  -webkit-mask-image: url("../svg/ellipsis.vertical.double.0.svg?v=202606121047");
  mask-image: url("../svg/ellipsis.vertical.double.0.svg?v=202606121047");
  -webkit-mask-size: 8.674px 14px;
  mask-size: 8.674px 14px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: baseline;
}

body .adisc-test-form .gform_body .gform_fields .disctm-gf-field--user-name.gfield .disctm-gf-light-text {
  color: var(--disctm-color-gray-secondary-text, #6e6e73);
}

body .adisc-test-form .disctm-gf-field--gender input[type="radio"] {
  cursor: pointer;
}

body .adisc-test-form .disctm-gf-field--gender .gchoice {
  display: inline-flex;
  align-items: center;
  column-gap: 6px;
}

body .adisc-test-form .disctm-gf-field--gender input[type="radio"].gfield-choice-input {
  margin-top: 0;
  margin-bottom: 0;
  align-self: center;
}

body .adisc-test-form .disctm-gf-field--gender .gform-field-label--type-inline,
body .adisc-test-form .disctm-gf-field--gender .disctm-gf-gender-clear-button {
  font-size: inherit;
}

body .adisc-test-form .disctm-gf-field--gender .disctm-gf-gender-clear-button {
  display: inline-block;
  margin-top: 0.65rem;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--disctm-color-blue-elliptic-button-bg-idle, #0071e3);
  font-family: inherit;
  line-height: inherit;
  box-shadow: none;
  text-decoration: none;
  text-underline-offset: 0.16em;
  cursor: pointer;
}

body .adisc-test-form .disctm-gf-field--gender .disctm-gf-gender-clear-button:focus,
body .adisc-test-form .disctm-gf-field--gender .disctm-gf-gender-clear-button:focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}

body .adisc-test-form .disctm-gf-field--gender .disctm-gf-gender-clear-button:active {
  color: var(--disctm-color-blue-elliptic-button-bg-idle, #0071e3);
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
  body .adisc-test-form .disctm-gf-field--gender .disctm-gf-gender-clear-button:hover {
    color: var(--disctm-color-blue-elliptic-button-bg-idle, #0071e3);
    text-decoration: underline;
  }
}

body .adisc-test-form .disctm-gf-field--gender .disctm-gf-gender-clear-button[hidden] {
  display: none !important;
}

@media only screen and (max-width: 734px) {
  body .adisc-test-form .disctm-gf-field--gender .disctm-gf-gender-clear-button:active {
    text-decoration: none;
  }

  body .adisc-test-form .disctm-gf-field--gender .gform-field-label--type-inline {
    cursor: pointer;
  }
}

/* --- Answer Choice Boxes and User's Name Input Box --- */
body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice,
body .adisc-test-form .gform_body .gform_fields .gfield input[type="text"] {
  width: min(calc(100% - var(--disctm-gf-answer-choice-box-right-margin)), var(--disctm-gf-answer-choice-box-default-width));
  min-height: 42px; /* Fine-tuned by TM */
  margin: 0 0 var(--disctm-gf-answer-choice-box-bottom-margin); /* 3 values: top right-left bottom */ 
  padding: var(--disctm-gf-answer-choice-box-top-bottom-padding) var(--disctm-gf-answer-choice-box-left-right-padding);
  border: none; /* Hides GF's default, ugly border */
  border-radius: var(--disctm-gf-answer-choice-box-border-radius, 14px); /* Fine-tuned by TM */
  background-color: var(--disctm-gf-answer-choice-box-bg-idle);
  box-shadow: var(--disctm-gf-answer-choice-box-box-shadow-idle);
}

body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice {
  position: relative; /* Necessary for three-line icon to stay inside */
  /* Desktop: reserve text space for the left drag handle only. */
  padding-left: calc(48px + var(--disctm-gf-answer-choice-box-left-right-padding));
  padding-right: var(--disctm-gf-answer-choice-box-left-right-padding);
  background-image: none !important;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--disctm-motion-dur-press) var(--disctm-motion-ease-out),
    box-shadow var(--disctm-motion-dur-hover) var(--disctm-motion-ease-out),
    background-color var(--disctm-motion-dur-color) var(--disctm-motion-ease-out),
    -webkit-backdrop-filter var(--disctm-motion-dur-hover) var(--disctm-motion-ease-out),
    backdrop-filter var(--disctm-motion-dur-hover) var(--disctm-motion-ease-out);
}

body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice .disctm-gf-choice-text {
  position: relative;
  z-index: 2;
  display: block;
}

body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice .disctm-gf-choice-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: inline-flex;
  width: 48px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  background: var(--disctm-gf-frosted-rail-bg);
  pointer-events: none;
}

body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice .disctm-gf-choice-handle span {
  display: none;
}

body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice[data-index="1"] {
  --disctm-gf-choice-rank-handle-icon: var(--disctm-gf-rank-handle-icon-1);
  --disctm-gf-choice-rank-handle-icon-width: var(--disctm-gf-rank-handle-icon-width);
  --disctm-gf-choice-rank-handle-icon-height: var(--disctm-gf-rank-handle-icon-height);
}

body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice[data-index="2"] {
  --disctm-gf-choice-rank-handle-icon: var(--disctm-gf-rank-handle-icon-2);
  --disctm-gf-choice-rank-handle-icon-width: var(--disctm-gf-rank-handle-icon-width);
  --disctm-gf-choice-rank-handle-icon-height: var(--disctm-gf-rank-handle-icon-height);
}

body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice[data-index="3"] {
  --disctm-gf-choice-rank-handle-icon: var(--disctm-gf-rank-handle-icon-3);
  --disctm-gf-choice-rank-handle-icon-width: var(--disctm-gf-rank-handle-icon-width);
  --disctm-gf-choice-rank-handle-icon-height: var(--disctm-gf-rank-handle-icon-height);
}

body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice[data-index="4"] {
  --disctm-gf-choice-rank-handle-icon: var(--disctm-gf-rank-handle-icon-4);
  --disctm-gf-choice-rank-handle-icon-width: var(--disctm-gf-rank-handle-icon-width);
  --disctm-gf-choice-rank-handle-icon-height: var(--disctm-gf-rank-handle-icon-height);
}

body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice .disctm-gf-choice-handle::after {
  content: "";
  display: block;
  width: var(--disctm-gf-choice-rank-handle-icon-width);
  height: var(--disctm-gf-choice-rank-handle-icon-height);
  background-image: var(--disctm-gf-choice-rank-handle-icon);
  overflow: hidden;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: var(--disctm-gf-choice-rank-handle-icon-width) var(--disctm-gf-choice-rank-handle-icon-height) !important;
  pointer-events: none;
}

body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice .disctm-gf-choice-handle--left {
  left: 0;
  border-right: 1px solid rgb(235, 235, 239);
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice .disctm-gf-choice-handle--right {
  right: 0;
  display: none;
  border-left: 1px solid rgb(235, 235, 239);
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}

body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice.ui-sortable-helper {
  transition: none !important;   /* No transition to improve cursor tracking responsiveness with dragged choice */
  will-change: top, transform, box-shadow, -webkit-backdrop-filter, backdrop-filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice.ui-sortable-placeholder {
  visibility: hidden !important;
  opacity: 0 !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  will-change: auto;
}

body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank.disctm-gf-sort-active .gsurvey-rank-choice.ui-sortable-helper {
  isolation: isolate;
}

body .adisc-disc-form-native .gsurvey-rank .gsurvey-rank-choice.adisc-native-rank-source {
  visibility: hidden !important;
}

body .adisc-disc-form-native .gsurvey-rank .gsurvey-rank-choice.adisc-native-rank-helper {
  margin: 0 !important;
  transition: none !important;
  will-change: top, left, transform, box-shadow, -webkit-backdrop-filter, backdrop-filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  touch-action: none;
}

body.adisc-native-rank-dragging-body {
  -webkit-user-select: none;
  user-select: none;
}

body.adisc-native-rank-dragging-body .adisc-disc-form-native .gsurvey-rank,
body.adisc-native-rank-dragging-body .adisc-disc-form-native .gsurvey-rank .gsurvey-rank-choice {
  cursor: grabbing;
  touch-action: none;
}

/* '@media (hover: hover)' excludes touchscreen devices from targets */
@media (hover: hover) and (pointer: fine) {
  body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank:not(.disctm-gf-intent-mode-touch) .gsurvey-rank-choice:hover {
    background-color: var(--disctm-gf-answer-choice-box-bg-hover);
    box-shadow: var(--disctm-gf-answer-choice-box-box-shadow-hover);
  }

  body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank:not(.disctm-gf-intent-mode-touch) .gsurvey-rank-choice:hover::after,
  body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank:not(.disctm-gf-intent-mode-touch) .gsurvey-rank-choice:hover::before {
    background: var(--disctm-gf-frosted-rail-bg-hover);
  }

  body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank:not(.disctm-gf-intent-mode-touch) .gsurvey-rank-choice:hover .disctm-gf-choice-handle {
    background: var(--disctm-gf-frosted-rail-bg-hover);
  }
}

body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice:not(.disctm-prevent-active):active,
/* Next 2 lines, including '!important', are required to ensure GF's jQuery UI Sortable library
doesn't change cursor to 'move' on Firefox and Chrome */
body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice.ui-sortable-helper {
  background-color: var(--disctm-gf-answer-choice-box-bg-active);
  box-shadow: var(--disctm-gf-answer-choice-box-box-shadow-active);
  -webkit-backdrop-filter: blur(2px); /* Fine-tuned by TM */
  backdrop-filter: blur(2px); /* Fine-tuned by TM */
  cursor: grabbing !important;
  transform: scale(var(--disctm-gf-answer-choice-box-scale-active));
}

/* Mobile-only fix: prevent press/hold scroll from showing lift effects unless truly dragging */
@media only screen and (max-width: 734px) {
  body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice.disctm-touch-handle-active:not(.ui-sortable-helper) {
    background-color: var(--disctm-gf-answer-choice-box-bg-active);
    box-shadow: var(--disctm-gf-answer-choice-box-box-shadow-active);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    cursor: grabbing !important;
    transform: scale(var(--disctm-gf-answer-choice-box-scale-active));
  }

  body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice:not(.ui-sortable-helper):not(.disctm-touch-handle-active):active {
    background-color: var(--disctm-gf-answer-choice-box-bg-idle);
    box-shadow: var(--disctm-gf-answer-choice-box-box-shadow-idle);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    cursor: grab !important;
    transform: none;
  }
}

.adisc-test-form .gsurvey-rank .gsurvey-rank-choice::after {
  content: none !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--disctm-gf-frosted-rail-width);
  border-left: 1px solid rgb(235, 235, 239);
  background: var(--disctm-gf-frosted-rail-bg);
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  pointer-events: none; /* So the user clicks through, not on, the icon */
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateY(0);
  transition:
    opacity var(--disctm-motion-dur-hover) var(--disctm-motion-ease-out),
    transform var(--disctm-motion-dur-press) var(--disctm-motion-ease-out);
}

.adisc-test-form .gsurvey-rank .gsurvey-rank-choice::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 48px;
  border-right: 1px solid rgb(235, 235, 239);
  background: var(--disctm-gf-frosted-rail-bg);
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  pointer-events: none;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateY(0);
  transition:
    opacity var(--disctm-motion-dur-hover) var(--disctm-motion-ease-out),
    transform var(--disctm-motion-dur-press) var(--disctm-motion-ease-out);
}

@media only screen and (max-width: 734px) {
  body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice {
    padding-left: 16px !important;
    padding-right: calc(var(--disctm-gf-frosted-rail-width-mobile) + 10px) !important;
  }

  body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice .disctm-gf-choice-handle {
    width: var(--disctm-gf-frosted-rail-width-mobile);
  }

  body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice .disctm-gf-choice-handle--left {
    display: none;
  }

  body .adisc-test-form .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice .disctm-gf-choice-handle--right {
    display: inline-flex;
  }

  .adisc-test-form .gsurvey-rank .gsurvey-rank-choice::after {
    content: "" !important;
    width: var(--disctm-gf-frosted-rail-width-mobile);
    background: var(--disctm-gf-frosted-rail-bg);
  }

  .adisc-test-form .gsurvey-rank .gsurvey-rank-choice::before {
    content: none !important;
    width: 0;
    border-right: 0;
    background: none;
  }
}

body .adisc-test-form .gform_body .gform_fields .gfield input[type="text"] {
  margin-bottom: 0;
  transition:
    box-shadow var(--disctm-motion-dur-hover) var(--disctm-motion-ease-out),
    background-color var(--disctm-motion-dur-color) var(--disctm-motion-ease-out);
}

body .adisc-test-form .gform_footer button span {
  display: block; /* Allows 'Submit' text to zoom out before it fades out */
  transition:
    opacity var(--disctm-motion-dur-fade) linear,
    transform var(--disctm-motion-dur-press) var(--disctm-motion-ease-out);
}

body .adisc-test-form .gform_footer button.disctm-gf-button-loading {
  pointer-events: none;
}

body .adisc-test-form .gform_footer button.disctm-gf-button-loading span {
  opacity: 0;
  transform: scale(0.62);
}

body .adisc-test-form .gform_footer .disctm-button-loading-spinner {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  width: 24px; height: 24px;
  margin-left: -12px; margin-top: -12px;
  border-radius: 50%;
  background: conic-gradient(rgba(255, 255, 255, 0), white);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff 0);
  opacity: 0;
  transition: opacity var(--disctm-motion-dur-fade) linear;
  animation: disctm-gf-button-spin 1s linear infinite;
  animation-play-state: paused;
}
@keyframes disctm-gf-button-spin { 100% { transform: rotate(360deg); } }

body .adisc-test-form .gform_footer button.disctm-gf-button-loading .disctm-button-loading-spinner {
  opacity: 1; /* Make spinner appear on click */
  animation-play-state: running;
}

body.disctm-gf-full-test-display-mode :is(.site-footer, .elementor-location-footer),
body:not(.elementor-page):has(.adisc-test-form) :is(.site-footer, .elementor-location-footer) {
  display: none !important;
}

body.disctm-gf-submitting-lock .adisc-test-form {
  pointer-events: none !important;
}

/* --- Mobile full-width progress bar under sticky header --- */
body .adisc-test-form .disctm-gf-mobile-progress-shell {
  display: none;
}

@media only screen and (max-width: 734px) {
  body .adisc-test-form .disctm-gf-mobile-progress-shell {
    display: block;
    position: fixed;
    top: var(--disctm-gf-mobile-progress-top-offset, 0px);
    left: 0;
    right: auto;
    z-index: 35;
    width: calc(100vw + var(--disctm-gf-mobile-progress-right-overrun, 6px));
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  body .adisc-test-form .disctm-gf-mobile-progress-shell.disctm-gf-mobile-progress-hidden {
    display: none !important;
  }

  body .adisc-test-form .disctm-gf-mobile-progress-track {
    width: 100%;
    margin: 0;
    padding: 0;
    height: var(--disctm-gf-mobile-progress-track-height, 6px);
    overflow: hidden;
    border: none;
    border-radius: 0 999px 999px 0; /* left side must be vertical */
    background-color: rgba(229, 229, 234, 0.38);
    background-color: color-mix(in srgb, var(--disctm-color-ios-system-gray-5-default-light, rgb(229, 229, 234)) 38%, transparent);
    background-color: color-mix(in srgb, var(--disctm-gf-mobile-progress-track-bg, var(--disctm-meter-track-gray-background-color, rgb(209, 209, 214))) 38%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    transition: border-radius 160ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body .adisc-test-form .disctm-gf-mobile-progress-fill {
    width: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    border-radius: 0 999px 999px 0; /* integrated circular head */
    background: var(--disctm-gf-mobile-progress-fill-bg);
    opacity: 1;
    will-change: width;
    transition: background-color 0.2s linear;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .adisc-test-form .disctm-gf-mobile-progress-fill {
    transition: none;
  }
}

/* GF UI/UX ↑↑↑
  =========================================================
  =========================================================
  =========================================================
  =========================================================
  =========================================================
  ↓↓↓ GF Test Instructions */

.disctm-gf-test-instructions-wrapper {
  --disctm-gf-test-instructions-bullet-point-diameter: 5px;
  width: min(var(--disctm-gf-answer-choice-box-default-width, 612px),
    100% - calc(var(--disctm-gf-answer-choice-box-right-margin, 40px)/2));
}

.disctm-gf-test-instructions-card {
  margin-bottom: 3rem; /* Gap between two cards; fine-tuned by TM */
  overflow: hidden; /* Required to have border-radius */
  border-radius: var(--disctm-gf-answer-choice-box-border-radius, 14px);
  background-color: white; /* Required--verified by TM */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.disctm-gf-header-of-test-instructions-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--disctm-gf-answer-choice-box-top-bottom-padding, 12px) 18px;
  color: white;
}

.disctm-gf-header-of-test-instructions-card.disctm-gf-test-instructions-card-header-icon-only {
  justify-content: flex-start;
}

.disctm-gf-blue-header-of-test-instructions-card {
  background: linear-gradient(180deg, #3f94ea 0%, var(--disctm-color-blue-elliptic-button-bg-idle, #0071e3) 100%); /* Alternative: #3f98cd 0%, #0375bb 100% */
}

.disctm-gf-green-header-of-test-instructions-card {
  background: linear-gradient(180deg, #3fc46e 0%, var(--disctm-color-s-green, #00b13f) 100%);
}

.disctm-gf-red-header-of-test-instructions-card {
  background: linear-gradient(180deg, #f14e47 0%, var(--disctm-color-d-red, #da251d) 100%);
}

.disctm-gf-yellow-header-of-test-instructions-card {
  background: linear-gradient(180deg, #ffd456 0%, var(--disctm-color-i-yellow, #ffbe00) 100%);
}

/* .typography-eyebrow-reduced (h6): lines 3759-3858 in main.built.css */
.disctm-gf-test-instructions-card-header-title {
  font-size: 21px;
  line-height: 1.19048;
  font-weight: 600;
  letter-spacing: 0.011em;
}

.disctm-gf-test-instructions-card-header-icon {
  width: auto;
  height: 22px;
  fill: white;
}

.disctm-gf-yellow-header-of-test-instructions-card .disctm-gf-test-instructions-card-header-icon {
  width: auto;
  height: 24px;
}

@media only screen and (max-width: 734px) {
  .disctm-gf-test-instructions-card-header-title {
    font-size: 19px;
    line-height: 1.21053;
    letter-spacing: 0.012em;
  }

  .disctm-gf-test-instructions-card-header-icon {
    width: auto;
    height: 20px;
  }

}

.disctm-gf-test-instructions-card-body {
  padding: var(--disctm-gf-answer-choice-box-top-bottom-padding, 12px) 18px;
}

.disctm-gf-test-instructions-item {
  display: flex;
  align-items: flex-start;
  gap: var(--disctm-gf-answer-choice-box-top-bottom-padding, 12px); /* Gap between bullet point and text */
  margin-bottom: var(--disctm-gf-answer-choice-box-left-right-padding, 16px);
}

.disctm-gf-test-instructions-item:last-child {
  margin-bottom: 0; /* We already have padding-bottom of parent */
}

.disctm-gf-test-instructions-bullet {
  flex-shrink: 0; /* So bullet point doesn't shrink on Mobile--verified by TM */
  width: var(--disctm-gf-test-instructions-bullet-point-diameter);
  height: var(--disctm-gf-test-instructions-bullet-point-diameter);
  margin-top: calc(
    (1.4705882353em - var(--disctm-gf-test-instructions-bullet-point-diameter)) / 2
  );
  border-radius: 50%;
  background-color: var(--disctm-color-ios-system-gray-2-default-light, rgb(174, 174, 178));
}

.disctm-gf-test-instructions-bullet--hidden {
  display: none;
}

.disctm-color-ios-system-gray-2-default-light-text {
  color: var(--disctm-color-ios-system-gray-2-default-light, rgb(174, 174, 178));
}

.disctm-color-gray-secondary-text {
  color: var(--disctm-color-gray-secondary-text, #6e6e73);
}
