/*--------------------
//  Dot line
--------------------*/
.dots{
  display: flex;
  justify-content: center;
	align-items: center;
}

.dots-line{
  width: fit-content;
  height: calc(1 * var(--asR));
  background: white;
  display: flex;
  justify-content: center;
	align-items: center;
  gap: calc(77 * var(--asR));
  margin-top: calc(264.5 * var(--asR));
  margin-bottom: calc(186 * var(--asR));
}

.dot{
  aspect-ratio: 1;
  width: calc(32.285 * var(--asR));
  border-radius: 50%;
  background: white;
  transition: background 0.5s;
  will-change: background;
}

.dot.selected{
  background: #38D200;
}

/*--------------------
//  Quiz box
--------------------*/

#q_box{
  position: relative;
  min-height: calc(483 * var(--asR));
  margin: 0 calc(141.7 * var(--asR));
  /*padding: 2% 10% 5%;*/

  font-size: calc(60 * var(--asR));
}

#q_bg{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #212042;
  opacity: 0.69;
  border-radius: calc(20 * var(--asR));
  mix-blend-mode: multiply;
}

#q_num{
  position: absolute;
  width: 100%;
  text-align: center;
  font-weight: 600;
  padding-top: calc(55 * var(--asR));
  text-shadow: calc(3 * var(--asR)) calc(3 * var(--asR)) calc(6 * var(--asR)) #262626;
}

#q_flex{
  position: relative;
  width: 100%;
  min-height: calc(361 * var(--asR));
  padding-top: calc(122 * var(--asR));
  display: flex;
  justify-content: center;
  /*align-items: center;*/
}

#q_quiz {
  margin: calc(38.8 * var(--asR)) 0;
  /*margin-top: calc(90 * var(--asR));*/
  text-align: center;
  text-shadow: calc(3 * var(--asR)) calc(3 * var(--asR)) calc(6 * var(--asR)) #262626;
  white-space: pre-wrap;
  letter-spacing: calc(5 * var(--asR));
}

#q_quiz[num='1'],
#q_quiz[num='5'],
#q_quiz[num='7'] {
  margin-top: calc(90 * var(--asR));
}

/*--------------------
//  Ans button
--------------------*/
#a_box{
  display: flex;
  flex-direction: column;
  gap: calc(57 * var(--asR));
  padding-top: calc(114 * var(--asR));
  margin: 0 calc(125.7 * var(--asR));
}

.option{
  display: block;
  width: 100%;
  padding: calc(10 * var(--asR)) 0;
  border: 2px solid transparent;
  border-radius: 500px;
  background: #0473EA;
  box-shadow: 0 calc(1 * var(--asR)) calc(3 * var(--asR)) rgba(0, 0, 0, 0.65); /* h-offset v-offset blur spread color */
  color: white;
  font-size: calc(50 * var(--asR));
  letter-spacing: calc(5 * var(--asR));
  font-family: "SC Prosper Sans";
  cursor:pointer;
  text-align: center;
  transition: background 0.5s;
  will-change: background;
}

.option.selected{
  background: #38D200;
}

/*--------------------
//  buttons bar
--------------------*/

.nav-buttons{
  display: flex;
  justify-content: center;
  gap: calc(50 * var(--asR));
  margin-top: calc(170 * var(--asR));
}

.nav-buttons button{
  width: calc(460 * var(--asR));
  aspect-ratio: 460/128;
  padding: 0;
  border: none;
  cursor: pointer;
}

#btn_prev{
  background: url("../ui/quiz/quiz_btn_prev.png");
  background-size: cover;
}

#btn_next{
  background: url("../ui/quiz/quiz_btn_next.png");
  background-size: cover;
}

#btn_next.Finish{
  background: url("../ui/quiz/quiz_btn_finish.png");
  background-size: cover;
}

#btn_prev:disabled {
  opacity: 0;
  cursor: not-allowed;
}

#btn_next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/*--------------------
//  Icons
--------------------*/
.icon{
  position: absolute;
  width: calc(300 * var(--asR));
}

#Icon_0{
  left: calc((839.84 - 150) * var(--asR));
  bottom: calc((53.5335 - 150) * var(--asR));
}

#Icon_1{
  left: calc((859.1415 - 150) * var(--asR));
  bottom: calc((58.628 - 150) * var(--asR));
}

#Icon_2{
  left: calc((836.3139 - 150) * var(--asR));
  bottom: calc((69.193 - 150) * var(--asR));
}

#Icon_3{
  left: calc((869.7254 - 150) * var(--asR));
  bottom: calc((74.0233 - 150) * var(--asR));
}

#Icon_4{
  left: calc((873.7908 - 150) * var(--asR));
  bottom: calc((73.5704 - 150) * var(--asR));
}

#Icon_5{
  left: calc((833.1569 - 150) * var(--asR));
  bottom: calc((54.2268 - 150) * var(--asR));
}

#Icon_6{
  left: calc((851.3801 - 150) * var(--asR));
  bottom: calc((64.5962 - 150) * var(--asR));
}

#Icon_7{
  left: calc((870.8652 - 150) * var(--asR));
  bottom: calc((113.2025 - 150) * var(--asR));
}

#Icon_8{
  left: calc((839.2957 - 150) * var(--asR));
  bottom: calc((70.5691 - 150) * var(--asR));
}

#Icon_9{
  left: calc((853.0567 - 150) * var(--asR));
  bottom: calc((71.4559 - 150) * var(--asR));
}