/* =Scout form customization starts here
------------------------------------------------------- */

.test_completed .ff-el-input--label,
.test_completed .ff-el-form-control{
	display:none!important;
}
.test_completed .error.text-danger{
	font-size: 20px!important;
	text-align: center!important;
}
.ff-el-signature__actions-hint.fluentform-signature-hint {
    color: #000;
    font-size: 16px;
}
.step-nav.ff_step_nav_last button{
	cursor:pointer;
}
.fluentform .ff-step-t-container.ff-inner_submit_container .ff-el-group {
    margin-bottom: 0 !important;
}
.ff-btn-submit{
	text-transform: uppercase!important;
}
.choices__list--dropdown{
	max-height:none!important;
}

/* =QUIZ customization starts here
------------------------------------------------------- */

#modal-quiz {
  display: flex;
  flex-direction: column;
  width: 600px;
  background: #fff;
  padding: 0px;
  overflow-y: auto;
}
#quiz-header {
  background: #63ff9d;
  padding: 30px;
  text-align: center;
}
#quiz-header h2 {
  font-size: 35px;
  font-family: "National Champion";
  color: #6d01ff;
  padding: 0;
}

#question-page,
#summary-page,
#start-page {
  display: flex;
  flex-direction: column;
  flex-grow: 2;
}
#progress-info {
  font-size: 14px;
  margin-bottom: 3px;
  text-transform: uppercase;
}
#progress-tiles {
  display: flex;
  justify-content: stretch;
  gap: 1px;
  margin-bottom: 20px;
}


#start-btn,
#next-btn,
#close-btn {
  font-family: "National Champion";
  text-transform: uppercase;
  padding: 10px 30px;
  font-size: 15px;
  cursor: pointer;
  border: none;
  background-color: #ff00ed;
  color: #FFF;
}
#next-btn {
  font-size: 13px;
}

#sticky-footer {
  position: sticky;
  bottom: 0;
  background: #F1F5FB;
  width: 100%;
  box-shadow: #ddd 0px 0px 15px;
  padding: 15px 0;
  text-align: center;
  border-top: 1px solid #ddd;
  display: none;
}
#quiz-timer {
  display: inline-block;
  margin-right: 5px;
  text-transform: uppercase;
}
#quiz-seconds {
  display: inline-block;
  width: 27px;
  height: 27px;
  padding: 2px;
  color: #FFF;
  text-align: center;
  border-radius: 50%;
  background: #6b00ff;
}
#quiz-seconds.warning {
  background: #ff0000;
  font-weight: bold;
  animation: pulse 1s infinite;
}
#timer {
  font-weight: bold;
  color: #000;
  margin: 0 0 5px 0;
  text-align: center;
  text-transform: uppercase;
}

.quiz-body {
  font-size: 17px;
  padding: 30px;
  flex-grow: 2;
}
.quiz-body ul {
  list-style: disc;
  padding-left: 20px;
}
.quiz-footer {
  padding: 30px 0;
  text-align: center;
  border-top: 1px solid #ddd;
  background: #f1f5fb;
}

.progress-tile {
  flex: 1 1 0;
  height: 10px;
  background: #F1F5FB;
  transition: background 0.3s;
}
.progress-tile.done {
  background: #62ff9d;
}
.progress-tile.active {
  background: #2e7d32;
}

.quiz-question {
  display: none;
}
#question-block .question {
  font-size: 19px;
  line-height: 1.3em;
  padding: 10px 0 20px;
  text-transform: uppercase;
  font-weight: bold;
}
#question-block .quiz-image {
  text-align: center;
}

#question-block img,
#question-block video {
  width: 100%;
  max-width: 450px;
  height: auto;
  margin-bottom: 20px;
  border-radius: 6px;
}
#question-block .answers label {
  display: block;
  margin-bottom: 8px;
  cursor: pointer;
  font-weight: normal;
}

#summary-page .quiz-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
#summary-page h3 {
  color: #000;
  font-size: 25px;
  font-weight: bold;
}
#summary-score {
  font-size: 80px;
  line-height: 1em;
  font-weight: bold;
  color: #000;
  margin: 0 0 30px 0;
}

.tmp-debug {
  font-size: 10px;
  color: #CCC;
  display: none;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}