@charset "utf-8";

*, ::before, ::after { box-sizing: border-box; }

html, body, div, span, img, form { margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; }

img { display: block; width: 100%; }

button { cursor: pointer; }

.quiz_wrap { max-width: 368px; margin: 30px auto; background: linear-gradient(rgba(225, 217, 255, 0.1) 14.77%, rgb(225, 217, 255) 85%); border-radius: 7px; }

.quiz-header { background: rgb(108, 28, 209); border-radius: 7px 7px 70px 70px; }

.quiz-header .quiz-title, .quiz-header .order-title { font-weight: 700; text-align: center; color: rgb(255, 255, 255); padding: 14px 14px 20px; font-size: 20px; line-height: 1.5; }

.quiz-header .order-title { display: none; }

.quiz-body { padding: 0px 30px; margin: 20px 0px 0px; }

.quiz-step { display: none; transition: 0.5s; }

.quiz-step.active { display: block; }

.quiz-question { font-weight: 700; text-align: left; margin-bottom: 20px; font-size: 18px; line-height: 1.5; }

.quiz-title { margin-bottom: 15px; }

.quiz_options { margin: 0px; }

.label { display: block; margin-bottom: 20px; }

.input-checkbox { position: absolute; opacity: 0; pointer-events: none; }

.quiz_options .option { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; column-gap: 20px; color: rgb(108, 28, 209); font-weight: 700; text-align: left; position: relative; cursor: pointer; margin-bottom: 20px; font-size: 18px; line-height: 1.5; }

.quiz_options .option:last-child { margin-bottom: 0px; }

.quiz_options .option .option-radio { display: flex; align-items: center; justify-content: center; height: 1lh; }

.quiz_options .option .option-radio .circle { display: block; background: rgb(255, 255, 255); width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgb(108, 28, 209); position: relative; }

.quiz_options .option .option-radio .circle::after { content: " "; transition: 0.2s; display: block; background: rgb(108, 28, 209); height: 12px; width: 12px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; }

@media (any-hover: hover) {
  .quiz_options .option:hover .option-radio .circle::after { opacity: 1; }
}

.input-checkbox:checked + .option-radio .circle::after { opacity: 1; }

.quiz-nums { width: 100%; max-width: 230px; display: flex; justify-content: space-between; position: relative; margin: 30px auto 0px; }

.quiz-nums::before { content: ""; display: block; position: absolute; top: 50%; width: 100%; height: 1px; background: rgb(108, 28, 209); }

.quiz-nums .num { transition: 1s; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 35px; height: 35px; background: rgb(255, 255, 255); border: 1px solid rgb(108, 28, 209); }

.quiz-nums .num.active span { background: rgb(108, 28, 209); }

.quiz-nums .num span { width: 27px; height: 27px; background: rgb(225, 217, 255); display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; letter-spacing: 0px; text-align: center; color: rgb(255, 255, 255); font-size: 18px; line-height: 1.5; }

.quiz-footer { padding: 20px; font-weight: 400; text-align: center; font-size: 16px; line-height: 1.5; }

.quiz-footer .pcs { display: block; font-weight: 700; color: rgb(108, 28, 209); }

.quiz-timer { font-weight: 400; text-align: center; font-size: 16px; line-height: 1.5; }

.quiz-timer .timer { color: rgb(0, 0, 0); }

.quiz-timer .timer span { font-weight: 700; color: rgb(108, 28, 209); }

@media screen and (max-width: 600px) {
  .quiz_wrap { margin: 30px auto; }
  .quiz-header .quiz-title, .quiz-header .order-title { letter-spacing: 0.005em; font-size: 20px; line-height: 1.5; }
  .quiz-body { padding: 0px 14px; }
  .quiz-question { margin-bottom: 15px; font-size: 18px; line-height: 1.5; }
  .quiz_options .option { column-gap: 10px; font-size: 18px; line-height: 1.5; }
  .quiz_options .option .option-radio { height: auto; }
  .quiz_options .option .option-radio .circle { width: 20px; height: 20px; margin-top: 0.15em; }
  .quiz_options .option .option-radio .circle::after { height: 10px; width: 10px; }
  .quiz-nums .num { width: 31px; height: 31px; }
  .quiz-nums .num span { width: 23px; height: 23px; font-size: 16px; line-height: 1.5; }
  .quiz-footer { padding: 25px 14px 14px; font-size: 16px; line-height: 1.5; }
  .quiz-footer .pcs { display: inline-block; }
  .quiz-timer { font-size: 16px; line-height: 1.5; }
}

body { background: rgb(255, 255, 255); font-family: Roboto, sans-serif; color: rgb(0, 0, 0); min-width: 320px; letter-spacing: 0.05em; }

.container { padding: 0px 15px; margin: 0px auto; max-width: 830px; }

.button { display: block; width: 100%; max-width: 340px; min-height: 50px; margin: 20px auto 5px; background: linear-gradient(rgb(185, 166, 255) 0%, rgb(108, 28, 209) 100%); text-transform: uppercase; font-weight: 700; text-align: center; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 7.9px 0px; padding: 10px 35px; color: rgb(255, 255, 255); text-decoration: none; font-size: 20px; line-height: 1.5; transition: 0.3s; }

.button:hover { background: linear-gradient(rgb(108, 28, 209) 0%, rgb(185, 166, 255) 100%); }

@media screen and (max-width: 600px) {
  .button { margin: 30px auto; padding: 10px 30px; }
}

form { width: 100%; margin-top: 15px; }

form .prices { display: flex; flex-direction: row; align-items: center; justify-content: center; column-gap: 20px; }

form .prices .old { color: rgb(149, 149, 149); font-weight: 400; text-decoration: line-through; font-size: 24px; line-height: 1.5; }

form .prices .new { color: rgb(108, 28, 209); font-weight: 700; font-size: 37px; line-height: 1.25; }

form input { display: block; width: 100%; font-weight: 400; color: rgb(0, 0, 0); background: rgb(255, 255, 255); border: 1px solid rgb(108, 28, 209); margin-bottom: 16px; padding: 10px 16px; outline: none; font-family: Roboto, sans-serif; letter-spacing: 0.05em; font-size: 16px; line-height: 1.5; border-radius: 5px; }

form button { border: 0px; outline: none; font-family: Roboto, sans-serif; letter-spacing: 0.05em; border-radius: 5px; }

.quiz-popup { padding: 0px 20px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: fixed; inset: 0px; z-index: 9999; background-color: rgba(0, 0, 0, 0.8); opacity: 0; pointer-events: none; transition: 0.3s; }

.quiz-popup.active { opacity: 1; pointer-events: visible; }

.popup__text { padding: 12px 0px; width: 100%; max-width: 500px; text-align: center; font-size: 16px; color: rgb(255, 255, 255); background-color: rgb(108, 28, 209); border-radius: 8px; }

@media screen and (max-width: 600px) {
  form input { font-size: 18px; line-height: 1.5; }
}

@keyframes changeOfSize { 
  0% { transform: scale(0.001); }
  100% { transform: scale(1); }
}

@keyframes movement { 
  100% { transform: translateX(15px); }
}

.preloader { position: relative; display: none; width: 40px; height: 10px; margin: auto; font-size: 20px; }

.submit-text { text-transform: uppercase; }

.dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgb(255, 255, 255); animation: 1s ease 0s infinite normal none running none; }

.dot1, .dot2 { left: 0px; }

.dot3 { left: 15px; }

.dot4 { left: 30px; }

.dot1 { animation-name: changeOfSize; }

.dot2, .dot3 { animation-name: movement; }

.dot4 { animation-name: changeOfSize; animation-direction: reverse; }

.preloader.preloader-active { display: flex; }