/* Load Hubspot Form */

#self_assessment_placeholder::before {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#self_assessment_hubspot_form_inner_container {
  position: relative;
  min-height: var(--h);
}
#self_assessment_hubspot_form_inner_container.z-hs-form-loading > #self_assessment_placeholder {
  opacity: 0.5;
}
body {
  --spinner: url('data:image/svg+xml;utf8,<svg fill="black" viewBox="122 -918 718 838" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.1"><path d="M522-80v-82q34-5 66.5-18t61.5-34l56 58q-42 32-88 51.5T522-80Zm-80 0Q304-98 213-199.5T122-438q0-75 28.5-140.5t77-114q48.5-48.5 114-77T482-798h6l-62-62 56-58 160 160-160 160-56-56 64-64h-8q-117 0-198.5 81.5T202-438q0 104 68 182.5T442-162v82Zm322-134-58-56q21-29 34-61.5t18-66.5h82q-5 50-24.5 96T764-214Zm76-264h-82q-5-34-18-66.5T706-606l58-56q32 39 51 86t25 98Z"/></svg>');
}
#self_assessment_hubspot_form_inner_container.z-hs-form-loading > #self_assessment_placeholder::after {
  --size: 50px;
  --pos: calc( 50% - .5 * var(--size) );
  --start: rotate(-360deg);
  content: "";
  height: var(--size);
  width: var(--size);
  position: absolute;
  top: var(--pos);
  left: var(--pos);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center 15%;
  background-size: 70%;
  background-image: var(--spinner);
  transform: rotate(0deg);
  animation: loading-spinner 2.5s linear infinite;
}
@keyframes loading-spinner {
  0% {transform: var(--start);}
  100% {transform: rotate(0deg);}
}
#self_assessment_hubspot_form_inner_container.z-hs-form-loading #self_assessment_form {
  opacity: 0;
}

#self_assessment_hubspot_form_inner_container.z-hs-form-loaded:not(.z-hs-form-loading) > #self_assessment_placeholder {
  display: none;
}
#self_assessment_hubspot_form_inner_container.z-hs-form-loaded:not(.z-hs-form-loading) #self_assessment_form {
  opacity: 1;
}
[type="email"] {
  text-transform: lowercase;
}

/* Hubspot Form */

#self_assessment_form .hs-form-field {
  margin-top: 1.5rem;
}
#self_assessment_form .hs-form-field > label {
  margin-bottom: 4px !important;
}
#self_assessment_form label:has(+ legend + .input > input:placeholder-shown ) {
  color: var(--intro-form-label-color);
  font-weight: var(--intro-form-label-font-weight);
}
#self_assessment_form label:has(+ legend + .input > input:not( :placeholder-shown ) ) {
  color: var(--intro-form-label-set-color);
  font-weight: var(--intro-form-label-set-font-weight);
}
#self_assessment_form .hs-form-field:focus-within input.error {
  outline: 1px solid var(--color-error) !important;
}
.hs_company {
  margin-bottom: 0 !important;
}
#self_assessment_form ul.hs-error-msgs > li > label > a {
  color: white !important;
}
label.hs-error-msg {
  color: var(--color-error) !important;
}
#self_assessment_form .hs_submit {
  display: none;
}

/* Functionality */

.continue_to_questions {
  display: flex !important;
}
.hide_section {
  display: none !important;
}

/* Questions */

body.assessment-in-progress .z_assessment_container {
  background-color: var(--section-bg);
}
#begin_questions {
  width: 100% !important;
  position: relative;
}
.z_assessment_container {
  --heading-height: 80px;
  --gap: 1.5rem;
  --col-1-width: 260px;
  --sticky-y: calc( var(--menu-margin) + var(--heading-height) );
  --section-heading-min-height: 80px;
  --question-max-width: 650px;
}
#questions_header {
  width: 100%;
  z-index: 1;
  background-color: var(--nav-bg);
  position: fixed;
  top: var(--menu-margin);
  left: 0;
}
body.logged-in.admin-bar #questions_header {
  top: calc( var(--menu-margin) + var(--admin-bar-y-offset) );
}
#questions_header, #questions_header * {
  z-index: 11;
}
#nav_and_questions_outer_container {
  --side: calc( 0.5 * ( 100% - var(--container-width) ) );
  display: flex;
  justify-content: center;
  background-color: var(--section-bg);
}
#nav_and_questions_container {
  width: var(--container-width);
  display: flex;
  position: relative;
  z-index: 200;
}
#nav_and_questions_container::before {
  content: "";
  height: 100%;
  width: 100%;
  background-color: var(--nav-bg);
  position: absolute;
  top: 0;
  right: 100%;
  z-index: 200;
}
#heading_in_progress_container {
  background-color: var(--heading_in_progress_container-bg);
  width: 100%;
  height: var(--heading-height);
  z-index: 200;
  position: fixed;
  top: var(--menu-margin);
  left: 0;
}
#heading_in_progress_container::before {
  content: "";
  width: 50%;
  height: 100%;
  background-color: var(--nav-bg);
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}
body.logged-in.admin-bar #heading_in_progress_container {
  top: calc( var(--menu-margin) + var(--admin-bar-y-offset) );
}
#questions_header_inner_container {
  width: var(--container-width);
  margin: 0 auto;
  background-color: var(--heading_in_progress_container-bg);
  position: relative;
  display: flex;
  gap: var(--gap);
}
#section_nav_heading_container {
  width: var(--col-1-width);
  min-width: var(--col-1-width);
  background-color: var(--section_nav_heading_container-bg);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
#sections_heading {
  position: relative;
  font-size: 18px;
  width: 100%;
  margin-bottom: 0;
}
#assessment_title_container {
  width: calc( 100% - var(--col-1-width) );
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}
#questions_heading {
  width: calc( 100% - var(--gap) );
  min-height: var(--heading-height);
  font-size: 1.5rem;
  margin-bottom: 0;
  padding: 1rem 0;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#section_nav_container {
  width: var(--col-1-width);
  min-width: var(--col-1-width);
  background-color: var(--nav-bg);
  max-height: calc( 100vh - var(--sticky-y) );
  padding-bottom: 2.25rem;
  position: fixed;
  top: var(--sticky-y);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  overflow-x: hidden;
  overflow-y: auto;
}
body.assessment-over #section_nav_container {
  padding-bottom: 0 !important;
  position: static !important;
  max-height: unset !important;
}
body.assessment-over.logged-in.admin-bar #section_nav_container {
  top: calc( var(--sticky-y) + var(--admin-bar-y-offset) ) !important;
}
#section_nav_container, #section_nav_container * {
  z-index: 100;
}
#section_nav_container > nav {
  width: 100%;
  position: relative;
  display: flex;
  align-items: start;
  flex-direction: column;
}
#section_nav {
  width: var(--col-1-width);
  list-style: none;
  padding-inline-start: 0;
  padding: var(--gap) var(--gap) 0 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
body.logged-in.admin-bar #section_nav {
  margin-block-start: var(--admin-bar-y-offset);
}
#section_nav > li {
  --nav-icon-color: var(--nav-disabled-color);
  --nav-icon-color-off: var(--nav-bg);
  --icon-color: var(--nav-icon-color);
  --icon-border-color: var(--nav-disabled-color);
  --icon-size: 20px;
  --line-size: 2px;
  margin-bottom: 0;
  position: relative;
}
.section_nav_item {
  width: 100%;
  text-decoration: none;
  padding-left: calc( var(--icon-size) + var(--gap) );
  position: relative;
  display: block;
}
.section_nav_item:focus {
  text-decoration: underline;
}
.section_nav_item * {  
  pointer-events: none;
}
.section_nav_item.nav_active {
  position: relative;
}
.section_nav_item[data-status="off"],
  .section_nav_item[data-status="off"] ~ .question_count_container {
  color: var(--nav-disabled-color);
  cursor: default;
}
.section_nav_item .item_title {
  font-family: var(--brand-font-regular);
}
.section_nav_item.nav_active .item_title {
  font-family: var(--brand-font-bold) !important;
}
.section_nav_item[data-status="current"], 
  .section_nav_item[data-status="completed"], 
  .section_nav_item[data-status="current"] ~ .question_count_container,
  .section_nav_item[data-status="completed"] ~ .question_count_container {
  color: var(--nav-available-text-color);
}
.section_nav_item[data-status="off"], .section_nav_item[data-status="off"] ~ .question_count_container {
  --icon-color: var(--nav-icon-color-off);
}
.section_nav_item[data-status="current"]:not(.nav_active), .section_nav_item[data-status="current"]:not(.nav_active) ~ .question_count_container {
  --icon-color: var(--nav-bg);
  --icon-border-color: white;
}
.section_nav_item.nav_active[data-status="current"], .section_nav_item.nav_active[data-status="current"] ~ .question_count_container {
  --icon-color: var(--nav-icon-color-current);
  --icon-border-color: var(--nav-icon-color-current);
}
.section_nav_item[data-status="completed"], .section_nav_item[data-status="completed"] ~ .question_count_container {
  --icon-color: var(--nav-icon-color-completed);
  --icon-border-color: var(--nav-icon-color-completed);
}
.section_nav_item.nav_active[data-status="completed"], .section_nav_item.nav_active[data-status="completed"] ~ .question_count_container {
  --icon-color: var(--nav-icon-color-current);
  --icon-border-color: var(--nav-icon-color-current);
}
body.assessment-over .section_nav_item.nav_active[data-status="completed"], body.assessment-over .section_nav_item.nav_active[data-status="completed"] ~ .question_count_container {
  --icon-color: var(--nav-icon-color-completed) !important;
  --icon-border-color: var(--nav-icon-color-completed) !important;
}
.section_nav_item[data-status="off"] ~ .question_count_container > .question_count {
  background-color: var(--nav-question-count-off-bg-color);
  color: var(--nav-question-count-off-text-color);
}
.section_nav_item[data-status="current"] ~ .question_count_container > .question_count, .section_nav_item[data-status="completed"] ~ .question_count_container > .question_count {
  background-color: var(--nav-question-count-bg-color);
}

.section_nav_item.nav_active ~ .question_count_container > .question_count, .section_nav_item.nav_active ~ .question_count_container > .question_count {
  background-color: var(--nav-question-count-bg-color-nav-active);
}

#section_nav .item_title {
  width: 100%;
  margin-bottom: 0;
  line-height: 18px;
  position: relative;
}
#section_nav .question_count_container {
  position: relative;
  margin-left: calc( var(--icon-size) + var(--gap) );
}
li:not(:first-of-type) .item_title::before {
  content: "";
  height: 100%;
  width: var(--line-size);
  background-color: var(--nav-disabled-color);
  position: absolute;
  top: 0;
  left: calc( -0.5 * var(--icon-size) - 0.5 * var(--line-size) - var(--gap ) );
}
#section_nav .question_count_container::before {
  content: "";
  height: 100%;
  width: var(--line-size);
  background-color: var(--nav-disabled-color);
  position: absolute;
  top: 0;
  left: calc( -0.5 * var(--icon-size) - 0.5 * var(--line-size) - var(--gap ) );
}
#section_nav .question_count_container::after {
  content: "";
  height: var(--icon-size);
  width: var(--icon-size);
  border: var(--line-size) solid var(--icon-border-color);
  background-color: var(--icon-color);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: calc( -1 * var(--icon-size) - var(--gap) );
}
#section_nav .question_count {
  margin: 10px 0 20px 0;
  display: inline-block;
  font-size: 0.75rem;
  border-radius: 20px;
  padding: 4px 8px;
}
body.assessment-over .section_nav_item {
  cursor: default;
}
#assessment_complete {
  max-width: var(--question-max-width);
  margin: 0 auto;
  padding-top: 1rem;
  padding-bottom: 9rem;
}
#assessment_complete_li > a > p.section_title {
  width: 100%;
  margin-bottom: 0;
  line-height: 18px;
  position: relative;
  padding-bottom: 20px;
}
#assessment_complete_li > a > p.section_title::after {
  content: "";
  height: var(--icon-size);
  width: var(--icon-size);
  border: var(--line-size) solid var(--icon-border-color);
  background-color: var(--icon-color);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: calc( -1 * var(--icon-size) - var(--gap) );
}
#section_heading_container {
  margin-top: var(--heading-height);
  display: flex;
  position: absolute;
  width: 100%;
}
#section_heading_left {
  width: 100%;
}
#section_heading_right {
  width: 100%;
  background-color: var(--heading-bg-2);
}
#section_heading_inner_container {
  width: var(--container-width);
  min-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}
#section_heading_inner_container::before {
  --offset-x: 40px;
  --size-y: 30px;
  --clip-y: calc( 100% - 10px );
  content: "";
  height: var(--size-y);
  width: calc( 100vw + 2 * var(--offset-x) );
  position: absolute;
  left: calc( -1 * var(--offset-x) );
  bottom: calc( -1 * var(--size-y) );
  background-color: transparent;
  box-shadow: 0 4px 8px 0 #d5d5d5 inset;
  clip-path: polygon( -10% -10%, 110% -10%, 110% var(--clip-y), -10% var(--clip-y) );
}
body.assessment-over #section_heading_inner_container::before {
  display: none;
}
#section_heading_text_container {
  width: calc( 100% - var(--col-1-width) );  
  min-height: var(--section-heading-min-height);
  background-color: var(--heading-bg-2);
  color: var(--section_heading_text_container-text-color);
  padding: 1rem;
  text-align: center;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.assessment-over #section_heading_text_container,
body.assessment-over #section_heading_right,
body.assessment-over #section_heading_left {
  opacity: 0;
}
#section_heading_text_container > span {
  font-family: var(--brand-font-bold) !important;
}
#section_heading_directions {
  margin-right: 0.5rem;
}
@media (min-width: 769px) and (max-width: 1150px) {
  #section_heading_text_container {
    padding: 0;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }
  #section_heading_text {
    width: calc( 100% - 2 * var(--gap) );
    font-size: 1rem;
    display: block;
    text-align: center;
    font-weight: 600;
  }
  #section_heading_directions {
    display: none;
  }
}
#questions_container {
  width: 100%;
  margin-left: var(--col-1-width);
  padding-top: calc( 2 * var(--section-heading-min-height) + 4 * var(--gap) );
  min-height: calc( 100vh - var(--heading-height) - var(--menu-margin) );
}
body.assessment-over #questions_container {
  margin-left: 0 !important;
}
body.logged-in.admin-bar:not(.assessment-over) #questions_container {
  padding-top: calc( ( 2 * var(--section-heading-min-height) ) + ( 4 * var(--gap) ) + var(--admin-bar-y-offset) );
}
body.assessment-over #questions_container {
  padding-top: calc( var(--section-heading-min-height) );
}
.question_section {
  width: calc( 100% - var(--gap) );
  margin: 0 0 calc( 2 * var(--gap) ) var(--gap);
  background-color: var(--section-bg);
}
body.assessment-over .question_section:not(#assessment_complete) {
  display: none;
}
.question_section_inner_container {
  max-width: var(--question-max-width);
  margin: 0 auto;
}
.section-subheading-text {
  font-family: var(--brand-font-bold);
  font-size: 1.15rem;
  line-height: 1.75rem;
  background-color: var(--heading-bg-2);
  text-align: center;
  padding: 1rem 1.5rem 1rem 1.5rem;
  position: relative;
}
.section-subheading-text::before {
  content: "";
  height: calc( 100% + 1rem );
  width: 100%;
  background-color: var(--section-bg);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.question, .subblock, .subblock-question {
  margin-bottom: 3rem;
  border-radius: 16px;
  padding: var(--gap);
}
.question {
  border: 2px solid var(--border-color);
  background-color: var(--background-color);
  border-radius: 12px;
  padding: var(--gap);
  margin-bottom: 9rem;
  position: relative;
}
.question[data-display="off"] {
  --border-color: var(--q-border-off);
  --background-color: var(--q-bg-off);
  color: var(--q-content-color-off);
}
.question[data-q_status="current"] {
  --border-color: var(--q-border-current);
  --background-color: var(--q-bg-current);
  color: var(--q-content-color-current);
}
.question[data-q_status="completed"] {
  --border-color: var(--q-border-completed);
  --background-color: var(--q-bg-completed);
  color: var(--q-content-color-completed);
}
.question[data-q_status="current"] > .question-text {
  font-family: var(--q-text-font-family-current) !important;
}
.subblock {
  margin-bottom: 9rem;
  position: relative;
  border: 2px solid var(--border-color);
  background-color: var(--background-color);
}
.subblock[data-display="off"] {
  --border-color: var(--sb-border-off);
  --background-color: var(--sb-bg-off);
}
.subblock[data-q_status="current"] {
  --border-color: var(--sb-border-current);
  --background-color: var(--sb-bg-current);
}
.subblock[data-q_status="completed"] {
  --border-color: var(--sb-border-completed);
  --background-color: var(--sb-bg-completed);
}
.subblock-subheading {
  margin-bottom: 3rem;
}
.subblock[data-display="off"] .subblock-subheading {
  color: var(--sb-h-text-color-off);
}
.subblock[data-q_status="current"] .subblock-subheading {
  color: var(--sb-h-text-color-current);
}
.subblock[data-q_status="completed"] .subblock-subheading {
  color: var(--sb-h-text-color-completed);
}
.subblock-question {
  border: 1px solid var(--border-color);
  background-color: var(--background-color);
  border-radius: 12px;
  padding: var(--gap);
  position: relative;
}
.subblock-question[data-display="off"] {
  --border-color: var(--sb-q-border-off);
  --background-color: var(--sb-q-bg-off);
  color: var(--sb-q-text-color-off);
}
.subblock-question[data-q_status="current"] {
  --border-color: var(--sb-q-border-current);
  --background-color: var(--sb-q-bg-current);
  color: var(--sb-q-text-color-current);
  border-width: 2px !important;
}
.subblock-question[data-q_status="completed"] {
  --border-color: var(--sb-q-border-completed);
  --background-color: var(--sb-q-bg-completed);
  color: var(--sb-q-text-color-completed);
}
.subblock-question:not(:last-of-type) {
  margin-bottom: 3rem;
}
.subblock-question:last-of-type {
  margin-bottom: 0;
}

.subblock-question[data-q_status="current"] > .question-text {
  font-family: var(--sb-q-text-font-family-current) !important;
}
.question-number {
  color: var(--question-number-color);
  font-size: 0.9rem;
  position: absolute;
  top: -2rem;
  left: 0;
}
.question[data-display="on"] > .question-number {
  --question-number-color: var(--q-number-color-enabled);
}
.question[data-display="off"] > .question-number {
  --question-number-color: var(--q-number-color-off);
}
.subblock[data-display="on"] > .question-number {
  --question-number-color: var(--sb-number-color-enabled);
}
.subblock[data-display="off"] > .question-number {
  --question-number-color: var(--sb-number-color-off);
}
.subblock-question[data-display="on"] > .question-number {
  --question-number-color: var(--sb-q-number-color-enabled);
}
.subblock-question[data-display="off"] > .question-number {
  --question-number-color: var(--sb-q-number-color-off);
}
.question[data-q_status="current"] .question-text,
  .subblock[data-q_status="current"] .subblock-subheading,
  .subblock-question[data-q_status="current"] .question-text,
  .answer {
  line-height: 1.75rem;
}
.question-list {
  list-style: square;
}
.question-text {
  margin-bottom: 1.5rem;
}
.answer-container {
  --icon-size: 20px;
  --padding-x: 8px;
  --padding-y: 4px;
  display: flex;
  gap: 1rem;
  align-items: stretch;
  justify-content: flex-start;
}
.answer {
  display: block;
  padding: var(--padding-y) var(--padding-x) var(--padding-y) calc( 2 * var(--padding-x) + var(--icon-size) );
  border-width: 1px;
  border-style: solid;
  border-color: var(--answer-border-color);
  position: relative;
  border-radius: 4px;
  text-decoration: none;
  background-color: var(--bg-color);
  user-select: none;
}
.answer * { 
  pointer-events: none;
}
.answer::before { /* big circle */
  --pos-y: calc( 50% - 0.5 * var(--icon-size) );
  content: "";
  height: var(--icon-size);
  width: var(--icon-size);
  border: 2px solid var(--icon-color);
  border-radius: 50%;
  position: absolute;
  top: var(--pos-y);
  left: var(--padding-x);
}
.answer::after { /* little circle */
  --offset: 10px;
  --icon-size-small: calc( var(--icon-size) - var(--offset) );
  --pos-y: calc( 50% - 0.5 * var(--icon-size-small) );
  --pos-x: calc( var(--padding-x) + 0.5 * var(--offset) );
  content: "";
  height: var(--icon-size-small);
  width: var(--icon-size-small);
  background-color: var(--icon-color-inside-circle);
  border-radius: 50%;
  position: absolute;
  top: var(--pos-y);
  left: var(--pos-x);
}
.subblock-question[data-display="off"] .answer {
  --bg-color: var(--sb-q-answer-bg-off);
  --icon-color: var(--sb-q-answer-icon-color-off-unselected);
  --icon-color-inside-circle: var(--sb-q-answer-icon-color-inside-circle);
  --answer-border-color: var(--sb-q-answer-a-border-off);  
  color: var(--sb-q-answer-a-text-color-off);
}
.subblock-question[data-q_status="current"] .answer {
  --bg-color: var(--sb-q-answer-bg-current);
  --icon-color: var(--sb-q-answer-icon-color-current-unselected);
  --icon-color-inside-circle: var(--sb-q-answer-icon-color-inside-circle);
  --answer-border-color: var(--sb-q-answer-a-border-current);  
  color: var(--sb-q-answer-a-text-color-current);
}
.subblock-question[data-q_status="completed"] .answer[aria-pressed="false"] {
  --bg-color: var(--sb-q-answer-bg-completed);
  --icon-color: var(--sb-q-answer-icon-color-completed-unselected);
  --icon-color-inside-circle: var(--sb-q-answer-icon-color-inside-circle);
  --answer-border-color: var(--sb-q-answer-a-border-completed);  
  color: var(--sb-q-answer-a-text-color-completed);
}
.subblock-question[data-q_status="completed"] .answer[aria-pressed="true"] {
  --bg-color: var(--sb-q-answer-bg-completed-selected);
  --icon-color: var(--q-answer-icon-color-completed-selected);
  --icon-color-inside-circle: var(--sb-q-answer-icon-color-completed-selected);
  --answer-border-color: var(--sb-q-answer-a-border-completed-selected);
  color: var(--sb-q-answer-a-text-color-completed-selected);
}
.question[data-display="off"] .answer {
  --answer-border-color: var(--q-answer-border-color-off);
  color: var(--q-answer-a-text-color-off);
}
.question[data-q_status="current"] .answer {
  --answer-border-color: var(--q-answer-border-color-current);
  color: var(--q-answer-a-text-color-current);
}
.question[data-q_status="completed"] .answer {
  --answer-border-color: var(--q-answer-border-color-completed);
  color: var(--q-answer-a-text-color-completed);
}
.question[data-q_status="completed"] .answer[aria-pressed="true"] {
  --answer-border-color: var(--q-answer-border-color-completed-selected);
  color: var(--q-answer-a-text-color-completed-selected);
}
.question[data-display="off"] .answer[aria-pressed="false"] {
  --bg-color: var(--answer-bg-unselected-color);
  --icon-color: var(--q-answer-icon-color-off-unselected);
  --icon-color-inside-circle: var(--answer-icon-color-inside-circle-off);
}
.question[data-q_status="current"] .answer[aria-pressed="false"] {
  --bg-color: var(--answer-bg-unselected-color);
  --icon-color: var(--q-answer-icon-color-current-unselected);
  --icon-color-inside-circle: var(--answer-icon-color-inside-circle-off);
}
.question[data-q_status="completed"] .answer[aria-pressed="false"] {
  --bg-color: var(--answer-bg-unselected-color);
  --icon-color: var(--q-answer-icon-color-completed-unselected);
  --icon-color-inside-circle: var(--answer-icon-color-inside-circle-off);
  border-color: var(--q-answer-border-color-completed);
}
.question[data-q_status="completed"] .answer[aria-pressed="true"] {
  --bg-color: var(--answer-bg-selected-color);
  --icon-color: var(--q-answer-icon-color-completed-selected);
  --icon-color-inside-circle: var(--q-answer-icon-color-completed-selected);
  border-color: var(--q-answer-border-color-completed-selected);
}
.question[data-display="off"] .answer-container {
  --answer-border-color: var(--q-answer-container-border-off);
}
.question[data-q_status="current"] .answer-container {
  --answer-border-color: var(--q-answer-container-border-current);
}
.question[data-q_status="completed"] .answer-container {
  --answer-border-color: var(--q-answer-container-border-completed);
}
.answer:focus {
  box-shadow: var(--answer-focus-box-shadow);
}
#submit_assessment_button {
  background-color: var(--button-submit-assessment-bg-color);
  color: var(--button-submit-assessment-text-color);
}
#back_to_home {
  background-color: var(--button-back-to-home-bg-color);
  color: var(--button-back-to-home-text-color);
}

/* State Management */

[data-display="off"] {
  user-select: none;
  position: relative;
}
.question_section[data-display="off"] {
  display: none;
}
.question[data-display="off"]::before, .subblock-question[data-display="off"]::before {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
[data-display="off"] * {
  user-select: none;
}
p:empty {
  display: none;
}

/* Exit Confirmation */

#exit_confirmation_container {
  height: 100%;
  width: 100vw !important;
  background-color: rgba( 1, 1, 1, 0.4 );
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000000000000000000000000000000000;
}
#exit_confirmation_container.show-alert {
  display: flex !important;
}
#exit_confirmation_inner_container {
  --exit-color: var(--color-error);
  --stay-color: var(--color-valid);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.14);
}
#exit_confirmation_notice {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}
#exit_confirmation_notice_svg_container {
  --size: 2.75rem;
  height: var(--size);
  width: var(--size);
}
#exit_confirmation_notice_svg_container > svg {
  fill: var(--exit-color);
}
#exit_confirmation_notice > p {
  margin-bottom: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  text-align: center;
}
#exit_confirmation_button_container {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
}
#exit_confirmation_button_container > a {
  display: flex;
  font-family: var(--brand-font-bold);
  color: var(--text-color);
  border: 1px solid var(--color);
  border-radius: 4px;
  padding: 4px 14px;
  font-size: 0.9rem;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  user-select: none;
}
#exit-button {
  --color: var(--exit-color);
  --text-color: var(--color);
}
#cancel-exit-button {
  --color: var(--stay-color);
  --text-color: var(--container-bg);
  background-color: var(--color);
}
#exit_confirmation_inner_container {
  background-color: var(--exit-confirmation-bg-color);
  color: var(--exit-confirmation-text-color);
}

/* Finish Assessment */

#submit_assessment_button_container {
  margin-top: 3rem;
  margin-bottom: 8rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#submit_assessment_button_container[data-display="off"] {
  display: none;
}
#submit_assessment_button_container[data-display="off"]::after {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#submit_assessment_button, #back_to_home {
  --y-padding: 8px;
  --x-padding: 18px;
  --x-padding-between: 12px;
  display: block;
  text-align: center;
  text-decoration: none;
  user-select: none;
  padding: var(--y-padding) var(--x-padding);
  font-size: 18px;
  border-radius: 4px;
  position: relative;
}
#submit_assessment_button:focus, #back_to_home:focus {  
  box-shadow: var(--answer-focus-box-shadow);
}
#congratulations_img_container {
  width: 350px !important;
  margin: 0 auto 1rem auto;
  position: relative;
}
#assessment_complete {
  padding-top: 0;
  color: var(--brand-color-5);
}
#assessment_complete > h4 {
  text-align: center;
  font-weight: 600;
  font-size: 2rem;
  padding-bottom: 1rem;
  font-family: var(--brand-font-bold);
}
#assessment_complete > p {
  text-align: center;
  margin-bottom: 2rem;
}
#back_to_home_container {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .z_assessment_container {
    display: none;
  }
  #error-screen-width {
    display: block !important;
    text-align: center;
    color: var(--color-error) !important;
    padding: 3rem 0;
  }
}
@media (min-width: 769px) {
  body.assessment-in-progress #footer-newsletter-cta-container,
  body.assessment-in-progress .footer {
    display: none !important;
  }
}
body.assessment-over #questions_container {
  position: relative;
}
body.assessment-over.form-submitted #questions_container::before, 
  body.assessment-over.form-submitted #questions_container::after {
  display: none;
}
body.assessment-over #section_nav_container {
  position: relative;
  margin-top: var(--heading-height);
}
body.assessment-over #section_nav::after {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
body.logged-in.admin-bar #admin_bar_placeholder {
  width: 100%;
  height: 32px;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}
@media (max-width: 782px) {
  body.logged-in.admin-bar #admin_bar_placeholder {
    height: 46px;
  }
}

/* Phase Transition */

body #intro_container {
  display: flex;
}
body.assessment-in-progress #intro_container {
  display: none !important;
}
body.assessment-over #intro_container {
  display: none !important;
}
#begin_questions {
  display: none;
}
body.assessment-in-progress #begin_questions {
  display: block !important;
}
body.assessment-in-progress.form-submitted #begin_questions {
  display: block !important;
  position: relative;
  margin-top: calc( -1 * var(--menu-margin) );
}
body.assessment-in-progress.form-submitted #begin_questions::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba( 255, 255, 255, 0.75 );
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999999999999;
}
body.assessment-in-progress.form-submitted #begin_questions::after {
  --size: 50px;
  --x-pos: calc( var(--col-1-width) + 0.5 * ( 100% - var(--col-1-width) ) );
  --y-pos: calc( var(--sticky-y) + 9rem );
  --start: rotate(-360deg);
  content: "";
  height: var(--size);
  width: var(--size);
  position: absolute;
  top: var(--y-pos);
  left: var(--x-pos);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center 15%;
  background-size: 70%;
  background-image: var(--spinner);
  transform: rotate(0deg);
  animation: loading-spinner2 2.5s linear infinite;
  z-index: 999999999999999;
}
@keyframes loading-spinner2 {
  0% {transform: var(--start);}
  100% {transform: rotate(0deg);}
}
body.assessment-in-progress.form-submitted #main-menu-container, body.assessment-in-progress.form-submitted #main-menu-container * {
  z-index: 999999999999999999999999999;
}
body.assessment-over .z_assessment_container {
  background-color: var(--section-bg);
}
body.assessment-over #begin_questions {
  display: block !important;
}

/* Crossbrowser Adjustments */

body.mac:not(.firefox) [role="button"] > span {
  position: relative;
  top: 2px;
}
body.mac.firefox [role="button"] > span {
  position: relative;
  top: 1px;
}