.step {
    display: none;    
}

.question-info {
  background: #dedede;
  padding: 1.5rem 3rem;
  margin-bottom: 1rem;
}

.question-title {
  display: none;
}


.question-text {
    font-size: 20px;
}

.answer-detail {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.answer-text {
  height: 100%;
}

.answer-info label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  width: 100%;
}

.answer-info {
  flex: 1 0 20rem;
  box-sizing: border-box;
  max-width: 20rem;
}

.answer-detail input[type="radio"] {
  position: absolute;
  top: 4px;
  left: 6px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  border: 2px solid #00b0db;
  transition: 0.2s all linear;
}

.answer-detail input[type="radio"]:hover {
background: 00b0db;

}

.answer-detail input[type="checkbox"] {
position: absolute;
top: 10px;
left: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border: 2px solid #999;
transition: 0.2s all linear;
background: #e8e7f0;
}

.answer-detail input:checked {
background: #00b0db;
}

.section-title-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.section-title {
  font-size: var(--text-h1-size);
  font-weight: var(--font-weight-bold);
}

.question-info [data-role="content"] {
  margin-top: 1rem;
}

.step.active {
    display: block;
}

.answer-content-wrapper {
  display: flex;
  position: relative;
  border: 2px solid #222;
  border-radius: .5rem;
  padding: 3rem;
  height: calc(100% - 6rem);
  background: #fff;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.answer-content-wrapper img {
  padding-bottom: 1rem;
}

p.caption {
  margin-bottom: 0;
}

.action-complete {
  font-size: 1.2rem;
  font-weight: bold;
}

.survey-step-detail {
  margin: 2rem 0;
}

.progress-bar.eight-steps {
  grid-template-columns: repeat(7, 1fr) 50px;
}

.progress-bar.six-steps {
  grid-template-columns: repeat(5, 1fr) 50px;
}

.end svg {
    background: #ffffff;
    padding: 9px;
    border-radius: 22px;
}

.progress-bar > div {
    position: relative;
    top: 2px;
}

.progressbar_step {
  height: 100%;
  display: flex;
  align-items: center;
}

.progress-bar > div:first-child {
    position: relative;
}

.progress-bar circle {
    fill: #6E06C1;
    stroke-width: 3;
    stroke: #6E06C1;
    cx: 10px;
    transition: all 0.3s ease-in-out 0s;
}

.progress-bar a:hover circle,
.progress-bar .current {
  fill: #ffffff;
  stroke-width: 3;
}

.progress-bar a:hover circle,
.progress-bar .current circle {
    fill: #ffffff;
    r: 12px;
    cx: 14px;
}

.progress-bar a:hover circle {
  transform: translate(-2px, 0px);
}

img.info-circle {
    height: 20px;
    vertical-align: sub;
    padding-left: 2px;
}

.progress-bar svg:not(:root) {
  overflow: visible;
}

.buttons-wrapper {
  margin: 0 4rem;
}

circle,
rect {
  width: 28px;
  height: 28px;
  fill: #ffffff;
  stroke-width: 3;
  stroke: #707070;
}

.progress-bar svg,
.answer-item svg {
  width: 28px;
  height: 28px;
}

circle {
    stroke: #707070;
    cx: 14px;
    cy: 14px;
    r: 8px;
}

.question-info [data-role="collapsible"] {
  position: relative;
  z-index: 1;
}

span.ui-icon-circle-plus:after,
span.ui-icon-circle-minus:after {
  position: absolute;
  right: 1rem;
  font-size: var(--text-h2-size);
  z-index: -1;
}

span.ui-icon-circle-minus:after {
  content: "-";
}

span.ui-icon-circle-plus:after {
  content: "+";

}

.buttons-wrapper {
  margin: 0;
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  align-items: center;
}

a.quiz_launcher_section {
  text-transform: lowercase;
  font-size: var(--text-small-size);
}

@media only screen and (min-width: 768px) {
  .question-detail {
    margin: 2rem 6rem;
  }

  #surveyform .buttons-wrapper {
    margin: 0 6rem;
    display: flex;
    justify-content: space-between;
}

}

/* Progress bar */

.progress-bar {
  display: grid;
  align-items: center;
  margin: 0;
  grid-template-columns: repeat(1, 1fr) !important; 
}

#survey_progress_bar a {
  display: flex;
  margin: .5rem;
  padding: .5rem;
  align-items: center;
  line-height: 1.2;
  gap: 1rem;
}

#progress_step_1 a {
  background: none !important;
}

#survey_progress_bar .end {
  border: 1px solid var(--color-branding-primary);
  text-align: center;
  height: calc(100% - 2px);
  display: flex;
  justify-content: center;
  align-items: center;
}

#survey_progress_bar .end svg {
  fill: var( --color-branding-primary);
}

.progressbar_step.section-1 { background:var(--color-section-1-background); }
.progressbar_step.section-1 svg { fill:var(--color-section-1-foreground); }
.progressbar_step.section-1 a { color:var(--color-section-1-text); }

.progressbar_step.section-2 { background:var(--color-section-2-background); }
.progressbar_step.section-2 svg { fill:var(--color-section-2-foreground); }
.progressbar_step.section-2 a { color:var(--color-section-2-text); }

.progressbar_step.section-3 { background:var(--color-section-3-background); }
.progressbar_step.section-3 svg { fill:var(--color-section-3-foreground); }
.progressbar_step.section-3 a { color:var(--color-section-3-text); }

.progressbar_step.section-4 { background:var(--color-section-4-background); }
.progressbar_step.section-4 svg { fill:var(--color-section-4-foreground); }
.progressbar_step.section-4 a { color:var(--color-section-4-text); }

.progressbar_step.section-5 { background:var(--color-section-5-background); }
.progressbar_step.section-5 svg { fill:var(--color-section-5-foreground); }
.progressbar_step.section-5 a { color:var(--color-section-5-text); }

.progressbar_step.section-6 { background:var(--color-section-6-background); }
.progressbar_step.section-6 svg { fill:var(--color-section-6-foreground); }
.progressbar_step.section-6 a { color:var(--color-section-6-text); }

.progressbar_step.section-7 { background:var(--color-section-7-background); }
.progressbar_step.section-7 svg { fill:var(--color-section-7-foreground); }
.progressbar_step.section-7 a { color:var(--color-section-7-text); }

.progressbar_step.section-8 { background:var(--color-section-8-background); }
.progressbar_step.section-8 svg { fill:var(--color-section-8-foreground); }
.progressbar_step.section-8 a { color:var(--color-section-8-text); }

.progressbar_step.section-9 { background:var(--color-section-9-background); }
.progressbar_step.section-9 svg { fill:var(--color-section-9-foreground); }
.progressbar_step.section-9 a { color:var(--color-section-9-text); }

.progressbar_step.section-10 { background:var(--color-section-10-background); }
.progressbar_step.section-10 svg { fill:var(--color-section-10-foreground); }
.progressbar_step.section-10 a { color:var(--color-section-10-text); }


@media only screen and (min-width: 950px) {

  .progress-bar {
    display: grid;
    align-items: center;
    margin: 0 6rem;
    grid-template-columns: repeat(5, 1fr) !important;
  }

  #surveyform .buttons-wrapper {
    margin: 0 6rem 5rem;
  }

}

/* Survey questions */

#section-1 .question-info { background:var(--color-section-1-background); }
#section-2 .question-info { background:var(--color-section-2-background); }
#section-3 .question-info { background:var(--color-section-3-background); }
#section-4 .question-info { background:var(--color-section-4-background); }
#section-5 .question-info { background:var(--color-section-5-background); }
#section-6 .question-info { background:var(--color-section-6-background); }
#section-7 .question-info { background:var(--color-section-7-background); }
#section-8 .question-info { background:var(--color-section-8-background); }
#section-9 .question-info { background:var(--color-section-9-background); }
#section-10 .question-info { background:var(--color-section-10-background); }



/* Survey Home */

.section.s1 { background: var(--color-section-1-background);}
.section.s1 svg { fill: var(--color-section-1-foreground);}
.section.s1 a { color:  var(--color-section-1-text);}

.section.s2 { background: var(--color-section-2-background);}
.section.s2 svg { fill: var(--color-section-2-foreground);}
.section.s2 a { color:  var(--color-section-2-text);}

.section.s3 { background: var(--color-section-3-background);}
.section.s3 svg { fill: var(--color-section-3-foreground);}
.section.s3 a { color:  var(--color-section-3-text);}

.section.s4 { background: var(--color-section-4-background);}
.section.s4 svg { fill: var(--color-section-4-foreground);}
.section.s4 a { color:  var(--color-section-4-text);}

.section.s5 { background: var(--color-section-5-background);}
.section.s5 svg { fill: var(--color-section-5-foreground);}
.section.s5 a { color:  var(--color-section-5-text);}

.section.s6 { background: var(--color-section-6-background);}
.section.s6 svg { fill: var(--color-section-6-foreground);}
.section.s6 a { color:  var(--color-section-6-text);}

.section.s7 { background: var(--color-section-7-background);}
.section.s7 svg { fill: var(--color-section-7-foreground);}
.section.s7 a { color:  var(--color-section-7-text);}

.section.s8 { background: var(--color-section-8-background);}
.section.s8 svg { fill: var(--color-section-8-foreground);}
.section.s8 a { color:  var(--color-section-8-text);}

.section.s9 { background: var(--color-section-9-background);}
.section.s9 svg { fill: var(--color-section-9-foreground);}
.section.s9 a { color:  var(--color-section-9-text);}

.section.s10 { background: var(--color-section-10-background);}
.section.s10 svg { fill: var(--color-section-10-foreground);}
.section.s10 a { color:  var(--color-section-10-text);}

.section-action {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
}

/* Modal */

.modal-popup .modal-inner-wrap {
  max-width: 60rem;
}

.modal-popup .modal-inner-wrap ul {
  padding-left: 2rem;
}

div.modal-content {
  padding-bottom: 3rem;
}

.modal-popup .modal-header {
  padding-top: 2rem;
}

.modal-popup .section-action {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#information-modal h2 {
  margin-top: 0;
  display: inline-block;
  border-bottom: var(--color-branding-primary) .5rem solid;
  padding-bottom: .5rem;
}

#information-modal .section-1 h2 {border-bottom: var(--color-section-1-background) .5rem solid;}
#information-modal .section-2 h2 {border-bottom: var(--color-section-2-background) .5rem solid;}
#information-modal .section-3 h2 {border-bottom: var(--color-section-3-background) .5rem solid;}
#information-modal .section-4 h2 {border-bottom: var(--color-section-4-background) .5rem solid;}
#information-modal .section-5 h2 {border-bottom: var(--color-section-5-background) .5rem solid;}
#information-modal .section-6 h2 {border-bottom: var(--color-section-6-background) .5rem solid;}
#information-modal .section-7 h2 {border-bottom: var(--color-section-7-background) .5rem solid;}
#information-modal .section-8 h2 {border-bottom: var(--color-section-8-background) .5rem solid;}
#information-modal .section-9 h2 {border-bottom: var(--color-section-9-background) .5rem solid;}
#information-modal .section-10 h2 {border-bottom: var(--color-section-10-background) .5rem solid;}

/* Product grid */

.product-items {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  justify-items: center;
  gap: 2rem;
}

li.item.product.product-item {
  width: 100%;
  margin: 0;
  padding: 0;
}

.product-item-info {
  max-width: 100%;
  width: 100%;
  text-align: center;
  padding: 0;
}

.product-items {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  justify-items: center;
  gap: 2rem;
}


@media only screen and (min-width: 480px) {
  .product-items {
    grid-template-columns: 1fr 1fr;
  }

}


@media only screen and (min-width: 768px) {
  .product-items {
    grid-template-columns: 1fr 1fr 1fr;
  }

}

@media only screen and (min-width: 950px) {
  .product-items {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

}