body #quizapp, #quizapp .btn,#quizapp button.btn,#quizapp a.btn{font-size: 15px;}
#quizapp .btn,#quizapp button.btn,#quizapp a.btn{padding-left: 25px;padding-right: 25px;}
/*Modal*/
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 300px;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  float: right;
}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
/*End Modal*/
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.numberCircle {
    border-radius: 50%;
    width: 28px;
    height: 28px;
    background: #fff;
    border: 1px solid #666;
    color: #666;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    line-height: 26px;
}
.no-mrg{margin: 0!important;}
.no-pd{padding: 0!important;}
.mrg-tb-20{margin: 20px 0;}
.mrg-bt-20{margin-bottom: 20px;}
.spacer-20{height: 20px}
.spacer-30{padding: 30px}
.spacer-40{padding: 30px}
.spacer-50{padding: 30px}
.btn.btn-tlcus{padding: 6px 12px!important;}
.btninfobox button.btn{cursor: default;}
.btn.btn-info {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}
.btn.btn-info.active{background-color: #06c0ea!important;border-color: #06c0ea!important;}
.btn.btn-success{
    color: #fff;
    background-color: #398439!important;
    border-color: #255625!important;
}
.text-red {color: #cd0303!important;}
.text-green {color: #02a402!important;}
.btn.btn-small{padding: 10px 15px!important;}
#main-content-testing .wrap-question{padding-left: 10px;padding-right: 10px;}
.cnt-question{margin: 20px 0 30px 0;font-weight: 600;border: 1px solid #3bcbbd;padding: 10px;display: inline-block;width: 100%;-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}
.numberCircle, ul.answer-ops .numberCircle{margin-right: 10px;}
ul.pull-right.answer-ops {
    padding-left: 0;
}
ul.answer-ops li {
  list-style-type: none;
  padding: 10px;
}
.quiz-testing:not(.is-result) ul.answer-ops li {cursor: pointer;}
.quiz-testing:not(.is-result) ul.answer-ops li:hover,ul.answer-ops li.active {
  background: #06afe1;
  color: #fff;
}
.textAdvanced { 
  background-color: #fff;
  overflow: hidden;
  display: inline-block;
  padding: 0 10px;
  font-weight: bold;
  font-family: arial;
  float: left;
  border: 1px solid #ddd;
  margin-right: 10px;
}.textAdvanced span { 
  background: -webkit-linear-gradient(#2494d5, #32e14f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-size: 28px;
}
.boxEl{display: inline-block;width: 100%;}
.question-desc {
  height: 150px;
  overflow-y: scroll;
  margin-bottom: 20px;
  padding-left: 5px;
  text-align: justify;
  text-justify: inter-word;
}
#quizapp .card, .card.bg-grey{background: #f4f3f3;}
#quizapp input{
  display: block;
  width: 100%;
}
input.input-result{width: 80%!important;display: inline-block!important;}
.head-comment {
  padding: 12.5px 33px;
  text-align: center;
  color: #fff;
  background-color: #337ab7;
  display: inline-block;
  margin-bottom: 20px;
}
.text-answ {
    margin-bottom: 30px;
}
.comment-section{margin-top: 30px;padding: 0;}

/*Loading overlay*/
.loading-overlay {
  display: none;
  background: rgba(250, 250, 250, 0.93);
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1100;
  top: 0;
  left: 0;
}
 
.loading-overlay-image-container {
  display: none;
  position: fixed;
  z-index: 1101;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
}
.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-icon{
  font-size: 80px;
  color: #59d;
}
/*End Loading*/

.title-subqs{margin: 22px 0 5px!important;}
.wrap-img-options{margin: 40px 0 30px;display: inline-block;width: 100%;}
.img-item.answer-op-item {
  padding: 10px;
  cursor: pointer;
  position: relative;
}
.is-result .img-item.answer-op-item{margin-top: 26px;}
.wrap-img-options .answer-op-item img{
  width: 100%;
  height: auto;
  max-height: 150px;
  overflow: scroll;
}
.img-op-content {
    display: inline-block;
    width: 100%;
}
.col-sm-2.img-item.answer-op-item.active {
  background: #06afe1;
}
.marker-result {
    position: absolute;
    top: -45px;
    left: 35%;
}
.wrap-answqut {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
}
.wrap-answtxt {
    display: inline-block;
    width: 100%;
    margin: 10px 0;
    position: relative;
}
.wrap-answtxt .marker-result{left: 42%;}
.wrap-answtxt>div{margin-bottom:15px; }
.is-result .wrap-answtxt>div{margin-bottom:35px; }
.head-comment.active{background: #06afe1;}

.answ-op-item{display: none;}
.answ-op-item.active{display: block;}
.text_ques {
    margin-bottom: 20px;
}
.answ-op-item .container-checkbox{margin-right: 10px;}
#quizapp .wrap-pat4 {
    display: inline-block;
}
#quizapp .wrap-pat4 input {
    width: 40px;
    display: inline-block;
}
span.wrap-rsl-p4 {
    position: relative;
}
span.wrap-rsl-p4 i {
    position: absolute;
    top: -55px;
    left: -2%;
}
.wrap-map{margin: 30px 0;}
.connectedSortable{
  border: 1px dashed #9f9f9f;
  padding: 30px 0;
}
/*.sortableChoose div.wrap-answ[class^="col-"]{width: 100%!important;}*/
.connectedSortable.sortableChoose {
    background: #fff;
}
#exams_results td>.label{text-transform: none;}
.gr-btn-actions {
  text-align: center;
  display: inline-block;
  width: 100%;
  margin-top: 30px;
}
.show-mark-result{width: 42px;height:42px;margin-top: -6px;display: inline-block;vertical-align: middle;}
.content-term {padding: 0 20px;}
.box-cnt {margin-bottom: 20px;}
.orderlists li {list-style-type: decimal;margin-bottom: 10px;font-size: 14px;}
.title-exam h5 {font-size: 20px!important;}
.btninfobox{padding-right: 0!important;padding-left: 10px!important;}
.btninfobox .logo-exam {width: 60px!important;}
input, select, textarea {
    border: 1px solid #ccc;
}
#main-content-testing .pagination>li {
    display: inline-block;
    margin-bottom: 10px;
}
.gr-btn-actions .btn{width: 115px;}
.comment-section>div {
    padding: 0;
}
.question-desc>div {
    padding: 0 5px 0 0;
}
.question-desc, .question-desc>div, .question-desc>div p {
    font-size: 15px;
}
.comment-section button.btn {
    width: 115px;
    margin-left: 10px;
}
.comment-section .head-comment{
  width: 115px;
  margin-right: 10px;
}
.comment-section button.btn{margin-top: 0;}
.comment-section button.btn.btn-comment{background-color: #337ab7;margin-left: 0;}
.comment-section button.btn-comment.btn-hidecmt{background-color: #999999;}
.comment-section .question-desc.hidecmt-text{display: none;}
.wrap-answ .head-comment{padding: 12px;width: 100%;}
a.quizz-action {
    margin-right: 15px;
}
.fa-check-circle.text-green:before, .fa-times-circle.text-red:before{content: none;}
.fa-check-circle.text-green {
    background: url(../img/true_red.png) no-repeat;
    background-size: contain;
    width: 42px;
    height: 42px;
}
.fa-times-circle.text-red {
    background: url(../img/false_green.png) no-repeat;
    background-size: contain;
    width: 42px;
    height: 42px;
}
#quizapp .input-result {
    float: left;
    margin-right: 5px;
}
.is-result .question_how_to{display: inline-block;width: 100%;margin-top: 8px;}
.text-red.correct-text {
    display: inline-block;
    width: 100%;
    margin-top: 8px;
}
.is-result .wrap-answ .text-red {
    color: #cd0303!important;
    float: left;
    margin-right: 10px;
    margin-top: 5px;
}
.is-result .wrap-answ .fas.fa-times-circle.text-red {
    margin-top: -1px;
}
.answ-op-item .text-resulttrue{display: inline-block;width: 100%;}
.wrap-answSort .content-sort{padding-left: 5px; padding-right: 5px;}
.wrap-answSort .resultSortable {
    border: 1px dashed #9f9f9f;
    background: #fff;
    padding: 30px 0;
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
}
.resultSortable .col-sm-3.wrap-answ {
    width: 100%!important;
    padding: 0 5px;
}
.resultSortable .head-comment{margin-bottom: 0px;}
.answ-op-item .container-checkbox .checkmark{
  border-radius: 50%;
}
.curpoints {
    font-size: 30px;
}
/*P9*/
#quizapp .answer-section-scroll {
    display: inline-block;
    width: 100%;
    /*max-height: 500px;
    overflow-x: scroll;*/
    padding-top: 50px;
}
.question-type-9 .wrap-answ {height: 120px;padding: 0;margin-bottom: 10px;}
.col-sm-12.wrap-imgtf-options {display: inline-block;width: 100%;}
.question-type-9 .image-subqs {position: relative;}
.question-type-9 .image-subqs>img{position: absolute;top: -48px;width: 72%;}
.question-type-9 .show-result{text-align: center;}
.question-type-9.is-result .wrap-answ .text-red{float: none;}
.question-type-9.is-result .wrap-answ .fas .fa-check-circle.text-green, .question-type-9.is-result .wrap-answ .fas.fa-times-circle.text-red{display: block;margin: 0 auto;}
/*P10 P11*/
.question-type-10 .text-item,.question-type-11 .text-item {position: relative;display: inline-block;width: 100%;}
.question-type-10 .answer-op-item, .question-type-11 .answer-op-item {cursor: pointer;padding: 10px;}
.question-type-10 .answer-op-item.active,.question-type-11 .answer-op-item.active {background: #06afe1;}
.question-type-10 .answer-op-item:hover,.question-type-11 .answer-op-item:hover{background: #36c5f0;}
.result-num.numberCircle{
  background: transparent;
  color: #cd0303;
  border-color: #cd0303;
  margin: 0;
  width: 22px;
  height: 22px;
  line-height: 21px;
}
.text-item .numberCircle{margin-top: 10px;}
/*P12*/
.imgtf-item.answer-op-item {
    padding: 0 10px;
}
.checkTF {
    text-align: center;
    margin-top: 20px;
}
/*.checkTF .container-checkbox .checkmark{
  background-color: #fffce0;
  border: 1px solid #141313;
}*/
ol.level-desc{list-style-type: disc;}
#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}
.btn.closeConfirm{margin-bottom: 15px;}
.modal-title#confirmymsLabel {margin-bottom: 0;}
.confirm-content .fas.fa-question-circle{font-size: 30px;margin-right:5px; }
.modal-footer .btn.closeConfirm{margin-bottom: 10px;}
.page-content-wrap .header-primary h4.card-title{margin-bottom: 5px!important;margin-top: 7px!important;}
a.btn.btn-primary.down-cert {font-size: 25px;padding: 15px!important;}
button.label.btn-noaction {cursor: initial;box-shadow: none!important;}
@media (min-width: 900px){
  #quizapp button.ch-level.btn{width: 19%;padding-left: 20px;padding-right: 20px;}
}
@media (max-width: 768px){
  .choose-level button{margin: 10px;}
  .connectedSortable{width: 90%;}
  .question-desc {height: 300px;}
}
@media (max-width: 767px){
  .quiz-testing .title-exam{margin-top: 55px;}
  .quiz-testing .btninfobox {
      position: absolute;
      top: 10px;
      right: 0;
  }
  #chartdiv {
    height: 500px;
  }
  .comment-section button.btn.btn-comment{margin-left: 10px;}
  .is-result .img-item.answer-op-item{margin-bottom: 10px;}
  .wrap-answSort .resultSortable{width: 90%;}
  .wrap-answqut{margin-bottom: 30px;}
  .show-result{
    display: inline-block;
    width: 100%;
    margin-top: 13px;
  }
  .answer-ops{padding: 0!important;}
}

@media (max-width: 767px){
  .question-type-9 .image-subqs>img {
    top: -10px;
    width: 60%;
  }
  .is-result .question-type-9 .wrap-answ .text-red{margin-top: 0;}
  .question-type-9 .show-result{margin-bottom: 30px;}
}