@media only screen and (max-width: 768px) {
  .box_quizz .article-header {
    min-height: 170px;
  }
}

.article-header h1 {
    padding-bottom: 86px;
}

.box_quizz .quizzQuestionItem {
  margin-top: 50px;
}

.box_quizz .article-description p {
  font-size: 20px;
}

.box_quizz .questionFollowUp {
  color: var(--mainQuizzColor);
  font-size: 36px;
  display: flex;
  align-items: center;
}
.box_quizz .questionFollowUp > * {
  flex-grow: 0;
  flex-shrink: 0;
}
.box_quizz .questionFollowUp .questionSwiper {
  margin-right: 10px;
}
.box_quizz .questionFollowUp .questionSwiper > * {
  background-color: var(--mainQuizzColor);
  -webkit-mask-image: url(/themes/swi/images/quizz/questionSwipper.svg);
  mask-image: url(/themes/swi/images/quizz/questionSwipper.svg);
  width: 20px;
  height: 20px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.box_quizz .questionFollowUp .questionSwiper > *.disable {
  opacity: 0.3;
}
.box_quizz .questionFollowUp .questionSwiper > *:not(.disable) {
  cursor: pointer;
}
.box_quizz .questionFollowUp .questionSwiper .previousQuestion {
  transform: rotate(180deg);
}

.box_quizz .questionIndex {
  font-weight: bold;
}
.box_quizz .questionFollowUp:after {
  content: '';
  flex-grow: 1;
  width: 100%;
  height: 1px;
  background: #A9A9A9;
  margin-left: 20px;
}

.box_quizz .field--name-field-question {
  font-size: 26px;
  font-weight: bold;
}

.box_quizz input.chk-btn {
  display: none;
}
.box_quizz input.chk-btn + label {
  background: var(--mainQuizzColor);
  color: var(--secondaryQuizzColor);;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.box_quizz .displayAnswer input.chk-btn + label {
  cursor: unset;
}
.box_quizz .displayAnswer .selectedAnswer {
  padding: 0 15px 10px;
  border-radius: 20px;
  background-color: #0C3949;
}
.box_quizz .displayAnswer .selectedAnswer input.chk-btn + label {
  background: none;
  color: inherit;
  padding: 10px 0;
  width: 100%;
}
.box_quizz label {
  margin-bottom: 0;
}
.box_quizz .response {
  margin-bottom: 15px;
  position: relative;
}
.box_quizz .field--name-field-question {
  margin-bottom: 10px;
}
.box_quizz .displayAnswer [data-responsestatus="true"] input.chk-btn + label {
  color: #28A746;
    font-weight: bold;
}
.box_quizz .displayAnswer .response:not(.selectedAnswer)[data-responsestatus="true"] input.chk-btn + label {
  background: #0C3949;
  color: #28A746;
  border: solid 1px #28A746;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 20px;
  width: 100%;
  font-weight: bold;
}
.box_quizz .displayAnswer .selectedAnswer[data-responsestatus="false"] {
  border: solid 1px #DC3545;
}
.box_quizz .displayAnswer .selectedAnswer input.chk-btn + label:after {
  flex-shrink: 0;
  margin-left: 10px;
}
.box_quizz .displayAnswer .selectedAnswer[data-responsestatus="false"] input.chk-btn + label:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none"><circle cx="15" cy="15" r="15" fill="%23DC3545"/><rect width="3.02118" height="16.8101" rx="1" transform="matrix(0.708371 0.705841 -0.708371 0.705841 20.6875 7.82617)" fill="white"/><rect width="3.02118" height="16.8101" rx="1" transform="matrix(0.708371 -0.705841 0.708371 0.705841 8.77734 9.9585)" fill="white"/></svg>');
}
.box_quizz .displayAnswer .selectedAnswer[data-responsestatus="false"] input.chk-btn + label {
  color: #DC3545;
  font-weight: bold;
}
.box_quizz .displayAnswer .selectedAnswer[data-responsestatus="true"] {
  border: solid 1px #28A746;
}
.box_quizz .displayAnswer .selectedAnswer[data-responsestatus="true"] input.chk-btn + label:after {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none"><rect x="5.21729" y="9.13037" width="19.5652" height="14.3478" fill="white"/><path d="M15 0C6.72931 0 0 6.72931 0 15C0 23.2707 6.72931 30 15 30C23.2707 30 30 23.2707 30 15C30 6.72931 23.2707 0 15 0ZM20.7724 10.5983C21.031 10.3397 21.2897 10.0759 21.5534 9.81724C22.0862 10.319 22.6241 10.8207 23.1466 11.3328C23.1983 11.3845 23.1879 11.5552 23.1414 11.6276C23.0379 11.7879 22.8983 11.9224 22.769 12.0621C22.2776 12.5586 21.781 13.05 21.2897 13.5466C20.4983 14.3276 19.7017 15.1086 18.9155 15.8948C17.3379 17.4672 15.7655 19.05 14.1931 20.6224C13.8828 20.9276 13.5672 21.2379 13.2569 21.5431C12.8328 21.9621 12.8328 21.9672 12.419 21.5431C11.4052 20.4983 10.4017 19.4483 9.38276 18.4138C8.61724 17.6379 7.83621 16.8776 7.06034 16.1121C6.97241 16.0138 6.88448 15.9103 6.79138 15.8121C6.85862 15.719 6.91034 15.6155 6.9931 15.5328C7.42759 15.0879 7.86724 14.6534 8.3069 14.2138C8.44138 14.2759 8.6069 14.3121 8.71552 14.4103C9.17586 14.8397 9.62069 15.2897 10.0655 15.7345C10.919 16.5776 11.7724 17.4207 12.6155 18.269C12.8069 18.4603 12.9362 18.4655 13.1379 18.2586C14.281 17.0845 15.4397 15.931 16.5983 14.7672C17.8914 13.469 19.1793 12.1759 20.4724 10.8776C20.5759 10.7845 20.6793 10.6914 20.7776 10.5931L20.7724 10.5983Z" fill="%2328A746"/></svg>');
}
.box_quizz .displayAnswer .selectedAnswer[data-responsestatus="true"] input.chk-btn + label {
  color: #28A746;
  font-weight: bold;
}




/*input.chk-btn:not(:checked) + label:hover {
  box-shadow: 0px 1px 3px;
}
input.chk-btn + label:active,
input.chk-btn:checked + label {
  background: #eee;
}
*/
.box_quizz .responseDescriptionContainer {
  display: none;
}
.box_quizz .responseDescription {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box_quizz .responseDescription .shortDesc,
.box_quizz .responseDescription .longDesc {
  width: 100%;
}

button.toggleQuizzReponseDesc {
  background: none;
  border: solid 1px #A9A9A9;
  color: #A9A9A9;
  border-radius: 20px;
  font-weight: 700;
  padding: 3px 20px;
}
button.toggleQuizzReponseDesc:after {
  content: '-';
}
button.toggleQuizzReponseDesc.collapsed:after {
  content: '+';
}



a.quizz-teaser {
  display: flex;
  align-items: flex-end;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  height: 250px;
  position: relative;
  margin: 20px 0;
}
a.quizz-teaser:hover {
  text-decoration: none;
  color: inherit !important;
}
.quizz-teaser .teaser-image,
.quizz-teaser .teaser-image * {
  width: 100%;
  height: 100%;
}
.quizz-teaser .teaser-image {
  position: absolute;
}

.quizz-teaser .teaser-image img {
  top: 0;
  left: 0;
  object-fit: cover;
  position: relative;
}
.quizz-teaser:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  z-index: 0;
}
.quizz-description {
  display: flex;
  position: relative;
  z-index: 1;
  margin: 20px 25px;
  width: 100%;
  align-items: flex-end;
}
.quizz-description p {
  margin: 0;
  font-weight: 700;
  word-break: break-word;
}
.quizz-description .quizz-title {
  font-size: 26px;
}
.quizz-teaser .quizz-description > div:nth-child(1) {
  flex-basis: 70px;
  flex-shrink: 0;
}
.quizz-teaser .quizz-description > div:nth-child(2) {
    flex-basis: calc(100% - 70px);
}
.quizz-teaser .quizz-teaser-text-content {
  margin-left: 15px;
  width: 100%;
}

.quizz-question-image {
    margin-top: 20px;
}

.quizz-question-image .media-video {
    position: relative;
}

.quizz-question-image iframe {
    width: 100%;
    height: 100%;
    margin: 0 0 0.7em;
    border-radius: 18px;
    aspect-ratio: 16 / 9;
}
.quizzQuestionItem .field.field--name-field-media-image img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    position: relative;
    border-radius: 18px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

@media only screen and (max-width: 768px) {
    .box_quizz .field--name-field-question {
        font-size: 21px;
    }
}

.quizz-show-result-btn-container {
  text-align: center;
}

button.quizz-show-result-btn,
button.quizz-restart-btn,
button.quizz-share-btn {
  background: none;
  border: solid 1px #FFF;
  color: #FFF;
  border-radius: 40px;
  font-weight: 700;
  padding: 13px 20px;
}
.quizz-next-quizz-btn {
  background: none;
  border: solid 1px #FFF;
  color: #FFF;
  border-radius: 40px;
  font-weight: 700;
  width: fit-content;
  display: flex;
  align-items: center;
  position: relative;
  margin-left: 20px;
}
button.quizz-show-result-btn[disabled] {
  opacity: 0.3;
}

button.quizz-show-result-btn svg,
button.quizz-restart-btn svg {
  margin-left: 5px;

}
.quizz-next-quizz-btn svg {
  position: absolute;
  right: 20px;
  z-index: -1;
}
.quizz-next-quizz-btn a {
  width: 100%;
  display: inline-block;
  padding: 13px 40px 13px 20px;
}
@media only screen and (max-width: 400px) {
  button.quizz-show-result-btn,
  button.quizz-restart-btn,
  button.quizz-share-btn {
    padding: 13px 15px;
  }
  .quizz-next-quizz-btn {
    margin-left: 15px;
  }
  .quizz-next-quizz-btn a {
    padding: 13px 30px 13px 15px;
  }
  .quizz-next-quizz-btn svg {
    right: 14px;
  }
  button.quizz-restart-btn,
  button.quizz-share-btn,
  .quizz-next-quizz-btn {
    font-size: 15px;
  }

}

.quizz-next-quizz-btn a:hover {
  text-decoration: none;
  color: white !important;
}

button.quizz-share-btn svg {
  margin-right: 5px;
}

.question-result span {
  color: #FFF;
  font-size: 36px;
  font-style: normal;
  font-weight: bold;
  line-height: 140%;
}

.question-result .my-score {
  margin-top: 50px;
}

.question-result .my-score .my-note {
  color: var(--mainQuizzColor);
  font-size: 75px;
}

.question-result {
  text-align: center;
}

.quizz-result-btn-container div.share-data {
  background-color: unset;
}

.quizz-result-btn-container button,
.quizz-result-btn-container .quizz-next-quizz-btn {
  margin-bottom: 50px;
}

.quizz-result-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
}


#quizz-show-my-result {
  margin-top: 80px;
  margin-bottom: 80px;
}

.box_quizz .my-result {
  margin-top: 40px;
  margin-bottom: 30px;
  font-weight: 700;
}
.box_quizz .levelContainer {
  margin-bottom: 50px;
}
.box_quizz .field--name-field-encouragement p {
  text-transform: uppercase;
  font-size: 40px;
}
.box_quizz .field--name-field-texte-d-accompagnement {
  text-align: initial;
  margin-top: 10px;
}