/* ===========================
ROUTE QUIZ
=========================== */
.quiz-section .quiz-field-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px 25px;
}
.quiz-section .quiz-field-wrapper.last-child {
  margin-bottom: 0;
}
.quiz-section .quiz-field {
  margin-bottom: 1rem;
  text-align: left;
  width: calc(50% - 20px);
  margin: 0 10px;
}
.mfp-container {
  padding-left: 20px;
  padding-right: 20px;
}
.mfp-close{
  display:none;
}
.quiz-section {
  background: #EDF8FA;
  max-width: 800px;
  padding: 40px;
  border-radius: 10px;
  margin:0 auto;
}
.quiz-section .button--white {
  background: #fff;
  color: #323232;
  margin-left:15px;
}
.quiz-section .btn-container {
  display: flex;
  flex-wrap: wrap;
}
.quiz-section .btn-wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.quiz-section .is-active {
  display: block !important;
}
.quiz-section [data-quiz] {
  max-width: 850px;
  margin: 80px auto;
  padding: 40px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
  position: relative;
}
.quiz-section .loader-element img {
  width: 100px;
  height: 100px;
}
body.quiz-popup-open .mfp-content {
  max-width: 720px;
}

/* ===========================
Progress
=========================== */

.quiz-section [data-quiz-progress] {
  margin-bottom: 40px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #666;
  position: relative;
  padding-bottom: 18px;
}

.quiz-section [data-quiz-progress:after] {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8px;
  background: #e8e8e8;
  border-radius: 30px;
}

.quiz-section [data-quiz-progress]::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 8px;
  width: calc((100% / var(--steps, 4)) * var(--current, 1));
  background: #3f7f7d;
  border-radius: 30px;
  transition: 0.35s;
}

/* ===========================
Steps
=========================== */

.quiz-section [data-quiz-step],
.quiz-section [data-quiz-result] {
  display: none;
  animation: fade 0.35s ease;
}

.quiz-section [data-quiz-step.is-active],
.quiz-section [data-quiz-result.is-active] {
  display: block;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quiz-section [data-quiz-step] h2,
.quiz-section [data-quiz-result] h2 {
  font-size: 34px;
  margin-bottom: 30px;
  line-height: 1.3;
  text-align: center;
  color: #222;
}

/* ===========================
Options
=========================== */

.quiz-section [data-quiz-option] {
  display: block;
  width: 100%;
  margin-bottom: 18px;
  padding: 20px 24px;
  border: 2px solid #ddd;
  background: #fff;
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: 0.25s;
  font-size: 17px;
  font-weight: 500;
}

.quiz-section [data-quiz-option]:hover {
  border-color: #0f625f;
  background: #f5f9ff;
  transform: translateY(-2px);
}

.quiz-section [data-quiz-option].is-selected {
  background: #3f7e7d;
  color: #fff;
  border-color: #3f7e7d;
}

/* ===========================
Navigation Buttons
=========================== */

.quiz-section [data-quiz-back],
.quiz-section [data-quiz-next] {
  margin-top: 25px;
  padding: 14px 30px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.25s;
  max-width:fit-content;
}

.quiz-section [data-quiz-back] {
  background: #efefef;
  color: #333;
  margin-right: 12px;
}

.quiz-section [data-quiz-back]:hover {
  background: #ddd;
}

.quiz-section [data-quiz-next] {
  background: #3f7f7d;
  color: #fff;
}

.quiz-section [data-quiz-next]:hover {
  background: #3f7f7d;
}

/* .quiz-section [data-quiz-restart] {
background: #333;
color: #fff;
}

.quiz-section [data-quiz-restart]:hover {
background: #111;
} */

/* ===========================
Result
=========================== */

.quiz-section [data-quiz-result] {
  text-align: center;
}

.quiz-section [data-quiz-result] p {
  font-size: 18px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 20px;
}

.quiz-section [data-quiz-result] strong {
  display: inline-block;
  color: #198754;
  font-size: 18px;
}

/* ===========================
CTA
=========================== */

/* .quiz-section [data-quiz-cta] {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 30px 0;
padding: 18px 42px;
background: #ff6a00;
color: #fff;
text-decoration: none;
border-radius: 12px;
font-size: 18px;
font-weight: 700;
transition: 0.25s;
}

.quiz-section [data-quiz-cta]:hover {
background: #e65e00;
transform: translateY(-3px);
} */

/* ===========================
Responsive
=========================== */

@media (max-width: 768px) {
  .quiz-section [data-quiz] {
    padding: 25px;
    margin: 40px 15px;
  }

  .quiz-section [data-quiz-step] h2,
  .quiz-section [data-quiz-result] h2 {
    font-size: 26px;
  }

  .quiz-section [data-quiz-option] {
    font-size: 16px;
    padding: 16px;
  }

  .quiz-section [data-quiz-back],
  .quiz-section [data-quiz-next],
  .quiz-section [data-quiz-restart] {
    width: 100%;
    margin-right: 0;
    /*     margin-top: 15px; */
  }

  .quiz-section [data-quiz-cta] {
    width: 100%;
  }
  .quiz-section .quiz-field {
    width:100%;
    margin: 0;
    margin-bottom: 20px;
  }
  .quiz-section .quiz-field-wrapper {
    margin: 0;
  }
}

.quiz-section .quiz-field label {
  font-size: 16px;
  font-weight: 300;
  line-height: 20px;
}
.hidden-form{
  display:none !important;
}