.survey {
  box-sizing: border-box;
  color: var(--textColor);
  background: var(--surveyBackgroundColor);
  padding: 0.5rem;
  max-width: 100vw;
}
@media screen and (min-width: 768px) {
  .survey {
    max-width: 766px;
    margin: 0 auto;
    border: 1px solid var(--borderColor);
    border-radius: 6px;
    box-shadow: 0 5px 8px var(--borderColor);
    padding: 1em;
  }
}
.survey h2 {
  margin: 0.8rem 0;
  font-size: 1.5rem;
}
.survey p {
  line-height: 1.5;
  margin: 1em 0;
}
.survey a {
  color: var(--linkColor);
}
.survey h2,
.survey h3 {
  color: var(--headerColor);
}
.survey table {
  border-collapse: collapse;
}
.survey td,
.survey th {
  padding: 0.5em;
  border: 1px solid var(--borderColor);
}
.survey__content {
  margin-bottom: 1em;
  text-align: left;
}
.survey__content-wrapper .text {
  padding: 0 0.5em;
}
.survey__content:last-of-type {
  margin-bottom: 0;
}
.survey__content .intro {
  padding: 0.5em;
}
.survey__buttons {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
}
.survey__buttons--center,
.survey__buttons--left,
.survey__buttons--right {
  flex: 1 1 33%;
}
.survey__buttons--center > .button,
.survey__buttons--left > .button,
.survey__buttons--right > .button {
  min-width: 80px;
}
.survey__buttons--center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.survey__buttons--right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.survey__errors {
  color: var(--inputErrorColor);
  text-align: center;
}
.survey__disclaimer {
  font-size: 0.8rem;
}
.survey .survey__content .intro {
  padding: 0 0.5rem;
}
.survey .survey__content .intro .intro__message {
  padding: 0;
}
.survey .slide {
  display: flex;
  justify-content: space-around;
}

.button {
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.5em 1em;
  color: black;
  background: white;
  border-radius: 6px;
  border: 1pt solid white;
  transition: filter 300ms ease-in;
}
.button[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}
.button[disabled]:hover,
.button[disabled]:active {
  filter: none;
}
.button:hover {
  filter: brightness(1.1);
}
.button:active {
  filter: brightness(0.9);
}
.button:focus {
  text-decoration: underline;
}
.button.inline {
  background: none;
  color: inherit;
  text-decoration: underline;
}
.survey .button {
  color: var(--buttonTextColor);
  background: var(--buttonColor);
  border-radius: var(--cornerRadius);
  border: 1pt solid var(--buttonColor);
}
.survey .button--decline {
  background-color: var(--declineButtonColor);
  color: var(--declineButtonTextColor);
}
.survey .button--accept {
  background-color: var(--acceptButtonColor);
  color: var(--acceptButtonTextColor);
}

.input {
  position: relative;
  padding: 0.5rem;
  border: 1pt solid transparent;
  border-radius: 6px;
}
.input ::-moz-placeholder {
  opacity: 0.4;
}
.input ::placeholder {
  opacity: 0.4;
}
.input[data-error='true'] {
  border-color: var(--inputErrorColor);
}
.input__description,
.input__disclaimer,
.input__label {
  margin: 0 0 0.5rem;
}
.input__label {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.input__required {
  margin-left: 0.2em;
}
.input__question {
  color: var(--questionColor);
  font-weight: bold;
  font-size: 1.25rem;
  line-height: 1.5rem;
  letter-spacing: -0.01rem;
  flex: 1;
}
.input__error {
  font-size: 0.9rem;
  margin-left: 1em;
}
.input__disclaimer {
  font-style: italic;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
.input__description {
  color: var(--descriptionColor);
  font-style: normal;
  line-height: 1.3rem;
}
.input legend {
  float: left;
  width: 100%;
}
.input legend + * {
  clear: both;
}
.toggles .input__label {
  margin-bottom: 0.8em;
}
.toggles .input__question {
  font-size: 1.3rem;
}

.text-field {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--inputBackgroundColor);
  color: var(--inputTextColor);
  border: 1pt solid var(--inputBorderColor);
  border-radius: 6px;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5em 1em;
  font: normal 1em 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

.thank-you-message {
  margin-bottom: 1em;
}
.client-panel {
  border-top: 1px solid var(--borderColor);
  margin-top: 2em;
  padding-top: 1em;
}
.client-panel .input {
  margin-bottom: 10px;
}
.client-panel__button-container {
  display: flex;
  justify-content: flex-end;
  gap: 1em;
}

.intro__buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 1em;
  gap: 1em;
}
.intro__buttons > .button {
  flex: 1;
}
.intro .survey__disclaimer {
  margin-top: 2em;
  margin-bottom: 1em;
  border-bottom: 1px solid var(--borderColor);
}

.is-preview .survey {
  padding-top: 3.5em;
}
.preview-banner {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: #6A3A99;
  color: white;
  padding: 0.5em;
  z-index: 1;
  display: flex;
  gap: 0.5em;
  align-items: center;
  flex-wrap: wrap;
}
.preview-banner__title {
  flex-grow: 1;
}
.preview-banner .button {
  padding: 0.2em 0.5em;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .preview-banner .button {
    padding: 0.5em 1em;
  }
}
.preview-banner .select {
  padding: 0.2em 1.5em 0.2em 0.5em;
  background-position: calc(100% - 0.75em) 50%, calc(100% - (0.75em - 5px)) 50%;
}
@media screen and (min-width: 768px) {
  .preview-banner .select {
    padding: 0.5em 2em 0.5em 1em;
    background-position: calc(100% - 1em) 50%, calc(100% - (1em - 5px)) 50%;
  }
}
.modal .preview-banner {
  padding-right: 45px;
}

.select {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  font-size: 1rem;
  color: black;
  background-color: white;
  border: 1pt solid white;
  border-radius: 6px;
  padding: 0.5em 2em 0.5em 1em;
  background-image: linear-gradient(45deg, transparent 50%, black 50%), linear-gradient(135deg, black 50%, transparent 50%);
  background-position: calc(100% - 1em) 50%, calc(100% - (1em - 5px)) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.select[disabled] {
  opacity: 0.25;
}
.survey .select {
  width: 100%;
  color: var(--inputTextColor);
  background-color: var(--inputBackgroundColor);
  border: 1pt solid var(--inputBorderColor);
  background-image: linear-gradient(45deg, transparent 50%, var(--inputBorderColor) 50%), linear-gradient(135deg, var(--inputBorderColor) 50%, transparent 50%);
}

.survey-header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 30px;
}
.survey-header--hidden-title {
  padding: 0;
  margin: 0;
  width: 0;
  height: 0;
  display: block;
  overflow: hidden;
}

.survey-footer {
  margin: 1em -0.5em -0.5em;
  padding: 0.5em;
  border-top: 1px solid var(--borderColor);
  background-color: rgba(0, 0, 0, 0.05);
}
.survey-footer p {
  margin: 0.5em 0;
}
.survey-footer .powered-by-extellio {
  display: flex;
  justify-content: center;
  color: var(--linkColor);
  margin-top: 1em;
}
@media screen and (min-width: 768px) {
  .survey-footer {
    margin: 1em -1em -1em;
    padding: 1em;
  }
}

.progress__step-number {
  font-size: 0.8rem;
  margin-top: 4px;
  padding-left: 2px;
  color: var(--descriptionColor);
}
.progress__outer,
.progress__inner {
  border-radius: 10px;
  height: 8px;
}
.progress__outer {
  display: flex;
  align-items: center;
  background: var(--progressBarBackgroundColor);
}
.progress__inner {
  background: var(--progressBarColor);
  margin: 0;
  transition: width 300ms ease-in;
}

.radio input[type="radio"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
.radio input[type="radio"]:checked + .radio-button .radio-button__outer-circle {
  border-color: var(--inputSelectedBorderColor);
}
.radio input[type="radio"]:checked + .radio-button .radio-button__outer-circle > .radio-button__inner-circle {
  transform: scale(1);
  opacity: 1;
}
.radio input[type="radio"]:focus + .radio-button {
  outline: 1pt dashed var(--inputFocusColor);
  outline-offset: 2pt;
}
.radio .radio-button {
  margin: 0.3em 0;
  display: inline-block;
  cursor: pointer;
}
.radio .radio-button__outer-circle {
  width: calc(1em + 1pt);
  height: calc(1em + 1pt);
  border-radius: 50%;
  border: 1pt solid var(--inputBorderColor);
  background-color: var(--inputBackgroundColor);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 300ms ease-in;
}
.radio .radio-button__inner-circle {
  width: 0.5em;
  height: 0.5em;
  background-color: var(--inputSelectedBackgroundColor);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: transform 300ms ease-in;
}
.radio .radio-button__label {
  padding: 0 8px;
}
.radio .radio-button:hover > .radio-button__outer-circle {
  border-color: var(--inputSelectedBorderColor);
}

.toggle-buttons.responsive {
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
  -moz-column-count: auto;
       column-count: auto;
  -moz-column-width: 300px;
       column-width: 300px;
}
.toggle-buttons label {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
  padding: 0.5em 1em;
  cursor: pointer;
  box-sizing: border-box;
  min-height: 32px;
  border: 1pt solid var(--inputBorderColor);
  color: var(--inputTextColor);
  border-radius: var(--cornerRadius);
  background: var(--inputBackgroundColor);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}
.toggle-buttons label:last-child {
  margin-bottom: 0;
}
.toggle-buttons input {
  opacity: 0;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
}
.toggle-buttons input:checked + label {
  color: var(--inputSelectedTextColor);
  background: var(--inputSelectedBackgroundColor);
  border-color: var(--inputSelectedBorderColor);
}
.toggle-buttons input:focus + label {
  outline: 1pt dashed var(--inputFocusColor);
  outline-offset: 2pt;
}

.checkboxes .checkbox {
  margin: 0.3em 0;
  cursor: pointer;
  display: inline-block;
}
.checkboxes .checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 1em;
  width: 1em;
  border: 1pt solid var(--inputBorderColor);
  border-radius: 6px;
  background-color: var(--inputBackgroundColor);
}
.checkboxes .checkbox__checkmark {
  opacity: 0;
  height: 0.6em;
  width: 0.3em;
  border-bottom: 1pt solid var(--inputBackgroundColor);
  border-right: 1pt solid var(--inputBackgroundColor);
  transform: scale(0);
  transition: transform 300ms ease-in;
}
.checkboxes .checkbox__label {
  padding: 0 8px;
}
.checkboxes .checkbox:hover .checkbox__box {
  border-color: var(--inputSelectedBorderColor);
}
.checkboxes input[type="checkbox"] {
  opacity: 0;
  z-index: -1;
  position: absolute;
}
.checkboxes input[type="checkbox"]:checked + .checkbox .checkbox__box {
  border-color: var(--inputSelectedBorderColor);
  background: var(--inputSelectedBackgroundColor);
}
.checkboxes input[type="checkbox"]:checked + .checkbox .checkbox__box > .checkbox__checkmark {
  opacity: 1;
  transform: rotate(45deg) scale(1) translate(-1px, -1px);
}
.checkboxes input[type="checkbox"]:focus + label {
  outline: 1pt dashed var(--inputFocusColor);
  outline-offset: 2pt;
}

.sentiments {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
}
.sentiments .sentiment {
  flex: 1;
  margin: 0.2rem;
  transition: background 300ms ease-in;
  color: var(--inputBorderColor);
  padding: 0.3em;
  border: 1pt solid var(--inputBorderColor);
  color: var(--inputTextColor);
  border-radius: var(--cornerRadius);
  background: var(--inputBackgroundColor);
}
.sentiments .sentiment label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  font-size: 2rem;
}
.sentiments .sentiment--selected {
  color: var(--inputSelectedTextColor);
  background: var(--inputSelectedBackgroundColor);
  border-color: var(--inputSelectedBorderColor);
}
.sentiments .sentiment:hover {
  border-color: var(--inputSelectedBorderColor);
}
.sentiments .sentiment input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
.sentiments .sentiment input:focus + label {
  outline: 1pt dashed var(--inputFocusColor);
  outline-offset: calc(0.3rem + 3pt);
}
.sentiments .sentiment__label {
  margin-top: 4px;
  font-size: 0.8rem;
}

.thumbs {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
}
.thumbs > div label {
  margin: 0.2rem;
  transition: background 300ms ease-in;
  color: var(--inputBorderColor);
  padding: 0.3em;
  border: 1pt solid var(--inputBorderColor);
  color: var(--inputTextColor);
  border-radius: var(--cornerRadius);
  background: var(--inputBackgroundColor);
  font-size: 2rem;
}
.thumbs > div label:hover {
  border-color: var(--inputSelectedBorderColor);
}
.thumbs > div input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
.thumbs > div input:checked + label {
  background: var(--inputSelectedBackgroundColor);
  border-color: var(--inputSelectedBorderColor);
}
.thumbs > div input:focus + label {
  transition: none;
  outline: 1pt dashed var(--inputFocusColor);
  outline-offset: 2pt;
}

.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}

@keyframes sideToside {
  0%,
  100% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(150%);
  }
}
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}
.loading__bar {
  animation: sideToside 2s ease-in-out infinite;
  background-color: #1a2f55;
  height: 100%;
  border-radius: 4px;
  position: absolute;
  width: 50%;
}
.loading__container {
  height: 6px;
  width: 18em;
  margin: 0 1em;
  overflow: hidden;
  position: relative;
  border-radius: 4px;
}

body {
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  line-height: 1.15;
  background: var(--surveyBackgroundColor);
  margin: 0;
  padding: 0;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}
body.standalone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
}
@media screen and (min-width: 768px) {
  body {
    background: var(--pageBackgroundColor);
    padding: 0.5em;
  }
  body.standalone {
    padding: 1rem;
  }
}
svg {
  fill: currentColor;
}
.a11y-labels {
  display: none;
}