.tile-pink { background-color:#e64e6a !important; border:solid 2px #df2043 }

.quiz-aria .flex-container-q-stages .sub-levels li:last-child { margin-bottom:20px; }
.quiz-aria .flex-container-q-stages .route-total-score { text-align: left; font-size:88%; color:#aaa;  }
.quiz-aria .flex-container-q-stages .route-total-score b { color:#162273; font-size:132%; padding-left: 9px; display: inline-block; }
.quiz-aria .flex-container-q-stages .route-additional-score { text-align:left; font-size:88%;  color:#aaa; }
.quiz-aria .flex-container-q-stages .route-additional-score b { color:#162273; font-size:132%; }
.quiz-aria .score-add-whole-quiz { text-align: center; font-size:150%; color:#ebb30f; font-weight: bold; margin: 20px 0 10px 0; }
.quiz-aria .score-add-whole-quiz b { color:#162273; font-size: 120%; }

.quiz-aria .flex-container-q-stages .route-additional-score b { color:#162273; font-size:132%; }

.flex-container-q-stages ul.sub-levels-inactive { opacity:0.25; }
.flex-container-q-stages div.no-lock div { display:none; }
.flex-container-q-stages div.sub-levels-inactive { display:block; position:relative; }
.flex-container-q-stages div.sub-levels-inactive div { display:block; right: -19px; top: -23px; width:32px; height: 32px; background:url(/i2019/i128-lock.png) no-repeat center center; background-size: contain; position: absolute; cursor:pointer; }


.user-name-hello { text-align: center; padding: 0; margin: 0; }
.user-name-email { text-align: center; color: silver; position: relative; top:0px; }


.userGains { display:flex; flex-direction: row; flex-wrap: nowrap; margin-bottom: 15px; }
.userGains-2022 { align-items: center; }
.userGains .gainScore { text-align: left; width: 33.3333%; margin-bottom: 5px;  }
.userGains .pre-score { font-size:130%;  padding-bottom: 5px; }
.userGains .score { font-size:200%; color:#bbb; padding-bottom: 5px; }
.userGains .sepatare-score { color:#4e9bd8; font-style: normal; }
.userGains .val { color:#000; }
.userGains .sub-text { color:#aaa; font-size:11px; display:none; }
.userGains .links { }
/*.userGains .links a { text-decoration: none; }*/

.userGains .gainQK { text-align:right; width: 33.3333%; }
.userGains .QK { font-size:200%; color:#bbb; margin-bottom: 5px; }
.userGains .QK img { height: 30px; vertical-align: middle; }
.userGains .val { color:#000; }
.userGains .links { }

.userGains .center { text-align: center; margin-top:15px; width: 33.3333%; }
.userGains .center .btn { margin-bottom: 15px; }
.userGains .center .btn:last-child { margin-bottom:0; }


.head-1 { font-size:130%; padding-bottom: 1em; }
.join-social { padding:none; margin:none; display:flex; justify-content: space-evenly; align-items: center; }
.join-social .item { padding: 0 0 10px; }
.join-social .item img { width: 55px; transition: 0.3s;}
.join-social .item a:hover { opacity:0.5; }
.join-social .item a:hover img {  transform:scale(1.2); }
.join-social .item:first-child img { width:48px; }

.play-a-stage { width:100%; transition:0.3s; }
.play-a-stage img { width:100%; height:auto;transition: 0.3s; }
.play-a-stage:hover img { opacity: 0.7; transform:scale(0.92); border-radius: 10px; }

a.tg-btn img { transition: 0.3s; }
a.tg-btn:hover  img { transform: scale(1.2); opacity: 0.5; }

.bg-euroquiz { background: #6c74cb url(/i2022/eq2022-banner.png) right center no-repeat; background-size: cover; }

.rating-table td small small { display: none !important; }
.rating-table .nobr { white-space: nowrap; }
.rating-table tr.you { background-color: #f9e037; }
.rating-table tr.m-red { color: #ff7777; }

table.money-acts td:nth-child(3) { color: #0b84c6; }
.color-ltblue  { color: #0b84c6; }


.money-bonus { margin: 0;  }
.money-bonus .go2qsn { }
.game-eurochoice { padding:30px 0 60px 0; }


.finish { }
.finish .additional-head { font-size: 140%; border-bottom: 1px dotted #ccc; padding-bottom: 10px; color: #aaa; max-width: 60%; margin: 0 auto 10px auto; text-align: center; }
.finish .score .for-what { font-size: 150%; text-align: center; }
.finish .gain { font-size: 250%; text-align: center; color: #ccc; }
.finish .gain span { color:#054fa2; font-weight: bold; }

.finish .total-score { text-align: center; background: #ecc01633; margin: 20px auto 30px auto; padding: 20px; max-width: 675px; border: 1px dotted #ccc; }
.finish .total-score .head { font-size: 200%; }
.finish .total-score .head span { font-weight: bold; color: #1da6e0; }
.finish .total-score .better { color: #0b0; font-size: 120%; display:none; }
.finish .total-score .worse  { color: #d00; font-size: 120%; display:none; }
.finish .total-score .try-again { color: #d4a711; font-size: 120%; margin: 10px 0 0px; font-weight: bold; }

/** ---- Quiz aria ---- **/
.pad-t-10 { padding-top:10px; } .pad-b-10 { padding-bottom:10px; }
.pad-t-20 { padding-top:20px; } .pad-b-20 { padding-bottom:20px; }
.pad-t-40 { padding-top:40px; } .pad-b-40 { padding-bottom:40px; }
.pad-t-50 { padding-top:50px; } .pad-b-50 { padding-bottom:50px; }

.quiz-aria { padding-top:70px; position:relative; }

.q2019 { position:absolute; width:100%; height:calc(100% - 70px); background: transparent center center no-repeat; background-size: cover;
  /*overflow: hidden;*/
      /*position: relative;*/
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0,0,0, 1.0); }

.q2019 .contain { margin-left: auto; margin-right: auto; max-width: 1200px; padding-left: 10px; padding-right: 10px; height: 100%; width: 100%; position: relative;
  box-sizing: border-box; }
.q2019 .ctrl { position: relative; right: 10px; top: 20px; }
.q2019 .ctrl .endQuiz { text-align: right; }
.q2019 .ctrl .clockCounter { font-size: 24px; text-align: right; padding-bottom: 10px; font-weight: normal; }

.q2019 .opaq { padding: 10px 20px; position: absolute; width: 97.4%; bottom: 20px; box-sizing: border-box; }
.q2019 .opaq-bg { background:rgba(0,0,0, 0.82); }
.q2019 .testQsn { font-size:18px; padding-bottom:20px; }
.q2019 .testQsn a {     color: #87d0ff; }
.q2019 .testQsn .qNum { display:block; font-size:13px; color:#ccc; }
.q2019 .testQsn .qNum b { font-size:16px; font-weight:normal; }
.q2019 .stage { display:none !important; }
.q2019 .videoArea { }
.q2019 .videoAnswer { position:relative; margin-top:20px;/*85px;*/ /*width:50%; margin-left: auto; margin-right: auto;*/}
.q2019 .videoArea iframe   { border:2px solid #ccc; position:absolute; top:2%; width:640px; height: 360px; }
.q2019 .videoAnswer iframe { position:inherit;    display: block; text-align: center; margin: 0 auto; }

.q2019 .testAnsHint { display: block; font-size: 13px; color: #ccc; padding-bottom: 10px; }
.q2019 .testAns { }

.q2019 .testAnsHint { display:block; font-size:13px; color:#ddd; padding-bottom:10px; }
.q2019 .testAns { padding:0 25px; }

.q2019 .testAns .qsn { font-size:16px; border-bottom:1px dotted #80b2d1; padding-bottom:10px; margin-bottom:10px; font-weight: bold }
.q2019 .testAns .ans { text-align: left; padding:1px 0 10px 32px;  background:url(~icon-radio-off-24.png) 0px 0px no-repeat; min-height:24px; dispay:block; }
.q2019 .testAns .ans:hover { text-decoration:underline; cursor:pointer; }
.q2019 .testAns .s { background-image:url(~icon-radio-on-24.png) !important; font-weight:bold; }
.q2019 .testAns audio { height: 30px;  }
.q2019 .testAns audio::-internal-media-controls-download-button { display:none; }
.q2019 .testAns audio::-webkit-media-controls-enclosure {  overflow:hidden;}
.q2019 .testAns audio::-webkit-media-controls-panel { width: calc(100% + 30px); }

.q2019 .testAns .checkbox { padding:1px 0 8px 32px;  background:url(~icon-checkbox-off-24.png) 0px 0px no-repeat; min-height:24px; dispay:block;  }
.q2019 .testAns .checkbox:hover { text-decoration:underline; cursor:pointer; }
.q2019 .testAns .cbs { background-image:url(~icon-checkbox-on-24.png) !important; font-weight:bold; }
.q2019 .testAns p { padding-bottom:20px; font-size:14px; padding-top:0; }
.q2019 .testAns .ansImg { width:25%; float:left; text-align:center; padding-left:0; padding-right:0; padding-bottom:26px; background-position:center bottom; }
.q2019 .testAns .ansImg .img { padding: 0 10px; }
.q2019 .testAns .ansImg img { width:100%; }
.q2019 .testAns .ansLeft { float:left; padding: 1px 30px 0 0; }

.q2019 .testAns .ansAsgn { width:25%; float:left; text-align:center; padding-left:0; padding-right:0; padding-bottom:26px; background-image:none; }
.q2019 .testAns .ansAsgn_x5 { width:20%; box-sizing: border-box;  }
.q2019 .testAns .ansAsgn_x6 { width:11.7%; box-sizing: border-box; }
.q2019 .testAns .ansAsgn .img { padding: 0 10px; }
.q2019 .testAns .ansAsgn img { width:100%; }
.q2019 .testAns .ans.ansAsgn { cursor:default; }
.q2019 .testAns .ansLeft { float:left; padding: 1px 30px 0 0; }

.q2019 .testAns select { width:90%; margin-top:10px; padding:3px; border:1px solid #e5e5e5; border-radius:2px; font-size:13px; color:#333;  }
.q2019 .testAns select:focus { border:1px solid #bbb; border-radius:1px; background:#f1f1f1; padding:3px; color:#000; }

.q2019 .question-answer-pic { text-align:center; }
.q2019 .question-answer-pic img { width:auto !important; max-height:250px; }

.q2019 .good  { padding:0px 0 10px 0px; min-height:24px; dispay:block; color:#0d0; font-weight:bold; font-size:16px; }

.q2019 .userAnswer { z-index: 50; position:absolute; top:20px; padding:10px 20px; font-size:24px; font-weight:bold; background:rgba(0,0,0, 0.82);  }
.q2019 .userAnswer span.incorrect  { color:#f55; }
.q2019 .userAnswer span.midcorrect { color:#f90; }
.q2019 .userAnswer span.correct    { color:#0d0; }

.q2019 .iPicAsk { width:330px; height:300px; }
.q2019 .iPicAsk img { /*width:100%;*/ width: auto; height: 100%; }


.q2019 .next { padding-bottom: 10px; clear: both; }

.route-header { display: flex; align-items: center; }
.route-header div { width: 100%;}

.font-normal { font-weight:normal; }

/*
.quizArea .testAns p { padding-bottom:20px; font-size:16px; padding-top:0; }

.quizArea .testAns .ansImg { width:25%; float:left; text-align:center; padding-left:0; padding-right:0; padding-bottom:26px; background-position:center bottom; margin-bottom:10px; }
.quizArea .testAns .ansImg .img { padding: 0 10px; }
.quizArea .testAns .ansImg img { width:100%; }
.quizArea .testAns .ansLeft { float:left; padding: 1px 30px 0 0; }

.quizArea .testAns .ansAsgn { width:25%; float:left; text-align:center; padding-left:0; padding-right:0; padding-bottom:26px; background-image:none; }
.quizArea .testAns .ansAsgn_20 { width:20%; }
.quizArea .testAns .ansAsgn .img { padding: 0 10px; }
.quizArea .testAns .ansAsgn img { width:100%; }
.quizArea .testAns .ans.ansAsgn { cursor:default; }
.quizArea .testAns .ansLeft { float:left; padding: 1px 30px 0 0; }

.quizArea .testAns select { width:90%; margin-top:10px; padding:3px; border:1px solid #e5e5e5; border-radius:2px; font-size:13px; color:#333;  }
.quizArea .testAns select:focus { border:1px solid #bbb; border-radius:1px; background:#f1f1f1; padding:3px; color:#000; }
*/
/* ----------- */

.rating-table-full-w { width: 90%; }


.rating-w-medal { display:flex; width:80%; margin-left:auto; margin-right:auto;     justify-content: center; }
.rating-w-medal .medal { }
.rating-w-medal .txt   { }


.tq-head { font-size: 20px; padding-bottom: 1em; font-weight: bold }
.quiz-rooms { list-style: none; padding: 0; margin: 0; }
.quiz-rooms li { padding: 0; margin: 0 0 2em 0; }
.quiz-rooms li .head { padding-bottom: 10px; }
.quiz-rooms li .name { font-size:18px; color:#1e5190; font-weight: bold; }
.quiz-rooms li .name i { color:#eab313; }
.quiz-rooms li .dt { display: block; color:#aaa; }
.quiz-rooms li .text { padding-bottom: 10px;  }
.quiz-rooms li .ctrl { padding-bottom: 10px;  }
.quiz-rooms li .ctrl .btn { margin-right: 15px; }
.quiz-rooms li .ctrl .btn i { padding-right:5px; }

.form-room { }
.form-room .qsn-list { list-style: none; padding: 0; margin: 0; }
.form-room .qsn-list .area { display: flex; flex-wrap: nowrap; justify-content: space-between; }
.form-room .qsn-list .area-reorder { display: none; }
.form-room .qsn-list .area-content { display: block; width: 100%; }
.form-room .qsn-list li { margin: 0 0 1em 0; padding: 10px 15px; border: 1px solid #eaeaea; }
.form-room .qsn-list li:hover { background-color: #f0f0f0; }

.form-room .qsn-list .way { color:#deb61b; }
.form-room .qsn-list .route { }
.form-room .qsn-list .subj { }

.form-room .qsn-list .qsn { }
.form-room .qsn-list .qsn .type { font-weight: bold; color:#1e5190; display: block; }
.form-room .qsn-list .qsn .qsn-text { }

.form-room .qsn-list .ctrl { text-align: right; padding: 5px 0 0 0; }
.form-room .qsn-list .btn-add { display: inline-block;}
.form-room .qsn-list .btn-remove { display: none;}

.form-room .o05 { opacity:0.5; display:inline-block; padding-left: 10px; }

.form-room .qsn-list-selected {}
.form-room .qsn-list-selected li {    padding: 0px 0px; background: #f1f1f1;}
.form-room .qsn-list-selected .area-reorder { display: block; padding: 40px 0px; cursor: n-resize; background: #f1f1f1; width: 35px; text-align: center; align-self: center; }
.form-room .qsn-list-selected .area-content { display: block; padding: 10px 15px; background: #fff; width: calc(100% - 30px); }

.form-room .qsn-list-selected .ctrl { text-align: left; }
.form-room .qsn-list-selected .btn-add { display: none ;}
.form-room .qsn-list-selected .btn-remove { display: inline-block;}

.form-room .ui-state-highlight { height:130px; background: #ffc !important; }

.form-room .qsn-qty { float: right; font-size: 16px; padding-top: 8px; }
.form-room .qsn-qty span { font-weight: bold; font-size:18px; }

.form-room .head-list { font-size: 18px;font-weight: bold; padding-bottom: 5px; border-bottom: 1px dotted #ccc; margin-bottom: 20px; padding-top: 10px; }
.form-room .search-field { font-size: 15px; font-weight: normal; padding: 4px 5px; border: 1px solid #ccc; margin-left: 15px; width: 250px; }
.form-room .search-field:focus { border: 1px solid #4a75cc; background: #f1f1f1; color: #000;}


.qsn-listing { }
.qsn-listing .collapse { display: none; }
.route-list { }
.route-list .route-item { padding-bottom: 15px; }
.route-list .route-item .route-item-head { padding: 0 0 10px 0; cursor: pointer; text-decoration: none; display:block;}
.route-list .route-item .route-item-head .expand { display: inline-block; }
.route-list .route-item .route-item-head .collapse { display: none; }
.route-list .route-item .route-item-head.expanded .expand { display: none; }
.route-list .route-item .route-item-head.expanded .collapse { display: inline-block; }
.route-list .route-item .route-item-head i { padding-right:5px; }
.subj-list { margin-left:19px; }
.subj-list .subj-item { }
.subj-list .subj-item .subj-item-head { padding: 0 0 10px 0;  cursor: pointer;  text-decoration: none; display:block; }
.subj-list .subj-item .subj-item-head .expand { display: inline-block; }
.subj-list .subj-item .subj-item-head .collapse { display: none; }
.subj-list .subj-item .subj-item-head.expanded .expand { display: none; }
.subj-list .subj-item .subj-item-head.expanded .collapse { display: inline-block; }
.subj-list .subj-item .subj-item-head i { padding-right:5px; }
.qsn-part-list { margin-left: 19px; }
.qsn-part-list .qsn-list .way { display: none; }

#qsnSrchResult   .highlight-part { font-weight: bold; background-color: rgb(255, 243, 77); }
#qsnSelectedList .highlight-part { font-weight: normal; }


.no-scroll { overflow: hidden; }
.teamquiz-master { color:#000; position: fixed; top:0px; left:0px; width: 100%; height: 100%; background: url("i2020/quiz-2-bg.jpg") no-repeat center center; background-size:cover; z-index: 2000; }
.teamquiz-master .intro { display: flex; flex-wrap: wrap; width: 90%; margin: 0 auto; align-items: stretch; height: 100%; }

.teamquiz-master .intro .data { width:60%; padding-right: 5%; display: flex; flex-direction: column; text-align: center; justify-content: center; }
.teamquiz-master .intro .data .head { font-size:300%; font-weight: bold; }
.teamquiz-master .intro .data .text { font-size:200%; margin:20px 0 50px 0;}
.teamquiz-master .intro .data .to-join {}
.teamquiz-master .intro .data .how-to { font-size:150%; }
.teamquiz-master .intro .data .how-to big { font-size:200%; font-weight: bold; color:#0043ff; }
.teamquiz-master .url-to-join { font-weight: bold; color:#00a1ff; font-size:200%; padding-top: 10px; }

.teamquiz-master .intro .data .key-code { margin: 20px 0; color:#0043ff; background: #fff; border:2px solid #ccc; border-radius: 5px; padding: 15px 20px; font-weight: bold; font-size:350%; display: inline-block;}
.teamquiz-master .intro .data .ctrl {}
.teamquiz-master .intro .data .ctrl .btn {}
.teamquiz-master .ani-wrap { position:relative; left:-47px; }
.teamquiz-master .animatronic-hand { position: absolute; font-weight: normal;
  color:#b22;
  animation-name: hand-left-right;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

@keyframes hand-left-right {
  0% { left:0px; }
  50% { left:-30px; }
  100% { left:0px; }
}

.teamquiz-master .intro .joined-list { width:30%; text-align: left; font-size:150%; padding: 5% 0; }
.teamquiz-master .intro .joined-list .head { font-weight: bold; }
.teamquiz-master .intro .joined-list ul { list-style-type: none; }
.teamquiz-master .intro .joined-list ul li { margin: 0 0 10px 0; padding: 0;}

.teamquiz-master .btn-next-step { padding: 8px 20px; }

.teamquiz-master .quiz .up-stat { height: 60px; line-height: 60px; font-size: 150%; padding: 0 2%; color:#aaa; background: #fff; display: flex; justify-content: space-between; flex-wrap: nowrap; }
.teamquiz-master .quiz .up-stat .qsn-of { }
.teamquiz-master .quiz .up-stat span { color:#000; padding: 0 5px; font-weight: bold;  }
.teamquiz-master .quiz .up-stat .answers { }
.teamquiz-master .quiz .countdown-bar { height: 10px; width: 100%; background: #ecc016; }
.teamquiz-master .quiz .countdown-bar .bar { height: 10px; background:#1e5190; transition: 0.5s; }
.teamquiz-master .quiz .countdown-bar-gray { background:#eaeaea; }
.teamquiz-master .quiz .q2019 .opaq { letter-spacing: 0.5px; font-size:200%; width: 80%; left: 10%; top: 15%; padding: 20px 30px; bottom: auto; }
.teamquiz-master .quiz .q2019 .testQsn { font-size:inherit; }
.teamquiz-master .quiz .q2019 .good { font-weight: normal; font-size: inherit; }

.teamquiz-master .hi-score-list { width:32%; text-align: left; font-size:150%; /*padding: 5% 0;*/ overflow: hidden; margin: 10vh 0; height: 80vh; position: relative;}
.teamquiz-master .hi-score-list .fall-down-gradient { position: absolute; bottom: 0px; height: 100px; width: 100%;
  background-image: linear-gradient( to bottom, #ff000000, #ffffff ); z-index: 111;}
.teamquiz-master .hi-score-list .head { font-weight: bold;     padding: 0 20px; }
.teamquiz-master .hi-score-list ol { list-style-type: none; }
.teamquiz-master .hi-score-list ol li { margin: 0 0 10px 0; padding: 0; }
.teamquiz-master .hi-score-list .item { display: flex; flex-wrap: nowrap; justify-content: flex-start;  background:#fff; padding: 0 20px; }
.teamquiz-master .hi-score-list .item:nth-child(2n) { background:#eaeaea; }
.teamquiz-master .hi-score-list .item .order { display: block; width: 40px; }
.teamquiz-master .hi-score-list .item .name  { display: block; }
.teamquiz-master .hi-score-list .item .score { display: block; text-align: right; align-self: flex-end; margin-left: auto; }

.teamquiz-client { color:#000; position: fixed; top:0px; left:0px; width: 100%; height: 100%; background: url("i2020/quiz-2-bg.jpg") no-repeat center center; background-size:cover; z-index: 2000;
  overflow: hidden; overflow-y: scroll; }
.teamquiz-client .up-text { background: #fff; font-size:130%; color:#aaa; height: 47px; display: flex; align-items: center; justify-content: center; border-bottom: 3px solid #ccc; }
.teamquiz-client .qsn-text { text-align: center; }
.teamquiz-client .q2019 { height:calc(100% - 50px) !important; }

.teamquiz-client .play-area {}
.teamquiz-client .play-area .notify-big { font-size:180%; }
.teamquiz-client .play-area .notify-mid { font-size:150%; }
.teamquiz-client .play-area .notify-small { font-size:120%;  }
.teamquiz-client .play-area .notify-tiny { font-size:110%; color:#aaa; padding: 0 5%;}

.teamquiz-client .qsn-area {}
.teamquiz-client .qsn-area-text { text-align: left; font-size: 130%; padding: 20px 20px; background: #fff; }

.teamquiz-client .wait-for-others { font-size: 120%; text-align: center; }
.teamquiz-client .tq-answer { text-align: center; padding-top: 30px; }
.teamquiz-client .tq-answer .answer-icon {}
.teamquiz-client .tq-answer .answer-icon img { max-width: 30%; }
.teamquiz-client .tq-answer .answer-icon-2 { opacity: 0.66; }
.teamquiz-client .tq-answer .answer-icon-2 img { max-width: 20%; }
.teamquiz-client .tq-answer .state { padding: 10px 0; font-size:200%; font-weight: bold; }
.teamquiz-client .tq-answer .state-correct   { color:#688d2e; }
.teamquiz-client .tq-answer .state-incorrect { color:#961b1e; }
.teamquiz-client .tq-answer .state-partially { color:#e49e00; }
.teamquiz-client .tq-answer .state-none      { color:#0043ff; }
.teamquiz-client .ans-detail {  font-size:120%;     padding-top: 40px; }

.teamquiz-client .opaq { padding:20px 20px; position:relative; width:100%; left:0%; box-sizing: border-box; }
.teamquiz-client .opaq-bg { background:rgba(0,0,0, 0.82); }
.teamquiz-client .answers { color:#fff; font-size:18px; margin:0; padding: 0; }
.teamquiz-client .answers .next { padding: 20px 0 20px 0; }
.teamquiz-client .answers .btn { font-size:18px; }
.teamquiz-client .answers .ans { margin: 11px 0 10px 0px; padding: 11px 0 10px 40px; background: url(~icon-radio-off-24.png) 0px center no-repeat;  min-height: 24px; display: block; text-align: left; }
.teamquiz-client .s { background-image:url(~icon-radio-on-24.png) !important; font-weight:bold; }
.teamquiz-client .checkbox { margin: 11px 0 10px 0px; padding: 11px 0 10px 40px; background:url(~icon-checkbox-off-24.png) 0px center no-repeat; min-height:24px; display:block;  }
.teamquiz-client .cbs { background-image:url(~icon-checkbox-on-24.png) !important; font-weight:bold; }

.teamquiz-client .answer-ctrl { }
.teamquiz-client .answer-loader { display: none; }
.teamquiz-client .answer-loader img { width: 40px; }

.teamquiz-client .hidden { display: none; }

.teamquiz-client .tq-results .head { font-size: 40px; padding: 50px 0 0 0; color: #1e5190; }
.teamquiz-client .tq-results big {font-size:150%; }
.teamquiz-client .tq-results .rank { padding: 30px 0 0 0; font-size: 20px; text-align: center; font-weight: bold; }
.teamquiz-client .tq-results .statistic { padding: 30px 0 0 0; display: flex; flex-wrap: wrap;     font-weight: bold; }
.teamquiz-client .tq-results .statistic .head { width: 100%; text-align: center; font-size: 18px; padding: 10px; }
.teamquiz-client .tq-results .statistic .stat-item { width: 100%; text-align: center; font-size: 18px; padding: 2px 0; }
.teamquiz-client .tq-results .statistic .stat-item img { width:24px; vertical-align: middle; padding-right: 5px;}
.teamquiz-client .tq-results .statistic .stat-item-c { color:#688d2e; }
.teamquiz-client .tq-results .statistic .stat-item-i { color:#961b1e; }
.teamquiz-client .tq-results .statistic .stat-item-p { color:#e49e00; }


.tq-stat { }
.tq-stat .stat-name {}
.tq-stat .stat-desc { font-size:120%; color:#999; }

.tq-stat .hi-score-table { margin-bottom: 2em;  }
.tq-stat .hi-score-table .item { font-size:110%; text-align: right;  display: flex; flex-wrap:nowrap; width: 100%; border-bottom: 1px solid #cacaca; }
.tq-stat .hi-score-table .item:not(.item-head):hover { background-color: #f1f1f1; }
.tq-stat .hi-score-table .item .pos  { width: 50px; padding: 5px 8px;  }
.tq-stat .hi-score-table .item .name { width: calc(50% - 50px); padding: 5px 8px;  text-align:left; font-weight: bold; }
.tq-stat .hi-score-table .item .score { font-weight: bold }
.tq-stat .hi-score-table .item .score,
.tq-stat .hi-score-table .item .ans-count-c,
.tq-stat .hi-score-table .item .ans-count-p,
.tq-stat .hi-score-table .item .ans-count-i,
.tq-stat .hi-score-table .item .ans-count-n,
.tq-stat .hi-score-table .item .ans-avg-time,
.tq-stat .hi-score-table .item .ans-max-time,
.tq-stat .hi-score-table .item .ans-min-time,
.tq-stat .hi-score-table .item .ans-total-time { padding: 5px 8px; width: 8%; min-width: 8%; }
.tq-stat .hi-score-table .item-head { font-size:100%; color: #fff; background: #4e9bd8; border-bottom: none; align-items: flex-end; }
.tq-stat .hi-score-table .item .ans-max-time,
.tq-stat .hi-score-table .item .ans-min-time,
.tq-stat .hi-score-table .item .ans-total-time { display:none; }

.tq-stat .question-table { }
.tq-stat .question-table .item { font-size:110%; display: flex; flex-wrap:nowrap; width: 100%; border-bottom: 1px solid #cacaca;
  color: #fff;
      background: #4e9bd8;}
.tq-stat .question-table .item .pos { font-size:130%; width: 40px; padding: 5px 8px; text-align: center; align-self: center;}
.tq-stat .question-table .item .name { font-size:130%; width: calc(50%); padding: 5px 8px;  }

.tq-stat .question-table .detail-container { margin: 0 0 30px 0; }
.tq-stat .question-table .detail-container .participants-list { }
.tq-stat .question-table .detail-container .participants-list .participant-item { display: flex; flex-wrap: nowrap; width:calc(100% - 56px); border-bottom: 1px solid #cacaca; margin: 0px 0 0 56px; }
.tq-stat .question-table .detail-container .participants-list .participant-item:not(.participant-item-head):hover { background-color: #f1f1f1; }
.tq-stat .question-table .detail-container .participants-list .participant-item .name         { width:49%; padding: 5px 8px; }
.tq-stat .question-table .detail-container .participants-list .participant-item .answer-one   { width:17%; padding: 5px 8px; }
.tq-stat .question-table .detail-container .participants-list .participant-item .answer-one i { padding-right: 5px; }
.tq-stat .question-table .detail-container .participants-list .participant-item .answer-score { width:17%; padding: 5px 8px; }
.tq-stat .question-table .detail-container .participants-list .participant-item .answer-time  { width:17%; padding: 5px 8px; }
.tq-stat .question-table .detail-container .participants-list .participant-item-head { background: #f1f1f1; font-weight: bold; }


.tq-stat .question-table .detail-container .participants-list .participant-item .answer-state-0   { background:#ffd9d9; }
.tq-stat .question-table .detail-container .participants-list .participant-item .answer-state-50  { background:#ffefa2; }
.tq-stat .question-table .detail-container .participants-list .participant-item .answer-state-100 { background:#bdffbd; }
/*
ate-0   { background:#ffc4c4; }
.tq-stat .question-table .detail-container .participants-list .participant-item .answer-state-50  { background:#ffd9d9; }
.tq-stat .question-table .detail-container .participants-list .participant-item .answer-state-100 { background:#bdffbd; }
*/


.prizes2021 { font-size: 15px; padding: 30px 0 30px 0; }
.prizes2021 .p-h1 { font-size: 150%; text-align: center;}
.prizes2021 .p-h1 b { font-weight: bold; color:coral; }
.prizes2021 .p-text { font-size: 100%; }
.prizes2021 p { text-align: justify; }
.prizes2021 .p-table {  }
.p-w-slim { max-width: 900px; margin: 0 auto; }

/* .prizes2021 .p-var { width: 27%; }
.prizes2021 .p-var .p-head { font-size: 125%}

.prizes2021 .p-var .p-level-head {font-size: 80%; color: #bbb; text-transform: uppercase;}
.prizes2021 .p-var .p-level-head span { font-weight: bold; padding-left:1em; display: inline-block;}
.prizes2021 .p-var .p-level {}
.prizes2021 .p-var .p-level-1 { }
.prizes2021 .p-var .p-level-2 { }
.prizes2021 .p-var .p-level-3 { }
.prizes2021 .p-var .p-level-4 { }
.prizes2021 .p-var .p-level-5 { }
.prizes2021 .p-var .p-level-6 { }
.prizes2021 .p-var .p-item { } */

.prizes2021 .p-table { width: 100%; padding: 20px 0 0px 0}
.prizes2021 .p-table .p-line { display:flex; flex-wrap: nowrap; width: 100%; justify-content: space-between;
  border-top: 1px solid #054fa2; padding: 0; }
.prizes2021 .p-table .p-line-bottom { border-bottom: 1px solid #054fa2; }
.prizes2021 .p-table .p-th { font-size: 125%; font-weight: bold; color:#054fa2; }
.prizes2021 .p-table .p-line .p-col { width: 25%; padding: 5px 10px 5px 10px; }

.prizes2021 .p-prize-1 { background-color:rgb(198, 217, 241); padding: 2px 5px; display: inline-block;}
.prizes2021 .p-prize-2 { background-color:rgb(251, 212, 180); padding: 2px 5px; display: inline-block;}
.prizes2021 .p-prize-3 { background-color:rgb(214, 227, 188); padding: 2px 5px; display: inline-block;}

.prizes2021 .p-table .p-level {  font-size: 110%; font-weight: bold;}
.prizes2021 .p-table .p-kk {  color:#054fa2; font-weight: bold; }
.prizes2021 .p-table .p-kk em { display: block; color:#bbb; font-weight: normal;}

.prizes2021 .p-table .p-line .p-col:nth-child(2) { background-color:rgb(198, 217, 241); padding: 5px 10px; }
.prizes2021 .p-table .p-line .p-col:nth-child(3) { background-color:rgb(251, 212, 180); padding: 5px 10px; }
.prizes2021 .p-table .p-line .p-col:nth-child(4) { background-color:rgb(214, 227, 188); padding: 5px 10px; }
.prizes2021 .p-table .p-line .p-col-empty { background: transparent !important; }
.prizes2021 .p-table .p-line-selector { font-size:120%; font-weight: bold; margin-bottom: 20px; }
.prizes2021 .p-table .p-line-selector .p-col { padding:15px 5px !important; }
.prizes2021 .p-table .p-line-selector a { text-decoration: none; border-bottom: 1px dotted #2b5672; }

.swal2-container { z-index: 3000; }

.color-blue   { color:#1e5190; }
.color-yellow { color:#ecc016; }
.max-w500 { max-width: 500px; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-space-between { justify-content:space-between; }


.opacity-0 { opacity: 0; }
.opacity-1,
.opacity-100 { opacity: 1; }


@media only screen and (max-width: 500px) {
}


@media screen and (max-width:1050px) {
  .flex-container-q-stages .flex-item { margin-top:50px; }
}



@media screen and (max-width:1000px) {
  h1 { font-size:220%; }
  .userGains .score,
  .userGains .QK { font-size:165%; }

  .q2019 .question-answer-pic img { width: 94% !important; max-height: 250px; height: auto; }
}


@media screen and (max-width:768px) {  /* 768px */
  .userGains { flex-direction: column; flex-wrap: wrap;}
  .userGains .gainScore { width: 100%; text-align: center; margin: 1.5em 0 2em 0; }
  .userGains .center    { width: 100%; text-align: center; margin: 1.5em 0 2em 0; }
  .userGains .gainQK    { width: 100%; text-align: center; margin: 1.5em 0 2em 0; }

  .q2019 .testAns { margin-bottom:25px; }
}



@media screen and (max-width:690px) {
  .q2019 { height: calc(100% - 70px); }
  /*.q2019 { height: calc(100% - -100px); }*/
  .q2019 .opaq { width: 100%; }
  .q2019 .contain { padding-left: 0; padding-right: 0; }
  .q2019 .testQsn { font-size:15px; }

  .q2019 .testAns .ansImg { width: auto; float:none; margin-bottom: 30px; }

  .q2019 .question-answer-pic img { width: auto !important; max-height: 220px; height: auto; }

  .q2019 .videoArea iframe { width:99%; height: 360px; text-align: center; }
}


@media screen and (max-width:500px) {
  .q2019 .testAns { padding-left:0; padding-right: 0; }
  /*
  .q2019 .qa-type-sort .questions { display: flex; flex-wrap: wrap; }
  .q2019 .qa-type-sort .questions .question { display:block; }
*/
}


@media screen and (max-width:450px) {
  .q2019 .testAns { padding-left:0; padding-right: 0; }
  .q2019 .iPicAsk { width:100%; height: auto; }
  .q2019 .iPicAsk img { width:100%; height:auto; }


}