/* Questionnaire */
.questionnaire .cards {
  grid-template-columns: repeat(auto-fit, 82vw);
  align-items: center;
}

.questionnaire .card {
  cursor: pointer;
  min-height: 5rem;
  height: 75%;
  background: #FAFAFA;
  margin: 0;
}

.questionnaire .g-recaptcha {
  margin-left: 0;
}


.questionnaire .cards input[type="radio"], .questionnaire .cards input[type="checkbox"] {
  display: none;
}

.questionnaire ul {
  list-style-type: none;
}

.questionnaire article { padding: 1rem 0.5rem; border-bottom: 0.2rem solid #F9F9F9;}
.questionnaire article:nth-child(even) { background-color: #FAFAFA;}

.questionnaire section { margin-bottom: 4rem; }
.questionnaire { counter-reset: section;}

.questionnaire h3 {  font-size: 1.05rem; margin-top: 2rem;};

.questionnaire h3::before {
  display: inline-block;
  margin-right: 0.5rem;
  text-align: center;
  font-weight: bold;
  counter-increment: section;
  content: counter(section);
  height: 1.4rem;
  width: 1.4rem;
  line-height: 1.4rem;
  font-size: 0.9rem;
  -moz-border-radius: 50%;
  border-radius: 50%;

  border: 0.15rem solid black;
  color: black;
}


.questionnaire input[type="text"] {
  margin-top: 1.2rem;
  opacity: 1;
}


.vdp-email label {
  font-weight: normal;
}

.questionnaire label {
  margin: initial;
}

.questionnaire input[type="email"] {
  max-width: 80%;
  opacity: 1;
}


.questionnaire label.card {
  min-width: initial;
}

.questionnaire .cards input[type="radio"]:checked + .card, .questionnaire .cards input[type="checkbox"]:checked + .card {
  background-color: #0044aa;
  color: white;
  opacity: 1;
      }

.questionnaire input[type="radio"]:checked + label::after {
  content: "";
}


/* to avoid switch overflow */
.questionnaire .card p {
  text-align: left;
  width: 60%;
  font-size: 1rem;
}

.questionnaire .cards em {
  font-size: 1rem;
}
.questionnaire .card em {
  font-size: 0.95rem;
}

/* Questionnaire Range Slider */
form .choice-slider {
  grid-column: span auto;
  display: flex;
  flex-direction: row;
  align-content: stretch;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

form .choice-slider::before {
  content: " ";
  position: absolute;
  height: 0.15rem;
  width: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #162d50;
}

form .choice-slider input,
form .choice-slider label {
  box-sizing: border-box;
  flex: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}

form .choice-slider label {
  display: inline-block;
  position: relative;
  width: 25%;
  height: 100%;
  margin: initial;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

form .choice-slider label::before {
  content: attr(period);
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, 0);
  font-size: 0.95rem;
  font-weight: 400;
  opacity: 0.85;
  transition: all 0.15s ease-in-out;
}

form .choice-slider label:hover{
  transform: scale(1.05);
}

form .choice-slider label::after {
  content: " ";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.5rem;
  height: 1.5rem;
  border: 0.15rem solid #0044aa;
  background: #FAFAFA;
  border-radius: 50%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 1;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

form .choice-slider label:hover::after {
  transform: translate(-50%, -50%);
}

form .choice-slider input {
  display: none;
}

form .choice-slider input:checked + label::before {
  font-weight: 800;
  opacity: 1;
}

form .choice-slider input:checked + label::after {
  border-width: 0.2rem;
  background: #0044aa;
  transform: translate(-50%, -50%) scale(1.05);
}

/* Questionnaire Toggle Switch */
.toggle-switch {
  /** bar */
  cursor: pointer;
  --bar-height: 2.3rem;
  --bar-width: 4.3rem;
  --bar-color: #eee;

  /** knob */
  --knob-size: 1.8rem;
  --knob-color: grey;

  /** switch */
  --switch-offset: calc(var(--knob-size) - var(--bar-height));
  --switch-width: calc(var(--bar-width) + var(--switch-offset));
  --transition-duration: 200ms;
  --switch-transition: all var(--transition-duration) ease-in-out;
  --switch-on-color: white;
  --switch-theme-color: #0044aa;
  --switch-box-shadow: 0 0 var(--switch-offset) #11111180;
  --switch-margin: 1.2rem;

  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-width: var(--bar-width);
  min-height: var(--bar-height);
  /* margin: var(--switch-margin);*/
  user-select: none;
}

.toggle-switch.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.toggle-switch > input,
.toggle-switch-input {
  display: none;
}

.toggle-switch > label,
.toggle-switch-label {
  --knob-x: calc((var(--bar-height) - var(--bar-width)) / 2);
  position: relative;
  left: 10%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--bar-width);
  height: var(--bar-height);
  /*margin: var(--switch-margin);*/
  user-select: none;
}


/* checked */
.toggle-switch > :checked + label,
:checked + .toggle-switch-label {
  --knob-x: calc((var(--bar-width) - var(--bar-height)) / 2);
}

.toggle-switch > :checked + label::before,
:checked + .toggle-switch-label::before {
  content: attr(data-on);
  color: white;
  font-size: 0.9rem;
  text-align: left;
  padding-top: calc(var(--bar-height)/4);
  padding-left: 0.4rem;
}

/* bar */
.toggle-switch > label::before,
.toggle-switch-label::before {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: var(--bar-width);
  height: var(--bar-height);
  background: var(--bar-color);
  border: 0.15rem solid #0044aa;
  border-radius: var(--bar-height);
  opacity: 1;
  transition: var(--switch-transition);
  content: attr(data-off);
  text-align: right;
  font-size: 0.9rem;
  padding-top: calc(var(--bar-height)/4);
  padding-right: 0.4rem;
}

/* checked bar */
.toggle-switch > :checked + label::before,
:checked + .toggle-switch-label::before {
  background: var(--switch-theme-color);
}

/* knob */
.toggle-switch > label::after,
.toggle-switch-label::after {
  cursor: pointer;
  box-sizing: border-box;
  width: var(--knob-size);
  height: var(--knob-size);
  background: var(--knob-color);
  border-radius: 50%;
  box-shadow: var(--switch-box-shadow);
  transform: translateX(var(--knob-x));
  transition: var(--switch-transition);
  content: "";
}

/* checked knob */
.toggle-switch > :checked + label::after,
:checked + .toggle-switch-label::after {
  background: var(--switch-on-color);
}


@media screen and (min-width: 868px) {
  .questionnaire .cards {
    grid-template-columns: repeat(auto-fit, minmax(18%, auto));
  }

  .questionnaire .choice-slider, .questionnaire .toggle-switch, .questionnaire .productname {
    grid-column: span 3;
  }

  .questionnaire .cards > h3:first-of-type, .questionnaire .cards > div:first-of-type { grid-column: span 1;}
}