/* QUIZ PART */
/*:root {}

body {}
*/
.quiz .questions { margin: 1.75em 0; padding: 1.5em 2em; border-radius: 20px; background: #FFF; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10); }

.quiz .questions .qsn-text { font-size:118%; letter-spacing: 0.5px; padding: 0 0 1em 0; }

.quiz .qsn-container.is-audio { margin: 0 0 3.5rem 0; text-align: center; }
.quiz .qsn-container.is-audio audio { width: 60%; max-width: 600px; }
.quiz .qsn-container.is-audio audio::-webkit-media-controls-panel { background-color: #d3e8f9; }
.quiz .qsn-container.is-video { margin: 0 0 1.5rem 0; text-align: center; }
.quiz .qsn-container.is-video iframe { width: 100%; height: 450px; max-width: 800px; display: block; margin: 0 auto; }
.quiz .qsn-container.is-image img { display: block; max-width: 800px; display: block; margin: 0 auto; }
.quiz .qsn-container.is-image { margin: 0 0 1.5rem 0; text-align: center; }

.quiz .questions .qsn-img { background: center center no-repeat; background-size: contain;}

.quiz .questions .ans-area { display: flex; justify-content: space-around; gap:2rem; margin: 0 auto; }
.quiz .questions .ans-area.w80p { width:80%;}
.quiz .questions .ans-area .qsn-img { width:50%;/* min-height: 300px; */}
.quiz .questions .ans-area .qsn-img img { max-height: 450px; display: block; margin:0 auto; border-radius: 20px; }
.quiz .questions .ans-area .ans-var { width: 50%; }

.quiz .questions .ans-var { display: flex; flex-direction: column; gap:1rem; }
.quiz .questions .ans-var .item { padding: 0.5rem 1rem 0.5rem 3rem; border-radius: 5px; border: 1px solid #E9E9E9; line-height: 1.5rem; background:1rem center no-repeat; cursor:pointer; transition:0.2s; }
.quiz .questions .ans-var .item.s { color: #00569D; font-weight: 700; border: 1px solid rgba(0, 86, 157, 0.20); background-color: #E9F4FD; box-shadow: 0px 0px 10px 0px rgba(0, 86, 157, 0.20); }
.quiz .questions .ans-var .item:hover { border: 1px solid #aaa; }

.quiz .questions .ans-area.ans-horizonal {  width: 100%; }
.quiz .questions .ans-area.ans-horizonal .ans-var { flex-direction: row; width: 100%; justify-content: space-evenly; }
.quiz .questions .ans-area.ans-horizonal .ans-var .item { width: 100%; }

.quiz .questions.text-one .ans-var .item   { background-image: url(../img/a-radio-0.svg); }
.quiz .questions.text-one .ans-var .item.s { background-image: url(../img/a-radio-1.svg); }

.quiz .questions.text-multi .ans-var .item   { background-image: url(../img/a-chb-0.svg); }
.quiz .questions.text-multi .ans-var .item.s { background-image: url(../img/a-chb-1.svg); }


.quiz .questions.img-merge .qsn-text { text-align: left;}
.quiz .questions           .img-merge-area { display: none; }
.quiz .questions.img-merge .img-merge-area { display: block;}
.quiz .questions.img-merge .ans-images { display: flex; justify-content: space-evenly; align-items: end; gap:1rem; margin: 0 0 4rem 0; /*flex: 1 1 0px;*/ }
.quiz .questions.img-merge .ans-images .item { max-width: 33.3333%;}
.quiz .questions.img-merge .ans-images .item img { max-height: 450px; display: block; margin:0 auto 1rem auto; border-radius: 20px; }
.quiz .questions.img-merge .ans-images .item .string { text-align: center; margin-bottom: 1em; }
.quiz .questions.img-merge .ans-images .ans-drop-area { padding: 0 2em; border-radius: 90px; border: 1px dashed #00000042; min-height: 50px; display: flex; align-items: center; justify-content: center; text-align: center; }
.quiz .questions.img-merge .ans-images .ans-drop-area.is-wrong   { font-weight: 600; border-radius: 90px; border: 2px solid #E3333E; color:#E3333E; background: rgba(227, 51, 62, 0.10); }
.quiz .questions.img-merge .ans-images .ans-drop-area.is-correct { font-weight: 600; border-radius: 90px; border: 2px solid #18AA15; color:#18AA15; background: rgba(24, 170, 21, 0.10); }
.quiz .questions.img-merge .ans-area {}
.quiz .questions.img-merge .ans-area .ans-items { display: flex; justify-content: space-around; gap:1rem; align-items: center; min-height: 2rem; min-width: 300px;/*flex: 1 1 0px;*/  }
.quiz .questions.img-merge .ans-item { /*max-width: 25%;*/ font-size: 106%; border-radius: 90px; background: #d3e8f9; font-weight: 400; padding: 0.5rem 1.75rem; cursor: grab; transition: 0.2s; line-height: 1.25rem; text-align: center; }
.quiz .questions.img-merge .ans-item:hover { background: #bedaf1; }
.quiz .questions.text-merge .ans-images .item img { display:none; }


.quiz .questions.text-sort .text-sort-area { display: flex; flex-direction: column; }
.quiz .questions.text-sort .ans-images { display: flex; justify-content: space-around; align-items: center; gap: 1rem; margin: 0 0 2rem 0; /* flex: 1 1 0px; */ flex-direction: column; width: 100%; }
.quiz .questions.text-sort .ans-images .item { max-width: 100%; display: flex; align-items: center; width:65%; gap:1rem; }
.quiz .questions.text-sort .ans-images .item img { display: none; max-height: 450px; margin:0 auto 1rem auto; border-radius: 20px; }
.quiz .questions.text-sort .ans-images .item .string { text-align:right; width: 50%; }
.quiz .questions.text-sort .ans-images .item .string { width: 100%; }
.quiz .questions.text-sort .ans-images .item .string { width:auto; }
.quiz .questions.text-sort .ans-images .ans-drop-area { border-radius: 90px; border: 1px dashed #00000042; min-height: 50px; display: flex; align-items: center; justify-content: center; text-align: center; width: 50%; }
.quiz .questions.text-sort .ans-images .ans-drop-area { width: 100%; }
.quiz .questions.text-sort .ans-images .ans-drop-area.is-wrong   { font-weight: 600; border-radius: 90px; border: 2px solid #E3333E; color:#E3333E; background: rgba(227, 51, 62, 0.10); }
.quiz .questions.text-sort .ans-images .ans-drop-area.is-correct { font-weight: 600; border-radius: 90px; border: 2px solid #18AA15; color:#18AA15; background: rgba(24, 170, 21, 0.10); }
.quiz .questions.text-sort .ans-images.is-w .ans-drop-area { width: 90%; }
.quiz .questions.text-sort .ans-images.is-w .item { justify-content: center; }
.quiz .questions.text-sort .ans-images.is-w .item .string { display:none;; }
.quiz .questions.text-sort .ans-area {}
.quiz .questions.text-sort .ans-area .ans-items { display: flex; justify-content: space-around; gap:1rem; align-items: center; min-height: 2em; min-width:320px; /*flex: 1 1 0px;*/ }
.quiz .questions.text-sort .ans-item { /*max-width: 25%;*/ text-align: center; font-size: 106%; border-radius: 90px; background: #d3e8f9; font-weight: 400; padding: 0.5rem 1.75rem; cursor: grab; transition: 0.2s; line-height: 1.25rem; }
.quiz .questions.text-sort .ans-item:hover { background: #bedaf1; }

/*.quiz .question.img-merge .ans-images .item img { display:block; }*/

.quiz .questions .correct-list  { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1em; margin-top: 2em; }
.quiz .questions .correct-list .item { padding: 0 2em; border-radius: 90px; border: 1px dashed #00000042; min-height: 50px; display: flex; align-items: center; justify-content: center; text-align: center; }
.quiz .questions .correct-list .item.is-wrong   { font-weight: 600; border-radius: 90px; border: 2px solid #E3333E; color:#E3333E; background: rgba(227, 51, 62, 0.10); }
.quiz .questions .correct-list .item.is-correct { font-weight: 600; border-radius: 90px; border: 2px solid #18AA15; color:#18AA15; background: rgba(24, 170, 21, 0.10); }



.quiz .questions .ctrl { text-align: center; margin:2em 0 0 0;}
.quiz .questions .ctrl-continue { display: none; }


.quiz .questions.view-answer.is-wrong { border: 10px solid #FDE9E9; box-shadow: none; }
.quiz .questions.view-answer.is-correct { border: 10px solid #dbf9d3; box-shadow: none; }

.quiz .questions.view-answer .ctrl { display: none; }
.quiz .questions.view-answer .ctrl-continue { display: block; }

.quiz .questions.view-answer .ans-area  { display: none; }

.quiz .questions.view-answer .img-merge-area { display:block; }
.quiz .questions.view-answer.img-merge .img-merge-area { display:block; }

.quiz .questions.view-answer .text-sort-area { display:none; }
.quiz .questions.view-answer.text-sort .text-sort-area { display:block; }

.quiz .questions.view-answer.text-sort .ans-images .item .string { text-align: right; width:auto; }
.quiz .questions.view-answer.text-sort .ans-images .item { justify-content: center; }

.quiz .questions .answer-wrong,
.quiz .questions .answer-correct { display: none; text-align: center; font-size:176%; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase;  }

.quiz .questions.view-answer.is-wrong .answer-wrong { color:#E3333E; display: block; }
.quiz .questions.view-answer.is-correct .answer-correct { color: #30B32D; display: block; }

.quiz .questions.view-answer .layout-2-col { display: flex; gap:2em; flex-direction: row-reverse; padding: 1em 0 0 0; margin: 0 auto; }
.quiz .questions.view-answer .layout-2-col .col-1,
.quiz .questions.view-answer .layout-2-col .col-2 { width: 50%; }
.quiz .questions.view-answer .layout-2-col img { max-width: 100%; max-height: 450px; border-radius: 20px; margin: 0 auto; }
.quiz .questions.view-answer .layout-2-col.w80p { width:80%; }

.quiz .questions.view-answer.no-img .layout-2-col .col-1 { width: 100%; }
.quiz .questions.view-answer.no-img .layout-2-col .col-2 { display:none; }




.quiz .progress { padding: 2em 0 1em 0; display: flex; justify-content: center; align-items: center; gap:5em}
.quiz .progress .counter { color: var(--link-color); }
.quiz .progress .counter span { font-size: 118%; font-weight: 700; letter-spacing: 1px; padding: 0 0.25em;  }

.quiz .progress .path { display: flex; justify-content:space-between; align-items: center; width: 70%; }
.quiz .progress .path .bullet {width: 13px; height:13px; min-width: 13px; min-height:13px;  border-radius: 100%; /*background-color: #CECECE;*/ color:#fff; border:3px solid #CECECE; }
.quiz .progress .path .bullet.start,
.quiz .progress .path .bullet.finish { width:25px; height: 25px; min-width:25px; min-height: 25px; border-radius: 100%; background: url(../img/ff.svg) center center no-repeat #cecece; }

.quiz .progress .path .track { /*background-color:#CECECE;*/ height: 1px; width: 100%; border-bottom: 1px dashed #cecece; }

.quiz .progress .path .bullet.pass { border-color: #00569d; }
.quiz .progress .path .track.pass { background-color: #00569d; height: 3px; border:none; }
.quiz .progress .path .bullet.start.pass,
.quiz .progress .path .bullet.finish.pass { background-color: #00569d; }

.quiz .progress .path .bullet.correct { border-color:#30B32D; background-color: #30B32D; }
.quiz .progress .path .bullet.wrong { border-color: #E3333E;background-color: #E3333E; }


.quiz .timing { padding: 0.5em 0 3em 0; display: flex; justify-content: center; align-items: center; gap:5em }
.quiz .timing .pass-time { display: flex; align-items: center; gap:1em; }
.quiz .timing .pass-time .caption { color: #000; text-align: center; font-size: 106%; font-weight: 600; }
.quiz .timing .pass-time .num { width: 60px; height: 60px; color:var(--link-color); font-size:147%; font-weight: 600; background-color:#DFE6F54d; border-radius: 100%; display: flex; align-items: center; justify-content: center; position: relative;}
.quiz .timing .pass-time .num span { position:absolute; }
.quiz .timing .pass-time .num .rotor { transform:translateZ(0) rotate(-45deg); border:1px solid #00569d; border-left-color:#00569d25;border-top-color:#00569d25; width: 50px; height: 50px; border-radius: 100%; display: flex; align-items: center; justify-content: center; }
.quiz .timing .ctrl {}
.quiz .timing .ctrl .btn-light { border:none; }


.quiz .finish .pre-head { font-size: 118%; font-weight: bold; letter-spacing: 1px; color:#00569D; text-align: center; margin: 1em 0 0.5em 0; }
.quiz .finish .head { font-size:206%; text-align: center; margin: 0 0 0.5em 0; }
.quiz .finish .your-rating { font-size:118%; font-weight:bold; letter-spacing: 1px; text-align: center; }
.quiz .finish .progress-bar { margin: 2em auto;  line-height: 35px; background-color: #E9F4FD; border-radius: 35px; max-width:800px; }
.quiz .finish .progress-percent { font-size: 118%; width:50%; background-color: #00569D; border-radius: 35px; text-align: center; color: #fff; font-weight: bold; text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); }
.quiz .finish .your-score { font-size: 118%; text-align: center; margin: 0 0 2em 0; font-weight: bold; }
.quiz .finish .your-score b { color:#00569D }
.quiz .finish .greeting { text-align: center; max-width:960px; margin: 0 auto 2em auto; }
.quiz .finish .ctrl { text-align: center; margin: 0 0 2em 0; }



.hi-scores { margin: 0 0 2em 0; }
.hi-scores .hi-score-head { font-size:150%; text-align: center; margin: 0 0 0.5em 0; }
.hi-scores table { font-size:100%;/*118%;*/ box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1); border-radius: 20px; overflow: hidden; width: 100%; max-width: 850px; margin: 0 auto 4em auto; }
.hi-scores table thead { background-color: #00569D; color:#fff; }
.hi-scores table thead td:nth-child(1),
.hi-scores table tbody td:nth-child(1) { text-align: right; }
.hi-scores table tbody td:nth-child(2),
.hi-scores table thead td:nth-child(2) { text-align: left; }
.hi-scores table thead td:nth-child(3),
.hi-scores table tbody td:nth-child(3) { text-align: right; white-space: nowrap; }
.hi-scores table thead tr td,
.hi-scores table tbody tr td { padding: 0.55em 1em; }
.hi-scores table tbody tr td { background-color: #fff; }
.hi-scores table tbody tr:nth-child(2n) td { background-color: #E9F4FD }
.hi-scores table tbody tr.bold { box-shadow: 0px 0px 15px rgba(0, 86, 157, 0.3); font-weight: bold; position: relative; }
.hi-scores table tbody tr.hot { color:#ff8a8a; font-weight: bold; }
.hi-scores table tbody tr.mark td { background: #fffd9d !important; }

.hi-scores table tbody tr td.empty { padding:3em; color:#aaa; text-align:center; }


/*** MEDIA ***/

@media screen and (max-width:1920px) {
  body {}
}


@media screen and (max-width:1440px) {
  body {}
}


@media screen and (max-width:1215px) {
  body { font-size:15px; }
  .quiz .questions.view-answer .layout-2-col.w80p { width: 90%; }
  .quiz .questions .ans-area.w80p { width: 90%; }
}


/* Tablet */
@media screen and (max-width:1023px) {
  body { font-size:15px; }

  .quiz .questions .ans-area.ans-horizonal .ans-var { flex-wrap: wrap; }
  .quiz .questions .ans-area.ans-horizonal .ans-var .item { width: 40%; }

  .finish { padding: 0 1em; }

}


@media screen and (max-width:768px) {
  body {}

  .quiz .finish .head { font-size: 160%; }

  .quiz .questions .ans-area.w80p { width: 100%; }

  .quiz .questions.text-sort .ans-images .item { width: 90%; }
  .quiz .questions.text-sort .ans-images .item .string { width: auto; }
  .quiz .questions.text-sort .ans-images .ans-drop-area {width: 100%;}

  .quiz .questions.text-sort .ans-area .ans-items { flex-direction: row; flex-wrap: wrap; }

  .quiz .questions.img-merge .ans-area .ans-items { flex-direction: column; align-items: center; }
  .quiz .questions.img-merge .ans-images { flex-direction: column; margin-bottom: 2em;  }
  .quiz .questions.img-merge .ans-images .item { display: flex; align-items: center; width: 100%; gap:1em; max-width: none;  }
  .quiz .questions.img-merge .ans-images .item .string { margin-bottom: 0; }
  .quiz .questions.img-merge .ans-images .ans-drop-area { width: 100% }
  
  
  .quiz .questions.view-answer .layout-2-col.w80p { width:100%; }

  .quiz .progress { padding: 2em 1em 1em 1em;  justify-content: space-evenly; gap: 2em; }
  .quiz .progress .path { width: 100%; }
  
  .quiz .timing { flex-direction: column; gap:2em; }
}


@media screen and (max-width:767px) {
  .quiz .progress .path .bullet { width: 9px; height: 9px; min-width: 9px; min-height: 9px; border-width: 2px; }
  .quiz .progress .path .bullet.start,
  .quiz .progress .path .bullet.finish { width: 21px; height: 21px; min-width: 21px; min-height: 21px; }
}


@media screen and (max-width:640px) {

  .quiz .questions .ans-area.ans-horizonal .ans-var { flex-direction: column; }
  .quiz .questions .ans-area.ans-horizonal .ans-var .item { width:100%; justify-content: center; align-items: center; display: flex; }
  .quiz .questions.text-one .ans-var .item img { display: block; }

  .quiz .questions .ans-var .item { width: 100%; }

  .quiz .questions .ans-area { flex-direction: column;}
  .quiz .questions .ans-area .qsn-img { width: 90%; align-self: center; text-align: center; } 
  .quiz .questions .ans-area .ans-var { width: 100%; }

  .quiz .questions.view-answer .layout-2-col { gap: 0em; flex-direction: column-reverse; }
  .quiz .questions.view-answer .layout-2-col .col-1,
  .quiz .questions.view-answer .layout-2-col .col-2 { width: 100%; }

  .quiz .questions.img-merge .ans-images .item {flex-direction: column; gap: 0; padding-bottom: 2em; }
}


@media screen and (max-width:450px) {
  body { font-size:14px; }
  .quiz .finish .head { line-height: 1.3em; }
  .quiz .progress .path { display: none; }
}


@media screen and (max-width:375px) {
  body {}
  .quiz .finish .head { font-size: 140%; }
}