/* TODO: Code review: Make sure that no styles that are meant for other plugins are defined here, or at least that any styles that are meant to be mutations of the original styling are treated as such (One base styling in external plugin, one plugin specific styling in this plugin) */
.sa_factors_survey_breadcrumb_section {
  background-color: var(--sa-white);
  padding: 2.25rem 0;
}
@media screen and (max-width: 75rem) {
  .sa_factors_survey_breadcrumb_section {
    padding: 2.05rem 1rem;
  }
}

.sa_factors_survey_btns_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sa_factors_survey_btns_container.first {
  width: 100%;
  justify-content: flex-end;
}

.sa_factors_survey_btn {
  border-radius: 6.25rem;
  display: flex;
  height: 3.5rem;
  padding: 0rem 3.15rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-weight: 400;
  font-size: 1.125rem;
}
.sa_factors_survey_btn svg {
  width: 1.25rem;
}
.sa_factors_survey_btn span {
  white-space: nowrap;
  display: block;
}
.sa_factors_survey_btn.sa_factors_survey_btn_next {
  background: var(--sa-sub-primary);
  color: var(--sa-white);
  gap: 1.25rem;
}
.sa_factors_survey_btn.sa_factors_survey_btn_next svg {
  fill: var(--sa-white);
  rotate: 180deg;
}
.sa_factors_survey_btn.sa_factors_survey_btn_previous {
  background: var(--sa-white);
  color: var(--sa-sub-primary);
  border: 0.0625rem solid var(--sa-neutral-300);
}
.sa_factors_survey_btn.sa_factors_survey_btn_previous svg {
  fill: var(--sa-sub-primary);
}

.sa-factor-qr {
  background: var(--sa-white);
  border-radius: 0;
  padding: 1rem;
}
@media screen and (max-width: 75rem) {
  .sa-factor-qr {
    max-width: 14rem;
    margin: 1.5rem 0 0 !important;
    padding: 0.5rem;
  }
}

.sa-survey-login-container {
  background: var(--sa-white);
  display: flex;
  align-items: center;
  height: 80vh;
}
@media screen and (max-width: 75rem) {
  .sa-survey-login-container {
    background: var(--sa-magenta-100);
  }
}
.sa-survey-login-container .sa-survey-login-image {
  width: 50%;
  background: var(--sa-magenta-100);
  height: 100%;
  padding: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 75rem) {
  .sa-survey-login-container .sa-survey-login-image {
    display: none;
  }
}
.sa-survey-login-container .sa-survey-login-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sa-survey-login-container .sa-survey-login {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
@media screen and (max-width: 75rem) {
  .sa-survey-login-container .sa-survey-login {
    width: 100%;
  }
}
.sa-survey-login-container .sa-survey-login h1 {
  margin-bottom: 0.5rem;
}
.sa-survey-login-container form {
  display: flex;
  flex-direction: column;
}

.sa-survey-input {
  height: 3.5rem;
  padding: 1rem 0.75rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--color-neutral-300);
  background: var(--sa-white);
  box-shadow: 0 0 0.625rem 0 rgba(0, 11, 60, 0.2) inset;
  color: var(--sa-sub-primary);
  width: 21.875rem;
  text-align: center;
  font-size: 1.125rem;
}
.sa-survey-input.sa-survey-input-error {
  box-shadow: 0 0 0.625rem 0 rgba(0, 11, 60, 0.2) inset, 0 0 0 0.125rem var(--color-magenta-400);
}

.sa-survey-error {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 21.875rem;
}
.sa-survey-error img {
  width: 1rem;
  height: 1rem;
  display: block;
}
.sa-survey-error p {
  margin: 0;
}

.sa-survey-primary-button {
  height: 3.5rem;
  padding: 0 3.125rem;
  border-radius: 6.25rem;
  background: #000b3c;
  box-shadow: 0 0.625rem 1.25rem 0 rgba(0, 11, 60, 0.15);
  color: var(--sa-white);
  width: 21.875rem;
  font-size: 1.125rem;
  font-weight: 600;
  border: 0;
  margin-top: 1.5rem;
  transition: 0.3s all ease;
}
.sa-survey-primary-button:hover {
  background: #404869;
}
.sa-survey-primary-button:focus {
  outline: 2px solid -webkit-focus-ring-color;
}

.sa-survey-info-container {
  background: var(--sa-magenta-100);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 37.5rem;
  text-align: center;
  gap: 2rem;
  padding: 0 1.5rem;
}
.sa-survey-info-container.long {
  height: 100%;
}
.sa-survey-info-container .sa-survey-check {
  height: 8rem;
  width: 8rem;
  border-radius: 62rem;
  background: var(--color-green-400);
  display: flex;
  justify-content: center;
  align-items: center;
}
.sa-survey-info-container .sa-survey-check img {
  width: 4.5rem;
  height: 4.5rem;
}
.sa-survey-info-container .sa-survey-warning {
  height: 8rem;
  width: 8rem;
  border-radius: 62rem;
  background: #c80c0c;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sa-survey-info-container .sa-survey-warning img {
  width: 4.5rem;
  height: 4.5rem;
}
.sa-survey-info-container .sa-survey-warning .sa-survey-exclaimation {
  color: var(--sa-white);
  font-size: 6.25rem;
}
.sa-survey-info-container h1,
.sa-survey-info-container p {
  margin: 0;
  max-width: 31.25rem;
}

.survey-graph-container {
  background: var(--sa-white);
  border-radius: 1.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  position: relative;
  justify-content: space-between;
  box-shadow: 0 0.125rem 0.375rem 0 rgba(13, 10, 44, 0.08);
}
@media screen and (max-width: 75rem) {
  .survey-graph-container {
    padding: 1.5rem 1rem;
    flex-direction: column;
  }
}

.survey-graph-participants-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.survey-graph-participants-container p, .survey-graph-participants-container span {
  margin: 0;
}
.survey-graph-participants-container .survey-graph-participants-label {
  color: var(--color-neutral-400);
}
@media screen and (max-width: 75rem) {
  .survey-graph-participants-container .h3 {
    font-size: 1.375rem !important;
  }
}

.survey-graph-table {
  display: flex;
  flex-direction: column;
}
.survey-graph-table .survey-graph-table-header {
  flex-basis: 100%;
  text-align: right;
}
@media screen and (max-width: 75rem) {
  .survey-graph-table .survey-graph-table-header {
    margin-bottom: 1rem;
  }
}
.survey-graph-table .survey-graph-table-row {
  display: flex;
  flex-wrap: wrap;
}
.survey-graph-table .survey-graph-table-row .survey-graph-table-title {
  flex-basis: 100%;
}
@media screen and (max-width: 75rem) {
  .survey-graph-table .survey-graph-table-row .survey-graph-table-title {
    flex-basis: calc(100% - 2rem);
  }
}
.survey-graph-table .survey-graph-table-row .survey-graph-table-values {
  display: flex;
  width: calc(100% - 3.5rem);
  height: 2.5rem;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  align-items: center;
  border-radius: 0.25rem;
  justify-content: space-between;
  gap: 0.125rem;
  overflow: hidden;
}
@media screen and (max-width: 75rem) {
  .survey-graph-table .survey-graph-table-row .survey-graph-table-values {
    order: 3;
    width: 100%;
  }
}
.survey-graph-table .survey-graph-table-row .survey-graph-table-values div {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0.75rem;
}
.survey-graph-table .survey-graph-table-row .survey-graph-table-values div span {
  font-size: 0.875rem;
  font-family: "proxima_nova_semibold", "Open Sans", sans-serif;
}
.survey-graph-table .survey-graph-table-row .survey-graph-table-values div.survey-graph-table-bar-red {
  background: var(--color-magenta-400);
}
.survey-graph-table .survey-graph-table-row .survey-graph-table-values div.survey-graph-table-bar-red span {
  color: var(--sa-white);
}
.survey-graph-table .survey-graph-table-row .survey-graph-table-values div.survey-graph-table-bar-orange {
  background: var(--color-scale-200);
}
.survey-graph-table .survey-graph-table-row .survey-graph-table-values div.survey-graph-table-bar-yellow {
  background: var(--color-scale-300);
}
.survey-graph-table .survey-graph-table-row .survey-graph-table-values div.survey-graph-table-bar-lightgreen {
  background: var(--color-green-300);
}
.survey-graph-table .survey-graph-table-row .survey-graph-table-values div.survey-graph-table-bar-green {
  background: var(--color-green-400);
}
.survey-graph-table .survey-graph-table-row .survey-graph-table-median {
  width: 3.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: 0.75rem;
}
.survey-graph-table .survey-graph-table-row .survey-graph-table-median span {
  font-size: 1rem;
  font-family: "proxima_nova_semibold", "Open Sans", sans-serif;
}
@media screen and (max-width: 75rem) {
  .survey-graph-table .survey-graph-table-row .survey-graph-table-median {
    width: 2rem;
    height: auto;
    margin-top: 0;
  }
  .survey-graph-table .survey-graph-table-row .survey-graph-table-median span {
    font-size: 0.875rem;
  }
}
.survey-graph-table .survey-graph-scales {
  display: flex;
  width: fit-content;
  border-radius: 0.5rem;
  border: 0.0625rem solid var(--color-neutral-75);
  padding: 0.5rem;
  margin-top: 0.5rem;
  gap: 1rem;
}
@media screen and (max-width: 75rem) {
  .survey-graph-table .survey-graph-scales {
    flex-direction: column;
    width: 100%;
  }
}
.survey-graph-table .survey-graph-scales div {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  font-size: 0.875rem;
  font-family: "proxima_nova_semibold", "Open Sans", sans-serif;
}
.survey-graph-table .survey-graph-scales div span {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
}
.survey-graph-table .survey-graph-scales div span.survey-graph-scales-red {
  background: var(--color-magenta-400);
  color: var(--sa-white);
}
.survey-graph-table .survey-graph-scales div span.survey-graph-scales-orange {
  background: var(--color-scale-200);
}
.survey-graph-table .survey-graph-scales div span.survey-graph-scales-yellow {
  background: var(--color-scale-300);
}
.survey-graph-table .survey-graph-scales div span.survey-graph-scales-lightgreen {
  background: var(--color-green-300);
}
.survey-graph-table .survey-graph-scales div span.survey-graph-scales-green {
  background: var(--color-green-400);
}

.survey-graph-name {
  font-size: 1rem;
}

.sa-survey-select-factor {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sa-survey-select-factor .sa-survey-formsingle-checkbox {
  background: var(--sa-white);
  border-radius: 1rem;
  justify-content: start;
}
.sa-survey-select-factor .sa-survey-form-header {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.sa-survey-select-factor .sa-survey-form-title {
  color: var(--sa-primary);
}

.sa-factors-survey-date input {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  border-radius: 100px;
  border: 0.0625rem solid var(--sa-sub-primary);
  gap: 0.75rem;
  cursor: pointer;
  font-size: 1.125rem;
  font-family: "proxima_nova_rg", "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow: 0 0.625rem 1.25rem 0 rgba(0, 11, 60, 0.15);
}
.sa-factors-survey-date input[type=date]::-webkit-calendar-picker-indicator {
  color: rgba(0, 0, 0, 0);
  opacity: 1;
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Cg clip-path='url(%23clip0_2962_1478)'%3E%3Cpath d='M4.66699 0.667969C5.22012 0.667969 5.66699 1.11484 5.66699 1.66797V2.66797H9.66699V1.66797C9.66699 1.11484 10.1139 0.667969 10.667 0.667969C11.2201 0.667969 11.667 1.11484 11.667 1.66797V2.66797H13.167C13.9951 2.66797 14.667 3.33984 14.667 4.16797V5.66797H0.666992V4.16797C0.666992 3.33984 1.33887 2.66797 2.16699 2.66797H3.66699V1.66797C3.66699 1.11484 4.11387 0.667969 4.66699 0.667969ZM0.666992 6.66797H14.667V15.168C14.667 15.9961 13.9951 16.668 13.167 16.668H2.16699C1.33887 16.668 0.666992 15.9961 0.666992 15.168V6.66797ZM2.66699 9.16797V10.168C2.66699 10.443 2.89199 10.668 3.16699 10.668H4.16699C4.44199 10.668 4.66699 10.443 4.66699 10.168V9.16797C4.66699 8.89297 4.44199 8.66797 4.16699 8.66797H3.16699C2.89199 8.66797 2.66699 8.89297 2.66699 9.16797ZM6.66699 9.16797V10.168C6.66699 10.443 6.89199 10.668 7.16699 10.668H8.16699C8.44199 10.668 8.66699 10.443 8.66699 10.168V9.16797C8.66699 8.89297 8.44199 8.66797 8.16699 8.66797H7.16699C6.89199 8.66797 6.66699 8.89297 6.66699 9.16797ZM11.167 8.66797C10.892 8.66797 10.667 8.89297 10.667 9.16797V10.168C10.667 10.443 10.892 10.668 11.167 10.668H12.167C12.442 10.668 12.667 10.443 12.667 10.168V9.16797C12.667 8.89297 12.442 8.66797 12.167 8.66797H11.167ZM2.66699 13.168V14.168C2.66699 14.443 2.89199 14.668 3.16699 14.668H4.16699C4.44199 14.668 4.66699 14.443 4.66699 14.168V13.168C4.66699 12.893 4.44199 12.668 4.16699 12.668H3.16699C2.89199 12.668 2.66699 12.893 2.66699 13.168ZM7.16699 12.668C6.89199 12.668 6.66699 12.893 6.66699 13.168V14.168C6.66699 14.443 6.89199 14.668 7.16699 14.668H8.16699C8.44199 14.668 8.66699 14.443 8.66699 14.168V13.168C8.66699 12.893 8.44199 12.668 8.16699 12.668H7.16699ZM10.667 13.168V14.168C10.667 14.443 10.892 14.668 11.167 14.668H12.167C12.442 14.668 12.667 14.443 12.667 14.168V13.168C12.667 12.893 12.442 12.668 12.167 12.668H11.167C10.892 12.668 10.667 12.893 10.667 13.168Z' fill='%23000B3C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2962_1478'%3E%3Crect width='16' height='16' fill='white' transform='translate(0 0.667969)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  width: 1rem;
  height: 17px;
  cursor: pointer;
}

.sa-friskfaktorhjul-outer {
  position: relative;
}

.sa-friskfaktorhjul-inner {
  max-width: 1170px;
  width: 100%;
  height: 503px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sa-friskfaktorhjul-inner svg {
  width: 391px;
  height: 391px;
}
@media screen and (max-width: 991px) {
  .sa-friskfaktorhjul-inner {
    flex-direction: column;
    height: auto;
    padding: 36px 0;
  }
  .sa-friskfaktorhjul-inner .sa-survey-select-factor {
    margin-top: 64px;
    width: 100%;
  }
  .sa-friskfaktorhjul-inner .sa-survey-select-factor.is-step-5 {
    display: none;
  }
  .sa-friskfaktorhjul-inner svg {
    width: 172px;
    height: 172px;
  }
}
@media screen and (min-width: 992px) {
  .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer {
    position: absolute;
  }
  .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer .sa-survey-formsingle-checkbox {
    background: transparent;
  }
  .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(1) {
    top: 0;
    left: calc(50% + 3.5rem);
  }
  .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(2) {
    top: 134px;
    left: calc(50% + 200px);
  }
  .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(3) {
    bottom: 134px;
    left: calc(50% + 200px);
  }
  .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(4) {
    bottom: 0;
    left: calc(50% + 3.5rem);
  }
  .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(5) {
    bottom: 0;
    right: calc(50% + 3.5rem);
  }
  .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(6) {
    bottom: 134px;
    right: calc(50% + 200px);
  }
  .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(7) {
    top: 134px;
    right: calc(50% + 200px);
  }
  .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(8) {
    top: 0;
    right: calc(50% + 3.5rem);
  }
  .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(5) .sa-survey-formsingle-check, .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(6) .sa-survey-formsingle-check, .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(7) .sa-survey-formsingle-check, .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(8) .sa-survey-formsingle-check {
    order: 2;
  }
  .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(5) .sa-survey-form-header, .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(6) .sa-survey-form-header, .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(7) .sa-survey-form-header, .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(8) .sa-survey-form-header {
    text-align: right;
  }
  .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(5) .sa-survey-form-header span, .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(6) .sa-survey-form-header span, .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(7) .sa-survey-form-header span, .sa-friskfaktorhjul-inner .sa-survey-formsingle-checkbox-outer:nth-child(8) .sa-survey-form-header span {
    margin: 0;
  }
}

.sa-friskfaktorhjul-mobile-text {
  display: none;
}
@media screen and (max-width: 991px) {
  .sa-friskfaktorhjul-mobile-text {
    display: block;
  }
  .sa-friskfaktorhjul-mobile-text p {
    color: var(--sa-primary) !important;
    font-weight: 600;
    position: absolute;
  }
  .sa-friskfaktorhjul-mobile-text p:nth-child(1) {
    top: 0.75rem;
    left: calc(50% + 2rem);
  }
  .sa-friskfaktorhjul-mobile-text p:nth-child(2) {
    top: 4.5rem;
    left: calc(50% + 5.375rem);
  }
  .sa-friskfaktorhjul-mobile-text p:nth-child(3) {
    top: 144px;
    left: calc(50% + 5.375rem);
  }
  .sa-friskfaktorhjul-mobile-text p:nth-child(4) {
    top: 208px;
    left: calc(50% + 2rem);
  }
  .sa-friskfaktorhjul-mobile-text p:nth-child(5) {
    top: 208px;
    right: calc(50% + 2rem);
  }
  .sa-friskfaktorhjul-mobile-text p:nth-child(6) {
    top: 144px;
    right: calc(50% + 5.375rem);
  }
  .sa-friskfaktorhjul-mobile-text p:nth-child(7) {
    top: 4.5rem;
    right: calc(50% + 5.375rem);
  }
  .sa-friskfaktorhjul-mobile-text p:nth-child(8) {
    top: 0.75rem;
    right: calc(50% + 2rem);
  }
}

.sa-factor-stepper-container {
  transform: translateY(-50%);
}

.selected-factor {
  padding: 1.5rem 0 3.5rem;
  background: var(--sa-white);
  max-width: 100% !important;
}
.selected-factor div {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.selected-factor div img {
  object-fit: contain;
}
.selected-factor div .h4 {
  margin: 0;
}

@media screen and (max-width: 75rem) {
  .sa-survey-secondary-button {
    margin-top: 1.5rem !important;
  }
}

@media screen and (min-width: 992px) {
  .sa-survey-share-link-btn-container {
    min-width: 600px;
  }
}

/*# sourceMappingURL=sa-factors-survey-styles.css.map */