/* Match the Elementor /test/ content frame on Elementor-free clones. */
body:not(.elementor-page) :is(#gform_wrapper_10, #gform_wrapper_14) {
  box-sizing: border-box;
  width: 816px;
  max-width: none;
  margin-top: -34px;
  margin-right: 0;
  margin-left: 0;
}

body:not(.elementor-page) :is(#gform_wrapper_10, #gform_wrapper_14) .gsurvey-rank {
  padding-left: 0;
  padding-inline-start: 0;
}

body :is(#gform_wrapper_10, #gform_wrapper_14) {
  /* 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;

  /* 3-horizontal-line Icon */
  --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: 32px;
  --disctm-gf-frosted-rail-icon-size: 24px 24px;
  --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-handle-icon-svg-url-desktop: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cy='6.5' cx='12' r='1.5'/%3E%3Ccircle cy='12.5' cx='12' r='1.5'/%3E%3Ccircle cy='18.5' cx='12' r='1.5'/%3E%3C/svg%3E");
  --disctm-gf-handle-icon-svg-url: var(--disctm-gf-handle-icon-svg-url-desktop);
  --disctm-gf-handle-icon-svg-url-mobile: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cy='6.5' cx='12' r='1.5'/%3E%3Ccircle cy='12.5' cx='12' r='1.5'/%3E%3Ccircle cy='18.5' cx='12' r='1.5'/%3E%3C/svg%3E");

  /* 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);
}

/*===========================
  MARGIN RESETTING & SETTING
  ===========================*/
body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields .gfield {
  margin-top: 0;
  margin-bottom: var(--disctm-gf-field-bottom-margin);
}
body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields .gfield .gfield_label,
body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields .gfield .gfield_description {
  margin-top: 0;
  margin-bottom: var(--disctm-gf-field-label-bottom-margin);
}
body :is(#gform_wrapper_10, #gform_wrapper_14) .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 */
}
/* :is(#field_10_1, #field_14_1).gfield = Test Title wrapper--'Trắc nghiệm tính cách DISC' */
body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields  :is(#field_10_1, #field_14_1).gfield {
  margin: 0;
}
/* Gap between Question 1's, 17's, and Gender's label and their description */
body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields :is(#field_10_17, #field_14_17).gfield .gfield_label,
body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields :is(#field_10_34, #field_14_34).gfield .gfield_label,
body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields :is(#field_10_88, #field_14_88).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 :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields :is(#field_10_17, #field_14_17).gfield,
body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields :is(#field_10_87, #field_14_87).gfield {
  margin-bottom: var(--disctm-gf-field-smaller-bottom-margin, 3rem);
}
body :is(#gform_wrapper_10, #gform_wrapper_14) #disctm-gf-test-continue-button,
body :is(#gform_wrapper_10, #gform_wrapper_14) :is(#gform_submit_button_10, #gform_submit_button_14) {
  min-width: 124px;
  margin-top: 0;
}
body :is(#gform_wrapper_10, #gform_wrapper_14) #disctm-gf-test-continue-button {
  margin-bottom: var(--disctm-gf-field-smaller-bottom-margin, 3rem);
}
body :is(#gform_wrapper_10, #gform_wrapper_14) :is(#gform_submit_button_10, #gform_submit_button_14) {
  margin-bottom: 8rem; /* Submit button has larger bottom margin on non-Mobile */
}
body :is(#gform_wrapper_10, #gform_wrapper_14).disctm-gate-85-first-unticked :is(
  #gform_submit_button_10,
  #gform_submit_button_14,
  .gform_footer button[type="submit"],
  .gform_footer input[type="submit"]
) {
  display: none !important;
}
@media only screen and (max-width: 734px) {
  body :is(#gform_wrapper_10, #gform_wrapper_14) :is(#gform_submit_button_10, #gform_submit_button_14) {
    margin-bottom: 4rem;
  }
}
body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields :is(#field_10_40, #field_14_40).gfield, /* Last question: Question 24 */
body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields :is(#field_10_55, #field_14_55).gfield { /* User's Name input field: 'Họ tên (không bắt buộc)' */
  margin-bottom: var(--disctm-gf-field-smaller-bottom-margin, 3rem);
}

/* Hides GF's character counter: 'x of 32 max characters' */
body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields .gfield .ginput_container .ginput_counter {
  display: none;
}

/* Light Text class in various fields */
body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields .disctm-gf-light-text {
  font-weight: var(--disctm-gf-font-weight-light-text);
}
body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields :is(#field_10_55, #field_14_55).gfield .disctm-gf-light-text {
  color: var(--disctm-color-gray-secondary-text, #6e6e73);
}

body #gform_wrapper_10 #field_10_88 input[type="radio"] {
  cursor: pointer;
}

body #gform_wrapper_10 #field_10_88 .gchoice {
  display: inline-flex;
  align-items: center;
  column-gap: 6px;
}

body #gform_wrapper_10 #field_10_88 input[type="radio"].gfield-choice-input {
  margin-top: 0;
  margin-bottom: 0;
  align-self: center;
}

body #gform_wrapper_10 #field_10_88 .gform-field-label--type-inline,
body #gform_wrapper_10 #field_10_88 .disctm-gf-gender-clear-button {
  font-size: inherit;
}

body #gform_wrapper_10 #field_10_88 .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 #gform_wrapper_10 #field_10_88 .disctm-gf-gender-clear-button:focus,
body #gform_wrapper_10 #field_10_88 .disctm-gf-gender-clear-button:focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}

body #gform_wrapper_10 #field_10_88 .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 #gform_wrapper_10 #field_10_88 .disctm-gf-gender-clear-button:hover {
    color: var(--disctm-color-blue-elliptic-button-bg-idle, #0071e3);
    text-decoration: underline;
  }
}

body #gform_wrapper_10 #field_10_88 .disctm-gf-gender-clear-button[hidden] {
  display: none !important;
}

@media only screen and (max-width: 734px) {
  body #gform_wrapper_10 #field_10_88 .disctm-gf-gender-clear-button:active {
    text-decoration: none;
  }

  body #gform_wrapper_10 #field_10_88 .gform-field-label--type-inline {
    cursor: pointer;
  }
}

/* --- Answer Choice Boxes and User's Name Input Box --- */
body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice,
body :is(#gform_wrapper_10, #gform_wrapper_14) .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 :is(#gform_wrapper_10, #gform_wrapper_14) .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);
  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 :is(#gform_wrapper_10, #gform_wrapper_14) .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 :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice.ui-sortable-placeholder {
  will-change: height, margin;
}

body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields .gfield .gsurvey-rank.disctm-gf-sort-active .gsurvey-rank-choice.ui-sortable-helper {
  isolation: isolate;
}

/* '@media (hover: hover)' excludes touchscreen devices from targets */
@media (hover: hover) and (pointer: fine) {
  body :is(#gform_wrapper_10, #gform_wrapper_14) .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 :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields .gfield .gsurvey-rank:not(.disctm-gf-intent-mode-touch) .gsurvey-rank-choice:hover::after,
  body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields .gfield .gsurvey-rank:not(.disctm-gf-intent-mode-touch) .gsurvey-rank-choice:hover::before {
    background:
      radial-gradient(circle at center calc(50% - 6px), var(--disctm-gf-color-line-3-horizontal-icon-with-opacity) 0 1.5px, transparent 1.6px),
      radial-gradient(circle at center 50%, var(--disctm-gf-color-line-3-horizontal-icon-with-opacity) 0 1.5px, transparent 1.6px),
      radial-gradient(circle at center calc(50% + 6px), var(--disctm-gf-color-line-3-horizontal-icon-with-opacity) 0 1.5px, transparent 1.6px),
      var(--disctm-gf-frosted-rail-bg-hover);
  }
}

body :is(#gform_wrapper_10, #gform_wrapper_14) .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 :is(#gform_wrapper_10, #gform_wrapper_14) .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 :is(#gform_wrapper_10, #gform_wrapper_14) .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 :is(#gform_wrapper_10, #gform_wrapper_14) .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;
  }
}

:is(#gform_wrapper_10, #gform_wrapper_14) .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:
    radial-gradient(circle at center calc(50% - 6px), var(--disctm-gf-color-line-3-horizontal-icon-with-opacity) 0 1.5px, transparent 1.6px),
    radial-gradient(circle at center 50%, var(--disctm-gf-color-line-3-horizontal-icon-with-opacity) 0 1.5px, transparent 1.6px),
    radial-gradient(circle at center calc(50% + 6px), var(--disctm-gf-color-line-3-horizontal-icon-with-opacity) 0 1.5px, transparent 1.6px),
    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);
}

:is(#gform_wrapper_10, #gform_wrapper_14) .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:
    radial-gradient(circle at center calc(50% - 6px), var(--disctm-gf-color-line-3-horizontal-icon-with-opacity) 0 1.5px, transparent 1.6px),
    radial-gradient(circle at center 50%, var(--disctm-gf-color-line-3-horizontal-icon-with-opacity) 0 1.5px, transparent 1.6px),
    radial-gradient(circle at center calc(50% + 6px), var(--disctm-gf-color-line-3-horizontal-icon-with-opacity) 0 1.5px, transparent 1.6px),
    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 :is(#gform_wrapper_10, #gform_wrapper_14) .gform_body .gform_fields .gfield .gsurvey-rank .gsurvey-rank-choice {
    padding-left: calc(var(--disctm-gf-frosted-rail-width-mobile) + 10px) !important;
    padding-right: calc(var(--disctm-gf-frosted-rail-width-mobile) + 10px) !important;
  }

  :is(#gform_wrapper_10, #gform_wrapper_14) .gsurvey-rank .gsurvey-rank-choice::after {
    content: "" !important;
    width: var(--disctm-gf-frosted-rail-width-mobile);
    background:
      radial-gradient(circle at center calc(50% - 6px), var(--disctm-gf-color-line-3-horizontal-icon-with-opacity) 0 1.5px, transparent 1.6px),
      radial-gradient(circle at center 50%, var(--disctm-gf-color-line-3-horizontal-icon-with-opacity) 0 1.5px, transparent 1.6px),
      radial-gradient(circle at center calc(50% + 6px), var(--disctm-gf-color-line-3-horizontal-icon-with-opacity) 0 1.5px, transparent 1.6px),
      var(--disctm-gf-frosted-rail-bg);
  }

  :is(#gform_wrapper_10, #gform_wrapper_14) .gsurvey-rank .gsurvey-rank-choice::before {
    width: var(--disctm-gf-frosted-rail-width-mobile);
    background:
      radial-gradient(circle at center calc(50% - 6px), var(--disctm-gf-color-line-3-horizontal-icon-with-opacity) 0 1.5px, transparent 1.6px),
      radial-gradient(circle at center 50%, var(--disctm-gf-color-line-3-horizontal-icon-with-opacity) 0 1.5px, transparent 1.6px),
      radial-gradient(circle at center calc(50% + 6px), var(--disctm-gf-color-line-3-horizontal-icon-with-opacity) 0 1.5px, transparent 1.6px),
      var(--disctm-gf-frosted-rail-bg);
  }
}

body :is(#gform_wrapper_10, #gform_wrapper_14) .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 :is(#gform_wrapper_10, #gform_wrapper_14) .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 :is(#gform_wrapper_10, #gform_wrapper_14) .gform_footer button.disctm-gf-button-loading {
  pointer-events: none;
}

body :is(#gform_wrapper_10, #gform_wrapper_14) .gform_footer button.disctm-gf-button-loading span {
  opacity: 0;
  transform: scale(0.62);
}

body :is(#gform_wrapper_10, #gform_wrapper_14) .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 :is(#gform_wrapper_10, #gform_wrapper_14) .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 .site-footer {
    display: none;
}

body.disctm-gf-submitting-lock :is(#gform_wrapper_10, #gform_wrapper_14) {
  pointer-events: none !important;
}

/* --- Mobile full-width progress bar under sticky header --- */
body :is(#gform_wrapper_10, #gform_wrapper_14) .disctm-gf-mobile-progress-shell {
  display: none;
}

@media only screen and (max-width: 734px) {
  body :is(#gform_wrapper_10, #gform_wrapper_14) .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 :is(#gform_wrapper_10, #gform_wrapper_14) .disctm-gf-mobile-progress-shell.disctm-gf-mobile-progress-hidden {
    display: none !important;
  }

  body :is(#gform_wrapper_10, #gform_wrapper_14) .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 :is(#gform_wrapper_10, #gform_wrapper_14) .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 :is(#gform_wrapper_10, #gform_wrapper_14) .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-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);
}