/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-3.use[2]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-3.use[4]!./src/scss/survey-tool.scss ***!
  \**************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Nunito:wght@400;600;800;900&family=Rajdhani:wght@600;700&display=swap);
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-3.use[2]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-3.use[4]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/js/survey-tool/components/AnimationBackground.vue?vue&type=style&index=0&id=5e7f259a&lang=scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.c-survey-animation {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.timeline-1 {
  background: linear-gradient(180deg, #2393ff 0%, #0ff 99.99%, #0ff 100%);
  height: 100%;
}
.timeline-1-animation-1 {
  position: absolute;
  display: flex;
  align-items: flex-start;
  height: 100vh;
  transition: all 3.5s ease;
  width: 100%;
}
.timeline-1-animation-1--up {
  transform: translateY(-30%);
}
.timeline-1-animation-1--up-and-out {
  transform: translateY(-100%);
}
.timeline-1-animation-2 {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateY(50%);
  transition: all 2.5s ease;
  width: 100%;
}
.timeline-1-animation-2--up {
  transform: translateY(-20%);
}
.timeline-1-animation-2--up-and-out {
  transform: translateY(-100%);
}
.timeline-1-animation-2 svg {
  width: 100%;
  height: auto;
}
.timeline-1-animation-3 {
  position: absolute;
  display: flex;
  align-items: flex-end;
  height: 100vh;
  transform: translateY(100%);
  width: 100%;
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-3.use[2]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-3.use[4]!./src/scss/survey-tool.scss (1) ***!
  \******************************************************************************************************************************************************************************************************************/
/*
	Link box style
	Use any element but put text in a <p> and if you want an arrow add a <span>
	eg: <a href="" class="readmore readmore__linkBox"><p>Text</p><span></span></a>
*/
/*
	Size in pixels, either 12, 8, or 6
	Angle will rotate the whole bracket, either 0 or 90
	Add styles for top, right, bottom, left etc. Margin is set to auto.
*/
/*
	Size in pixels (no px)
	Angle will rotate the whole bracket
*/
/**
 * Clearfix
 **/
/**
 * [Subtracts the border and padding from the width of the element.]
 */
/**
 * [scale description]
 * @param  {[int]} $zoom [The level of zoom you want on the element. eg: '1.1'.]
 */
/**
 * [Pass the angle you want the element to rotate. eg: 90deg. NOTE: You need to add 'deg' to the angle. eg: 90deg.]
 * @param  {[int with 'deg' appended]} $deg [The angle of the rotation]
 */
/**
 * [Rotate and vertically align element within a relatively positioned element. NOTE: You need to add 'deg' to the angle. eg: 90deg.]
 * @param  {[percentage]} $topPos [Pass the vertical position as a percetage. eg 50% will horizontally center align the element.]
 * @param  {[int with 'deg' appended]} $deg [The angle of the rotation]
 */
/**
 * [Rotate and horizontally align element within a relatively positioned element. NOTE: You need to add 'deg' to the angle. eg: 90deg.]
 * @param  {[percentage]} $topPos [Pass the vertical position as a percetage. eg 50% will horizontally center align the element.]
 * @param  {[int with 'deg' appended]} $deg [The angle of the rotation]
 */
/**
 * [Vertically align element within a relatively positioned element.]
 * @param  {[percentage]} $topPos [Pass the vertical position as a percetage. eg 50% will vertically center align the element.]
 */
/**
 * [Horizontally align element within a relatively positioned element.]
 * @param  {[percentage]} $leftPos [Pass the vertical position as a percetage. eg 50% will horizontally center align the element.]
 */
/**
 * [Horizontally and vertically align element within a relatively positioned element.]
 * @param  {[percentage]} $leftPos [Pass the horizontally position as a percetage. eg 50% will horizontally center align the element.]
 * @param  {[percentage]} $topPos [Pass the vertical position as a percetage. eg 50% will horizontally center align the element.]
 */
/**
 * [transition description]
 * @param  {[style]} $propertie [The style you want to animate. Defaults to 'all'.]
 * @param  {[int in seconds]} $time      [The speed at which you want the transition to take. Defaults to '0.3s'.]
 * @param  {[movement type]} $mode      [The type of movement you want eg: linear, ease, ease-in, ease-out. Defaults to 'linear'.]
 */
/**
 * Grid panels
 * Creates a grid of items that have a fixed height
 * @param $cols int = number of items per row
 * @param $col_gap percent = gap between items in each row (optional, defaults to 2%)
 * @param $row_gap percent = gap between row (optional, defaults to two times col_gap (4%))
 **/
/**
 * Ease between states
 * Use this to smooth hover/active/focus events
 **/
/**
 * Multi-column
 * @param $cols int = number of columns to span
 * @param $sum int = total number of columns
 * @param $gap mixed = gap between items (optional, defaults to 1rem)
 **/
/* String Replace */
/* Font Face */
@keyframes spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Fonts */
@font-face {
  font-family: "BetaSans";
  src: url("/_resources/app/client/assets/fonts/betasans-normal-webfont.eot?") format("eot"), url("/_resources/app/client/assets/fonts/betasans-normal-webfont.woff2") format("woff2"), url("/_resources/app/client/assets/fonts/betasans-normal-webfont.woff") format("woff"), url("/_resources/app/client/assets/fonts/betasans-normal-webfont.ttf") format("truetype"), url("/_resources/app/client/assets/fonts/betasans-normal-webfont.svg#BetaSans") format("svg");
  font-display: swap;
}
@font-face {
  font-family: "BetaSansBold";
  src: url("/_resources/app/client/assets/fonts/betasans-bold-webfont.eot?") format("eot"), url("/_resources/app/client/assets/fonts/betasans-bold-webfont.woff2") format("woff2"), url("/_resources/app/client/assets/fonts/betasans-bold-webfont.woff") format("woff"), url("/_resources/app/client/assets/fonts/betasans-bold-webfont.ttf") format("truetype"), url("/_resources/app/client/assets/fonts/betasans-bold-webfont.svg#BetaSansBold") format("svg");
  font-display: swap;
}
/* Breakpoints */
/**
 * Colours
 **/
/**
 * Map names to colours
 * @type {[type]}
 */
.black-text {
  color: #000000 !important;
}
.black-text a {
  color: #000000 !important;
}

.black_bg {
  background-color: #000000 !important;
}

.dark_blue-text {
  color: #10193F !important;
}
.dark_blue-text a {
  color: #10193F !important;
}

.dark_blue_bg {
  background-color: #10193F !important;
}

.white-text {
  color: #FFFFFF !important;
}
.white-text a {
  color: #FFFFFF !important;
}

.white_bg {
  background-color: #FFFFFF !important;
}

.yellow-text {
  color: #FDB930 !important;
}
.yellow-text a {
  color: #FDB930 !important;
}

.yellow_bg {
  background-color: #FDB930 !important;
}

.orange-text {
  color: #FD9030 !important;
}
.orange-text a {
  color: #FD9030 !important;
}

.orange_bg {
  background-color: #FD9030 !important;
}

.off_white-text {
  color: #ECECEC !important;
}
.off_white-text a {
  color: #ECECEC !important;
}

.off_white_bg {
  background-color: #ECECEC !important;
}

.light_grey-text {
  color: #BFBFBF !important;
}
.light_grey-text a {
  color: #BFBFBF !important;
}

.light_grey_bg {
  background-color: #BFBFBF !important;
}

.medium_grey-text {
  color: #8F8F8F !important;
}
.medium_grey-text a {
  color: #8F8F8F !important;
}

.medium_grey_bg {
  background-color: #8F8F8F !important;
}

.grey-text {
  color: #707070 !important;
}
.grey-text a {
  color: #707070 !important;
}

.grey_bg {
  background-color: #707070 !important;
}

.dark_grey-text {
  color: #313131 !important;
}
.dark_grey-text a {
  color: #313131 !important;
}

.dark_grey_bg {
  background-color: #313131 !important;
}

.charcoal-text {
  color: #282828 !important;
}
.charcoal-text a {
  color: #282828 !important;
}

.charcoal_bg {
  background-color: #282828 !important;
}

.light_yellow-text {
  color: rgba(253, 185, 48, 0.2) !important;
}
.light_yellow-text a {
  color: rgba(253, 185, 48, 0.2) !important;
}

.light_yellow_bg {
  background-color: rgba(253, 185, 48, 0.2) !important;
}

.light_orange-text {
  color: rgba(253, 144, 48, 0.2) !important;
}
.light_orange-text a {
  color: rgba(253, 144, 48, 0.2) !important;
}

.light_orange_bg {
  background-color: rgba(253, 144, 48, 0.2) !important;
}

.dark_orange-text {
  color: #FD6830 !important;
}
.dark_orange-text a {
  color: #FD6830 !important;
}

.dark_orange_bg {
  background-color: #FD6830 !important;
}

.burnt_orange-text {
  color: #c93f0b !important;
}
.burnt_orange-text a {
  color: #c93f0b !important;
}

.burnt_orange_bg {
  background-color: #c93f0b !important;
}

.red-text {
  color: red !important;
}
.red-text a {
  color: red !important;
}

.red_bg {
  background-color: red !important;
}

.stay_orange-text {
  color: #FC9232 !important;
}
.stay_orange-text a {
  color: #FC9232 !important;
}

.stay_orange_bg {
  background-color: #FC9232 !important;
}

.stay_blue-text {
  color: #6AB0C6 !important;
}
.stay_blue-text a {
  color: #6AB0C6 !important;
}

.stay_blue_bg {
  background-color: #6AB0C6 !important;
}

.sp-green-text {
  color: #087C37 !important;
}
.sp-green-text a {
  color: #087C37 !important;
}

.sp-green_bg {
  background-color: #087C37 !important;
}

.sp-gold-text {
  color: #FDB930 !important;
}
.sp-gold-text a {
  color: #FDB930 !important;
}

.sp-gold_bg {
  background-color: #FDB930 !important;
}

.sp-purple-text {
  color: #9D489B !important;
}
.sp-purple-text a {
  color: #9D489B !important;
}

.sp-purple_bg {
  background-color: #9D489B !important;
}

.sp-dark-purple-text {
  color: #7A4278 !important;
}
.sp-dark-purple-text a {
  color: #7A4278 !important;
}

.sp-dark-purple_bg {
  background-color: #7A4278 !important;
}

.sp-blue-text {
  color: #2393FF !important;
}
.sp-blue-text a {
  color: #2393FF !important;
}

.sp-blue_bg {
  background-color: #2393FF !important;
}

.sp-light_grey-text {
  color: #ECECEC !important;
}
.sp-light_grey-text a {
  color: #ECECEC !important;
}

.sp-light_grey_bg {
  background-color: #ECECEC !important;
}

.sp-medium_grey-text {
  color: #707070 !important;
}
.sp-medium_grey-text a {
  color: #707070 !important;
}

.sp-medium_grey_bg {
  background-color: #707070 !important;
}

.we-black-text {
  color: #000000 !important;
}
.we-black-text a {
  color: #000000 !important;
}

.we-black_bg {
  background-color: #000000 !important;
}

.we-white-text {
  color: #FFFFFF !important;
}
.we-white-text a {
  color: #FFFFFF !important;
}

.we-white_bg {
  background-color: #FFFFFF !important;
}

.we-yellow-text {
  color: #FDB930 !important;
}
.we-yellow-text a {
  color: #FDB930 !important;
}

.we-yellow_bg {
  background-color: #FDB930 !important;
}

.we-orange-text {
  color: #FD9030 !important;
}
.we-orange-text a {
  color: #FD9030 !important;
}

.we-orange_bg {
  background-color: #FD9030 !important;
}

/**
 * Retrieve colour from $colours map
 * @param  {string} $key [name of colour, as defined in $colours map]
 * @return hex colour
 */
/** 
 * Responsive rules
 * Creates @media wrappers
 **/
.vue-lottie-player {
  background: transparent !important;
}

.c-survey__wrapper {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #282828;
}
.c-survey__wrapper--transition {
  overflow: hidden;
  margin-right: calc(100vw - 100%);
}

.c-survey__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 95%;
  max-width: 1030px;
  margin: 2% auto 0;
  z-index: 100;
}
.c-survey__header--tool-logo {
  width: 100%;
  max-width: 500px;
}
.c-survey__header--tool-logo svg {
  width: 100%;
  height: auto;
  margin-left: -25px;
  margin-bottom: -75px;
}
@media (min-width: 768px) {
  .c-survey__header--tool-logo svg {
    margin-left: -45px;
    margin-bottom: -130px;
  }
}
.c-survey__header--we-logo {
  display: block;
  max-width: 250px;
}
.c-survey__header--we-logo svg {
  width: 100%;
  height: auto;
}

.c-survey__header + .c-survey__content {
  margin-top: 15px;
  padding-top: 65px;
}
@media (min-width: 768px) {
  .c-survey__header + .c-survey__content {
    padding-top: 110px;
  }
}

.c-survey__skip-button {
  background-color: #167ee3;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 8px 20px;
  text-transform: uppercase;
  color: white;
  font-size: 12px;
  font-weight: bold;
  margin-left: auto;
  margin-right: 15px;
}

.c-survey__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  flex-grow: 1;
  box-sizing: border-box;
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  overflow: hidden;
}

.c-survey__bg--green {
  background-color: #07774a;
}
.c-survey__bg--blue {
  background-color: #2393ff;
}
.c-survey__bg--yellow {
  background-color: #fbb82f;
}

.c-survey__content {
  width: 90%;
  max-width: 940px;
  margin: 3% auto 0;
  display: grid;
  flex-direction: column;
  grid-template-columns: 1fr;
  gap: 30px;
  z-index: 95;
  box-sizing: border-box;
}
.c-survey__content--padding {
  padding: 20px;
}
@media (min-width: 768px) {
  .c-survey__content--padding {
    padding: 45px;
  }
}
.c-survey__content--padding-ltr {
  padding: 20px 20px 0 20px;
}
@media (min-width: 768px) {
  .c-survey__content--padding-ltr {
    padding: 45px 45px 0 45px;
  }
}
.c-survey__content--white-bg {
  background: white;
}
.c-survey__content + .c-survey__content {
  margin-top: 30px;
}

.c-survey__content-spacer {
  margin-top: auto;
  min-height: 50px;
}

.c-survey__content-img svg {
  width: 100%;
  height: auto;
}

.c-survey__bar {
  margin-top: 3%;
}
.c-survey__bar + .c-survey__content {
  margin-top: 0;
}

.c-survey__bar-inner {
  width: 90%;
  max-width: 940px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px;
}
@media (min-width: 768px) {
  .c-survey__bar-inner {
    padding: 30px 45px;
  }
}

.c-survey__html {
  width: 100%;
}
.c-survey__html h1 {
  font-size: 28px;
  font-family: "Nunito";
}
@media (min-width: 768px) {
  .c-survey__html h1 {
    font-size: 48px;
  }
}
.c-survey__html h2 {
  font-size: 24px;
  font-family: "Nunito";
}
@media (min-width: 768px) {
  .c-survey__html h2 {
    font-size: 32px;
  }
}
.c-survey__html h3 {
  font-size: 20px;
  font-family: "Nunito";
}
@media (min-width: 768px) {
  .c-survey__html h3 {
    font-size: 28px;
  }
}
.c-survey__html p:first-of-type {
  margin-top: 0;
}
.c-survey__html > *:last-child {
  margin-bottom: 0;
}

div:not(.c-survey__content--white-bg) > .c-survey__html a {
  color: white;
  text-decoration: underline;
}

.c-survey__html--small {
  font-size: 80%;
}

.c-survey__grid {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 30px;
}
.c-survey__grid--page-one {
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .c-survey__grid--page-one {
    grid-template-columns: 1fr 3fr;
  }
}
.c-survey__grid--page-three {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .c-survey__grid--page-three {
    grid-template-columns: 2fr 1fr;
  }
}
.c-survey__grid--page-three-tokens {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .c-survey__grid--page-three-tokens {
    grid-template-columns: 2fr 1fr;
  }
}
.c-survey__grid--summary-choices {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .c-survey__grid--summary-choices {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.c-survey__grid--thankyou {
  grid-template-columns: 1fr 1fr;
}
.c-survey__grid--results {
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 768px) {
  .c-survey__grid--results {
    grid-template-columns: 2fr 1fr;
  }
}
.c-survey__grid--results-choices {
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 768px) {
  .c-survey__grid--results-choices {
    grid-template-columns: 2fr 3fr;
  }
}

@media (max-width: 767px) {
  .c-survey__page-one--cell-one {
    width: 200px;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .c-survey__page-one--cell-two {
    text-align: center;
  }
}

.c-survey__field-error {
  color: red;
  font-size: 0.8em;
  margin-top: 5px;
  font-weight: bold;
}

.c-survey__popup-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.c-survey__popup-modal .c-survey__popup-modal-content {
  background: #fff;
  padding: 30px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.c-survey__accordion {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
}

.c-survey__accordion-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.c-survey__accordion-item-header {
  padding: 10px 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  z-index: 2;
}
@media (min-width: 768px) {
  .c-survey__accordion-item-header {
    padding: 20px 40px;
  }
}

.c-survey__accordion-item-title {
  font-size: 18px;
  font-family: "Nunito";
}
@media (min-width: 768px) {
  .c-survey__accordion-item-title {
    font-size: 24px;
  }
}

.c-survey__accordion-indicator {
  margin-left: 20px;
}
.c-survey__accordion-indicator::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
@media (min-width: 768px) {
  .c-survey__accordion-indicator::after {
    width: 12px;
    height: 12px;
    border-top-width: 4px;
    border-right-width: 4px;
  }
}
.c-survey__accordion-indicator--active::after {
  transform: rotate(135deg);
}

.c-survey__accordion-item-content-wrapper {
  max-height: 500px; /* Adjust as necessary */
  overflow: hidden;
}

.c-survey__accordion-item-content {
  padding: 0 40px 20px 40px;
}

.c-survey__section-summary {
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.c-survey__remaining-tokens-wrapper {
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 10px;
}
.c-survey__remaining-tokens-wrapper--mobile {
  display: grid;
}
.c-survey__remaining-tokens-wrapper--desktop {
  display: none;
}
@media (min-width: 768px) {
  .c-survey__remaining-tokens-wrapper {
    padding-left: 40px;
  }
  .c-survey__remaining-tokens-wrapper--mobile {
    display: none;
  }
  .c-survey__remaining-tokens-wrapper--desktop {
    display: grid;
  }
}

.c-survey__remaining-tokens {
  width: 65px;
  height: 65px;
  font-family: "Nunito";
  border: 2px solid white;
  border-radius: 100em;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  font-weight: 900;
}

.c-survey__remaining-tokens-text {
  font-size: 16px;
}
@media (min-width: 768px) {
  .c-survey__remaining-tokens-text {
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .c-survey__page-three--spacer {
    display: none;
  }
}

.c-survey__page-three-animation--desktop {
  max-height: 60vh;
  display: none;
}
@media (min-width: 768px) {
  .c-survey__page-three-animation--desktop {
    display: block;
  }
}

.c-survey__page-three-animation--mobile {
  max-height: 60vh;
  width: 100%;
  display: block;
}
@media (min-width: 768px) {
  .c-survey__page-three-animation--mobile {
    display: none;
  }
}

.c-survey__content--page-four {
  position: relative;
}

.c-survey__page-four-image {
  margin: 0 auto;
  max-width: 200px;
}
@media (min-width: 768px) {
  .c-survey__page-four-image {
    position: absolute;
    left: -150px;
  }
}

.c-survey__token-buttons {
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 30px;
}
.c-survey__token-buttons--desktop {
  display: none;
}
.c-survey__token-buttons--mobile {
  display: grid;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .c-survey__token-buttons--desktop {
    display: grid;
  }
  .c-survey__token-buttons--mobile {
    display: none;
  }
}

.c-survey__token-button {
  width: 65px;
  height: 65px;
  border: 2px solid white;
  border-radius: 100em;
  background-color: transparent;
  overflow: hidden;
  cursor: pointer;
}

.c-survey__token-allocation-count {
  font-family: "Nunito";
  font-size: 60px;
  font-weight: 900;
}

.c-survey__icon {
  width: 100%;
  height: 100%;
}
.c-survey__icon--minus::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNDMyIDI1NmMwIDE3LjctMTQuMyAzMi0zMiAzMkw0OCAyODhjLTE3LjcgMC0zMi0xNC4zLTMyLTMyczE0LjMtMzIgMzItMzJsMzUyIDBjMTcuNyAwIDMyIDE0LjMgMzIgMzJ6Ii8+PC9zdmc+");
  background-position: center;
  background-repeat: no-repeat;
}
.c-survey__icon--plus::before {
  content: "";
  display: block;
  position: relative;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjU2IDgwYzAtMTcuNy0xNC4zLTMyLTMyLTMycy0zMiAxNC4zLTMyIDMyVjIyNEg0OGMtMTcuNyAwLTMyIDE0LjMtMzIgMzJzMTQuMyAzMiAzMiAzMkgxOTJWNDMyYzAgMTcuNyAxNC4zIDMyIDMyIDMyczMyLTE0LjMgMzItMzJWMjg4SDQwMGMxNy43IDAgMzItMTQuMyAzMi0zMnMtMTQuMy0zMi0zMi0zMkgyNTZWODB6Ii8+PC9zdmc+");
  background-position: center;
  background-repeat: no-repeat;
}

.c-survey__choice-wrapper {
  padding: 15px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  text-align: center;
  margin-bottom: auto;
}

.c-survey__choice-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .c-survey__choice-content {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

.c-survey__choice-image {
  margin: 10px auto;
  width: 200px;
  max-width: 100%;
  height: auto;
}

.c-survey__choice-tokens {
  width: 65px;
  height: 65px;
  font-family: "Nunito";
  border: 2px solid white;
  border-radius: 100em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.c-survey__results-total-wrapper {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .c-survey__results-total-wrapper {
    grid-template-columns: auto;
    text-align: center;
  }
}

.c-survey__results-total-circle {
  width: 65px;
  height: 65px;
  font-family: "Nunito";
  border: 2px solid black;
  border-radius: 100em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.c-survey__action-message {
  width: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  font-style: italic;
  z-index: 10;
  margin: 0 auto 0 0;
}
.c-survey__action-message--center {
  margin: 0 auto;
}
.c-survey__action-message--right {
  margin: 0 0 0 auto;
}
.c-survey__action-message--white {
  color: white;
}

.c-survey__actionbutton-row {
  width: auto;
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  z-index: 10;
  margin: 0 auto 0 0;
}
.c-survey__actionbutton-row--center {
  margin: 0 auto;
}
.c-survey__actionbutton-row--right {
  margin: 0 0 0 auto;
}

.readmore__linkBox--arrow-left {
  padding: 10px 19px 9px 35px !important;
}
.readmore__linkBox--arrow-left span {
  left: 0 !important;
  right: unset !important;
  transform: rotate(180deg) !important;
}
.readmore__linkBox--arrow-down span {
  transform: rotate(90deg) !important;
}
.readmore__linkBox--arrow-up {
  padding: 10px 19px 9px 35px !important;
}
.readmore__linkBox--arrow-up span {
  left: 0 !important;
  right: unset !important;
  transform: rotate(270deg) !important;
}
.readmore__linkBox--muted::after {
  border-color: #ECECEC transparent transparent transparent;
}
.readmore__linkBox--disabled {
  cursor: not-allowed;
  filter: grayscale(50%);
  opacity: 0.25;
}
.readmore__linkBox--disabled:hover::after {
  width: 5px !important;
}
.readmore__linkBox--red::after {
  border-color: #c62a53 transparent transparent transparent;
}
.readmore__linkBox--green::after {
  border-color: #04b776 transparent transparent transparent;
}

.c-survey__thankyou-content-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.c-survey__email-consent-wrapper {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
}
.c-survey__email-consent-wrapper input {
  width: auto;
  margin-bottom: auto;
}

.c-survey__results-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media (max-width: 767px) {
  .c-survey__results-animation {
    display: none;
  }
}

.c-survey__footer {
  margin-top: auto;
  padding: 10px 45px;
  background-color: black;
}

.c-survey__footer-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8em;
}
.c-survey__footer-inner p {
  color: rgba(255, 255, 255, 0.8);
}
.c-survey__footer-inner a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
}
.c-survey__footer-inner a:hover {
  opacity-color: rgb(255, 255, 255);
}

/* Vertical */
/* Horizontal */
.fade-right-enter-active,
.fade-right-leave-active {
  transition: all 2.5s ease;
}

.fade-right-leave-to {
  transform: translateX(100vw) !important;
}

.fade-right-enter {
  transform: translateX(-100vw) !important;
}

.fade-left-enter-active,
.fade-left-leave-active {
  transition: all 2.5s ease;
}

.fade-left-leave-to {
  transform: translateX(-100vw) !important;
}

.fade-left-enter {
  transform: translateX(100vw) !important;
}

/*# sourceMappingURL=survey-tool.css.map*/