.quizz-component input[type='text'],
input:not([type]),
textarea {
  font-size: 1.000rem;
}

.quizz-component label {
  display   : block;
  margin-top: 10px;
}



.quizz-component .required-asterisk,
.quizz-component .required-message {
  font-family: "Roboto";
  color      : rgb(196, 59, 29);
  font-weight: 400;
  font-size  : 1.000rem;
  font-style : normal;
  color      : #c43b1d;
}

.quizz-component .required-message {
  margin-top: 5px;
}

.quizz-component .required-asterisk {
  margin-left: 5px;
}

.quizz-component .text {
  border : 1px solid #bbb;
  padding: 0.4em 0.6em;
}

.quizz-component textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing   : border-box;
  box-sizing        : border-box;
  width             : 95%;
}

.quizz-component input {
  visibility: hidden;
}

.quizz-component a.button {
  color: #444;
}

.quizz-component .button {
  display         : inline-block;
  background-color: #f5f5f5;
  background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
  background-image: -moz-linear-gradient(top, #f5f5f5, #f1f1f1);
  background-image: -ms-linear-gradient(top, #f5f5f5, #f1f1f1);
  background-image: -o-linear-gradient(top, #f5f5f5, #f1f1f1);
  background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
  color           : #444;

  border               : 1px solid #dcdcdc;
  -webkit-border-radius: 2px;
  -moz-border-radius   : 2px;
  border-radius        : 2px;

  cursor         : default;
  font-size      : 14px !important;
  font-weight    : bold;
  text-align     : center;
  text-decoration: none;
  height         : 27px;
  line-height    : 27px;
  min-width      : 54px;
  padding        : 0 8px;
  margin-top     : 15px;
  margin-right   : 15px;
}

.quizz-component .button:hover {
  background-color: #F8F8F8;
  background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
  background-image: -moz-linear-gradient(top, #f8f8f8, #f1f1f1);
  background-image: -ms-linear-gradient(top, #f8f8f8, #f1f1f1);
  background-image: -o-linear-gradient(top, #f8f8f8, #f1f1f1);
  background-image: linear-gradient(top, #f8f8f8, #f1f1f1);

  border         : 1px solid #C6C6C6;
  color          : #333;
  text-decoration: none;

  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, .1);
  -moz-box-shadow   : 0px 1px 1px rgba(0, 0, 0, .1);
  box-shadow        : 0px 1px 1px rgba(0, 0, 0, .1);
}

.quizz-component .button.disabled {
  color         : #aaa;
  pointer-events: none;
}

.quizz-component .button.invisible {
  display: none
}


.button.default:active {
  -webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, .1);
  -moz-box-shadow   : inset 0px 1px 2px rgba(0, 0, 0, .1);
  box-shadow        : inset 0px 1px 2px rgba(0, 0, 0, .1);
  color             : black;
}

.quizz-component button#backBtn {
  background: #fff;
  padding   : 5px 10px;
  height    : auto;
  width     : auto;
  cursor    : pointer;
}

.quizz-component button#nextBtn {
  float     : right;
  background: #fff;
  padding   : 5px 10px;
  height    : auto;
  width     : auto;
  cursor    : pointer;
}

.quizz-component button#nextBtn.black {
  background: #313131;
  color     : #fff;
}

.quizz-component .question {
  margin-top   : 10px;
  margin-bottom: 20px;
}

.quizz-component .question-text {
  font-size    : 1.5rem;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}

.quizz-component .answer label {
  margin-bottom   : 5px;
  cursor          : pointer;
  background-color: #eeeeee;
  padding         : 12px;
  position: relative;
}

.quizz-component .answer.not-answered label:hover {
  transition      : all .2s ease-in-out;
  transform       : scale(1.10);

}

.quizz-component .answer label.selected {
  border                   : 2px solid #cc3a00;
  border-radius            : 3px;
  border-top-left-radius   : 5px;
  border-bottom-left-radius: 5px;
  border-left              : 8px solid #cc3a00;
  margin-left              : -8px;
  -webkit-transition       : border 10ms linear;
  -ms-transition           : border 10ms linear;
  transition               : border 10ms linear;
}
.quizz-component .answer label.selected::after {
  content: "✖";
  font-size: 30px;
  color: #cc3a00;
  float: right;
  transform: scale(0.7);
  position: absolute;
  right: 20px;
  top: var(--top-px);
}

.quizz-component .answer label.correct-poll {
  border                   : 2px solid #212121;
  border-radius            : 3px;
  border-top-left-radius   : 5px;
  border-bottom-left-radius: 5px;
  border-left              : 8px solid #212121;
  margin-left              : -8px;
  -webkit-transition       : border 10ms linear;
  -ms-transition           : border 10ms linear;
  transition               : border 10ms linear;
}

.quizz-component .answer label.correct-poll::after {
  content: "";
}

.quizz-component .answer label.correct {
  border                   : 2px solid #39CC00;
  border-radius            : 3px;
  border-top-left-radius   : 5px;
  border-bottom-left-radius: 5px;
  border-left              : 8px solid #39CC00;
  margin-left              : -8px;
  -webkit-transition       : border 10ms linear;
  -ms-transition           : border 10ms linear;
  transition               : border 10ms linear;
}

.quizz-component .answer label.correct::after {
  content: "✔";
  font-size: 30px;
  color: #39CC00;
  transform: scale(0.7);
  position: absolute;
  right: 20px;
  top: var(--top-px);
}

.quizz-component .answer label .percent-bar {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 5px;
}

.quizz-component .answer label .percent {
  height: 3px;
  background-color: #212121;
}

.quizz-component .comment {
  font-size: 28px;
  margin-top: 25px;
  font-weight: 900;
  padding-bottom: 20px;
}

.quizz-component .comment.show-bottom-border {
  border-bottom: 2px solid #212121;
}

.quizz-component .comment .answer-explanation {
  font-size: 16px;
  margin-top: 10px;
  font-weight: 400;
  color: #000000;
}
.quizz-component .comment svg {
  width: 45px;
  height: 45px;
}

.quizz-component .comment.correct {
  color: #39CC00
}

.quizz-component .comment.wrong {
  color: #cc3a00
}

.quizz-component .prc {
  margin-top: 20px;
}

.quizz-component .question-image img {
  width: 100% !important;
}