/* RADIO */
.sa-survey-formsingle-radio-container:not(.step-by-step),
.sa-survey-formsingle-radio-container.sa-survey-formsingle-analog,
.sa-survey-formsingle-radio-container .sa-formsingle-region {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--sa-magenta-200);
  padding: 32px;
  border-radius: 32px;
}

@media screen and (max-width: 1199px) {
  .sa-survey-formsingle-radio-container:not(.step-by-step),
  .sa-survey-formsingle-radio-container.sa-survey-formsingle-analog,
  .sa-survey-formsingle-radio-container .sa-formsingle-region {
    padding: 24px;
  }
}

.sa-survey-formsingle-title {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.sa-survey-formsingle-title.sa-survey-check {
  gap: 16px;
}

.sa-survey-formsingle-title p {
  max-width: 75%;
}

@media screen and (max-width: 1199px) {
  .sa-survey-formsingle-title p {
    max-width: 100%;
  }

  .sa-survey-formsingle-title-text {
    order: 3;
    width: 100%;
  }
}

.sa-survey-formsingle-title-text {
  max-width: 80%;

  h2 {
    display: flex;
    align-items: center;
  }
}

/* Custom styling for accordion inside text formsingle */
.sa-survey-formsingle-text-accordion {
  width: 100%;
}

.sa-survey-formsingle-text-accordion
  .vc_tta.vc_tta-accordion
  .vc_tta-controls-icon-position-left.vc_tta-panel-title
  > a {
  padding: 0 !important;
  justify-content: start !important;
}

.sa-survey-formsingle-text-accordion
  .vc_tta-style-sa-red-accordion
  .vc_tta-panel
  .vc_tta-panel-title
  > a
  span {
  font-size: 16px;
  font-family: "proxima_nova_rgregular", "Open Sans", sans-serif;
}

.sa-survey-formsingle-text-accordion
  .vc_tta-style-sa-red-accordion
  .vc_tta-panel
  .vc_tta-panel-title
  > a:after {
  font-size: 14px;
}

.sa-survey-formsingle-text-accordion .vc_tta-panel-body {
  padding-left: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  font-size: 16px;
}

.sa-survey-formsingle-text-accordion
  .vc_tta-panel-body
  .wpb_text_column
  ul
  li::before {
  margin-top: 8px;
}

.sa-survey-formsingle-number {
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  border-radius: 100%;
  background: var(--sa-magenta-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sa-sub-primary);
}

.sa-survey-formsingle-number span {
  margin: 0;
  font-size: 20px;
  display: flex !important;
  align-items: center;
  height: 40px;
}

.sa-survey-formsingle-radio-container .sa-formsingle-region h3 {
  margin: 0;
  font-size: 24px;
  display: flex;
  align-items: center;
  height: 40px;
}

@media screen and (max-width: 1199px) {
  .sa-survey-formsingle-radio-container .sa-formsingle-region h3 {
    height: auto;
  }
}

.sa-survey-formsingle-radio-container .sa-formsingle-region p {
  max-width: 800px;
  margin: 4px 0 0 0;
}
.sa-survey-formsingle-radio-container .sa-survey-check,
.sa-survey-formsingle-radio-container .sa-formsingle-region .sa-survey-check {
  margin-left: auto;
  align-items: center;
  display: none;
}

.sa-survey-formsingle-radio-container.step-by-step.checked:hover,
.sa-survey-formsingle-radio-container.step-by-step.checked:focus {
  outline: 2px solid var(--sa-primary);
  cursor: pointer;
}

.sa-survey-formsingle-radio-container.step-by-step:hover:not(.checked),
.sa-survey-formsingle-radio-container.step-by-step:focus:not(.checked) {
  cursor: not-allowed;
}

.sa-survey-formsingle-radio-outer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sa-survey-formsingle-radio-inner-items {
  background: var(--sa-magenta-100);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}

.sa-survey-formsingle-radio-inner {
  background: var(--sa-magenta-100);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media screen and (max-width: 1199px) {
  .sa-survey-formsingle-radio-inner:last-child {
    margin-bottom: 0;
  }
}

.sa-survey-formsingle-radio-inner .sa-survey-formsingle-radio-inner-items {
  padding: 0;
  background: transparent;
}

.sa-survey-formsingle-radio-item {
  width: 20%;
}

.sa-survey-formsingle-radio-item-red .sa-survey-formsingle-color-bar {
  background: #e81147;
}

.sa-survey-formsingle-radio-item-orange .sa-survey-formsingle-color-bar {
  background: #edaf64;
}

.sa-survey-formsingle-radio-item-yellow .sa-survey-formsingle-color-bar {
  background: #ffef5c;
}

.sa-survey-formsingle-radio-item-lightgreen .sa-survey-formsingle-color-bar {
  background: #b9d369;
}

.sa-survey-formsingle-radio-item-green .sa-survey-formsingle-color-bar {
  background: #00994f;
}

@media screen and (max-width: 1199px) {
  .sa-survey-formsingle-radio-item-red {
    border-left: 6px solid #e81147;
  }

  .sa-survey-formsingle-radio-item-orange {
    border-left: 6px solid #edaf64;
  }

  .sa-survey-formsingle-radio-item-yellow {
    border-left: 6px solid #ffef5c;
  }

  .sa-survey-formsingle-radio-item-lightgreen {
    border-left: 6px solid #b9d369;
  }

  .sa-survey-formsingle-radio-item-green {
    border-left: 6px solid #00994f;
  }
}

.sa-survey-formsingle-radio-item label {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  margin: 0 0 4px;
  align-items: center;
}

@media screen and (max-width: 1199px) {
  .sa-survey-formsingle-radio-item label {
    margin: 0;
  }
}

.sa-survey-formsingle-radio-item input {
  width: 0;
  height: 0;
}

.sa-survey-formsingle-radiobtn {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: 1px solid var(--sa-sub-primary);
  box-shadow: 0px 0px 10px 0px rgba(0, 11, 60, 0.2) inset;
  margin-bottom: 16px;
  transition: background ease 0.3s;
  position: relative;
  background-color: var(--sa-white, #fff);
}

.sa-survey-formsingle-radio-item label:hover .sa-survey-formsingle-radiobtn {
  background: #ebecf0;
}

.sa-survey-formsingle-radio-item label:before {
  display: none !important;
}

.sa-survey-formsingle-radio-item label:after {
  display: none !important;
}

.sa-survey-formsingle-radio-item
  input:checked
  + label
  .sa-survey-formsingle-radiobtn:before,
.sa-survey-formsingle-radio-item
  input:focus
  + label
  .sa-survey-formsingle-radiobtn:before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: var(--sa-sub-primary);
  display: block;
  position: absolute;
  top: 9px;
  left: 9px;
}

.sa-survey-formsingle-radio-item
  input:focus
  + label
  .sa-survey-formsingle-radiobtn {
  outline: 2px solid -webkit-focus-ring-color;
}

/* Initially hide all steps, jQuery displays first child */
.sa-survey-formsingle-radio-container.closed p,
.sa-survey-formsingle-radio-container.closed ul,
.sa-survey-formsingle-radio-container.closed .sa-survey-formsingle-radio-outer,
.sa-survey-formsingle-radio-container.closed button,
.sa-survey-formsingle-radio-container.closed .sa-formsingle-region p,
.sa-survey-formsingle-radio-container.closed .sa-formsingle-region ul,
.sa-survey-formsingle-radio-container.closed
  .sa-formsingle-region
  .sa-survey-formsingle-radio-outer,
.sa-survey-formsingle-radio-container.closed .sa-formsingle-region button {
  display: none;
}

.sa-survey-formsingle-radio-container.step-by-step.closed.checked {
  cursor: pointer;
}

@media screen and (max-width: 1199px) {
  .sa-survey-formsingle-number {
    background: var(--sa-white);
  }

  .sa-survey-formsingle-radio-inner {
    padding: 16px 0 0 0;
    background: transparent;
  }

  .sa-survey-formsingle-radio-inner-items {
    flex-direction: column;
    gap: 8px;
  }

  .sa-survey-formsingle-radio-item {
    width: 100%;
    background: var(--sa-white);
    border-radius: 4px;
    padding: 12px 16px;
  }

  .sa-survey-formsingle-radio-item label {
    flex-direction: row;
    gap: 12px;
  }

  .sa-survey-formsingle-radiobtn {
    margin: 0;
  }
}

/* CHECKBOX */
.sa-survey-formsingle-checkbox-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--sa-magenta-200);
  padding: 32px;
  border-radius: 32px;
}

.formsingle-thumbs {
  padding: 24px 32px;
}

@media screen and (max-width: 1199px) {
  .sa-survey-formsingle-checkbox-container {
    padding: 24px;
    gap: 16px;
  }
}

.sa-survey-formsingle-checkbox-outer {
  display: flex;
  flex-direction: column;
}

.sa-survey-formsingle-checkbox-outer label {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}

.sa-survey-formsingle-checkbox > input {
  display: block;
  margin-right: auto;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--sa-neutral-300, #7f859d);
  box-shadow: 0px 0px 10px 0px rgba(0, 11, 60, 0.2) inset;
  width: 748px;
}

.sa-survey-formsingle-checkbox-outer > input {
  width: 0;
  height: 0;
}
.sa-survey-formsingle-checkbox-outer label:before {
  display: none !important;
}

.sa-survey-formsingle-checkbox-outer label:after {
  display: none !important;
}

.sa-survey-formsingle-checkbox-outer
  input:focus
  + label
  .sa-survey-formsingle-checkbox
  .sa-survey-formsingle-check {
  outline: 2px solid -webkit-focus-ring-color;
}

.sa-survey-formsingle-checkbox-outer
  input:checked
  + label
  .sa-survey-formsingle-checkbox
  .sa-survey-formsingle-check:before {
  display: block;
  width: 24px;
  height: 24px;
  content: url("check.svg");
  position: absolute;
  top: 8px;
  left: 8px;
}

.sa-survey-formsingle-checkbox-outer
  input:disabled
  + label
  .sa-survey-formsingle-check {
  background: #ebecf0;
}

.sa-survey-formsingle-checkbox-outer input:disabled + label {
  cursor: not-allowed;
}

.sa-survey-formsingle-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 32px;
}

.sa-survey-formsingle-checkbox h2 {
  margin-bottom: 0;
}

@media screen and (max-width: 1199px) {
  .sa-survey-formsingle-checkbox {
    align-items: start;
    flex-wrap: wrap;
  }

  .sa-survey-thumbs-h3 {
    width: calc(100% - 120px) !important;
  }

  .sa-survey-formsingle-checkbox h2 {
    width: calc(100% - 56px);
  }
}

.sa-survey-formsingle-check {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--sa-sub-primary);
  background: var(--sa-white);
  box-shadow: 0px 0px 10px 0px rgba(0, 11, 60, 0.2) inset;
  position: relative;
  transition: background ease 0.3s;
}

.sa-survey-formsingle-checkbox-outer label:hover .sa-survey-formsingle-check {
  background: #ebecf0;
}

.sa-survey-formsingle-checkbox p,
h2 {
  margin: 0;
  margin-right: auto;
}

.sa-survey-formsingle-followup-questions {
  display: none;
  margin-top: 24px;
  margin-bottom: 8px;
  gap: 32px;
}

.sa-survey-formsingle-followup-questions div {
  width: 50%;
}

.sa-survey-formsingle-followup-questions h3 {
  margin: 0 0 12px;
}

.sa-survey-formsingle-followup-questions textarea {
  display: block;
  padding: 20px 24px;
  border-radius: 20px;
  border: 1px solid var(--sa-neutral-300, #7f859d);
  box-shadow: 0px 0px 10px 0px rgba(0, 11, 60, 0.2) inset;
  width: 100%;
  resize: none;
}

.sa-survey-formsingle-checkbox-outer
  input:checked
  + label
  .sa-survey-formsingle-followup-questions {
  display: flex;
}

@media screen and (max-width: 1199px) {
  .sa-survey-formsingle-followup-questions {
    flex-direction: column;
  }

  .sa-survey-formsingle-followup-questions div {
    width: 100%;
  }
}

/* TEXT */
.sa-survey-formsingle-text-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: 32px;
}

@media screen and (max-width: 1199px) {
  .sa-survey-formsingle-text-container {
    padding: 24px;
  }
}

.sa-survey-formsingle-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sa-survey-formsingle-text-outer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sa-survey-formsingle-text-outer h2 {
  margin: 0;
}

.sa-survey-formsingle-text-outer label {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}

.sa-survey-formsingle-text-outer > textarea {
  display: block;
  padding: 20px 24px;
  border-radius: 8px;
  border: 1px solid var(--sa-neutral-300, #7f859d);
  box-shadow: 0px 0px 10px 0px rgba(0, 11, 60, 0.2) inset;
  width: 100%;
  resize: none;
}

.sa-survey-formsingle-text-outer label:before {
  display: none !important;
}

.sa-survey-formsingle-text-outer label:after {
  display: none !important;
}

.sa-survey-formsingle-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--sa-magenta-200);
  border-radius: 32px;
}

.sa-survey-formsingle-text-checkbox-rating p {
  max-width: 100%;
}

.sa-survey-formsingle-check {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--sa-sub-primary);
  background: var(--sa-white);
  box-shadow: 0px 0px 10px 0px rgba(0, 11, 60, 0.2) inset;
  position: relative;
  transition: background ease 0.3s;
}

.sa-survey-formsingle-text-outer label:hover .sa-survey-formsingle-check {
  background: #ebecf0;
}

.sa-survey-formsingle-text p,
h4, h3 {
  margin: 0;
  margin-right: auto;
}

.sa-survey-formsingle-text-rating {
  margin-left: auto;
  min-width: fit-content;
  text-align: center;
}

@media screen and (max-width: 1199px) {
  .sa-survey-formsingle-text-rating {
    order: 4;
  }

  .sa-survey-formsingle-title.sa-survey-check
    .sa-survey-formsingle-text-rating {
    margin: auto;
  }

  .sa-survey-formsingle-text-accordion {
    order: 5;
  }
}

.sa-survey-formsingle-text-thumbs-rating {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px;
}

.sa-survey-formsingle-thumbs-icon {
  width: 24px;
  height: 24px;
}

.sa-survey-formsingle-thumbs-bar {
  width: 100%;
  height: 8px;
  border-radius: 100px;
}

.sa-survey-formsingle-text-thumbs-rating.thumbs-up
  .sa-survey-formsingle-thumbs-icon {
  background-image: url("thumbs-up.svg");
}

.sa-survey-formsingle-text-thumbs-rating.thumbs-down
  .sa-survey-formsingle-thumbs-icon {
  background-image: url("thumbs-down.svg");
}

.sa-survey-formsingle-text-thumbs-rating.thumbs-up
  .sa-survey-formsingle-thumbs-bar {
  background-color: green;
}

.sa-survey-formsingle-text-thumbs-rating.thumbs-down
  .sa-survey-formsingle-thumbs-bar {
  background-color: red;
}

/* CHECKBOX ( BACKUP / THUMBS ) */
.sa-survey-formsingle-checkbox-single-outer label {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}

.sa-survey-formsingle-checkbox-single-outer label:before {
  display: none !important;
}

.sa-survey-formsingle-checkbox-single-outer label:after {
  display: none !important;
}

.sa-survey-formsingle-checkbox-single-outer
  input:checked
  + label
  .sa-survey-formsingle-checkbox-single
  .sa-survey-formsingle-check:before {
  display: block;
  width: 24px;
  height: 24px;
  content: url("check.svg");
  position: absolute;
  top: 8px;
  left: 8px;
}

.sa-survey-formsingle-checkbox-single {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--sa-magenta-200);
  padding: 24px 32px;
  border-radius: 32px;
}

.sa-survey-formsingle-checkbox-single-outer
  label:hover
  .sa-survey-formsingle-check {
  background: #ebecf0;
}

.sa-survey-formsingle-checkbox-single h4 {
  margin: 0;
  margin-right: auto;
}

/* THUMBS */
.sa-survey-thumbs-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.sa-survey-thumbs-container div:focus {
  outline: 2px solid -webkit-focus-ring-color;
}

.sa-survey-thumbs-container input {
  width: 0;
  height: 0;
}

.sa-survey-thumbs-container label {
  width: 64px;
  height: 64px;
  background: var(--sa-white);
  border-radius: 8px;
  padding: 12px 8px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.sa-survey-thumbs-container label .sa-survey-formsingle-thumbs-up-icon {
  width: 24px;
  height: 24px;
  background-image: url("thumbs-up.svg");
}

.sa-survey-thumbs-container label .sa-survey-formsingle-thumbs-down-icon {
  width: 24px;
  height: 24px;
  background-image: url("thumbs-down.svg");
}

.sa-survey-thumbs-container label .sa-survey-formsingle-thumbs-bar {
  width: 100%;
  height: 8px;
  border-radius: 100px;
}

.sa-survey-thumbs-container label:hover {
  background: var(--sa-neutral-25);
}

.sa-survey-thumbs-container input:checked + label,
.sa-survey-thumbs-container input:focus + label {
  background: var(--sa-sub-primary);
}

.sa-survey-thumbs-container input:focus + label {
  outline: 2px solid -webkit-focus-ring-color;
}

.sa-survey-thumbs-container
  input:checked
  + label
  .sa-survey-formsingle-thumbs-up-icon,
.sa-survey-thumbs-container
  input:focus
  + label
  .sa-survey-formsingle-thumbs-up-icon {
  background-image: url("thumbs-up-white.svg");
}

.sa-survey-thumbs-container
  input:checked
  + label
  .sa-survey-formsingle-thumbs-down-icon,
.sa-survey-thumbs-container
  input:focus
  + label
  .sa-survey-formsingle-thumbs-down-icon {
  background-image: url("thumbs-down-white.svg");
}

.sa-survey-formsingle-thumbs-rating {
  width: 44px;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sa-survey-formsingle-checkbox-container.thumbs-up {
  background: var(--sa-green-200);
}

.sa-survey-formsingle-checkbox-container.thumbs-up
  .sa-survey-formsingle-thumbs-icon {
  width: 24px;
  height: 24px;
  background-image: url("thumbs-up.svg");
}

.sa-survey-formsingle-checkbox-container.thumbs-down
  .sa-survey-formsingle-thumbs-icon {
  width: 24px;
  height: 24px;
  background-image: url("thumbs-down.svg");
}

.sa-survey-formsingle-checkbox-container.thumbs-up
  .sa-survey-formsingle-thumbs-bar {
  width: 100%;
  height: 8px;
  border-radius: 100px;
  background: green;
}

.sa-survey-formsingle-checkbox-container.thumbs-down
  .sa-survey-formsingle-thumbs-bar {
  width: 100%;
  height: 8px;
  border-radius: 100px;
  background: red;
}

/* RATING */
.sa-survey-formsingle-rating {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-width: 150px;
}

@media screen and (max-width: 1199px) {
  .sa-survey-formsingle-rating {
    width: 100%;
  }

  .sa-survey-formsingle-rating p {
    font-size: 100% !important;
  }
}

.sa-survey-formsingle-rating p {
  margin: 0;
}

.sa-survey-formsingle-rating-unknown-width-s {
  min-width: 44px;
}

.sa-survey-formsingle-rating-unknown-width-l {
  min-width: 150px;
}

/* MISC COLORBAR */
.sa-survey-formsingle-color-bar {
  width: 112px;
  height: 8px;
  border-radius: 100px;
  margin: 0 auto;
}

@media screen and (max-width: 1199px) {
  .sa-survey-formsingle-color-bar.hide-mobile {
    display: none;
  }

  .formsingle-thumbs .sa-survey-formsingle-checkbox {
    flex-direction: column;
  }

  .sa-survey-thumbs-container,
  .sa-survey-thumbs-container > div {
    width: 100%;
  }

  .sa-survey-thumbs-container label {
    width: 100%;
  }
}

.sa-survey-formsingle-color-red {
  background: #e81147;
}

.sa-survey-formsingle-color-orange {
  background: #edaf64;
}

.sa-survey-formsingle-color-yellow {
  background: #ffef5c;
}

.sa-survey-formsingle-color-lightgreen {
  background: #b9d369;
}

.sa-survey-formsingle-color-green {
  background: #00994f;
}

/* BTN */
.sa-primary-button {
  border: none;
  background: var(--sa-sub-primary);
  border-radius: 100px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sa-white);
  min-width: 150px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0px 10px 20px 0px rgba(0, 11, 60, 0.15);
}

.sa-primary-button:focus {
  background: var(--sa-sub-primary-hover);
  color: var(--sa-white);
  outline: 1px auto -webkit-focus-ring-color;
}

.sa-primary-button:hover {
  background: var(--sa-sub-primary-hover);
  color: var(--sa-white);
}

.sa-primary-button:disabled {
  opacity: 0.3;
  color: var(--sa-white);
  cursor: not-allowed;
}

@media screen and (max-width: 1199px) {
  .sa-primary-button {
    width: 100%;
  }
}

/* Analog */
.sa-survey-formsingle-analog-inner-items {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  gap: 8px;
}

.sa-survey-formsingle-analog-item {
  width: 20%;
}

.sa-survey-formsingle-analog-item span {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  margin: 0 0 4px;
  align-items: center;
}

@media screen and (max-width: 1199px) {
  .sa-survey-formsingle-analog-inner-items {
    background: var(--sa-magenta-100);
    border-radius: 24px;
    padding: 24px;
    flex-direction: row;
  }

  .sa-survey-formsingle-analog-item .sa-survey-formsingle-color-bar {
    width: 100%;
  }
}