.h5p-theme-result-screen {
  container-name: h5p-theme-result-screen;
  container-type: inline-size;
}

/* Main banner */
.h5p-theme-results-banner {
  position: relative;
  display: flex;
  background-color: var(--h5p-theme-main-cta-base);
  color: var(--h5p-theme-contrast-cta);
  padding: var(--h5p-theme-spacing-xl)  var(--h5p-theme-spacing-xl) calc(var(--h5p-theme-spacing-xl)*1.2) var(--h5p-theme-spacing-xl);
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;

  @container h5p-theme-result-screen (max-width: 576px) {
    padding: var(--h5p-theme-spacing-m)  var(--h5p-theme-spacing-m) calc(var(--h5p-theme-spacing-m)*1.2) var(--h5p-theme-spacing-m);
  }
}

.h5p-theme-results-title {
  color: var(--h5p-theme-contrast-cta);
  font-size: var(--h5p-theme-font-size-xxl);
  font-weight: 600;
  z-index: 1;

  @container h5p-theme-result-screen (max-width: 576px) {
    font-size: var(--h5p-theme-font-size-xl);
  }
}

.h5p-theme-results-score {
  color: var(--h5p-theme-contrast-cta);
  font-size: var(--h5p-theme-font-size-xl);
  font-weight: 600;
  z-index: 1;

  @container h5p-theme-result-screen (max-width: 576px) {
    font-size: var(--h5p-theme-font-size-l);
  }
}

.h5p-theme-results-score span {
  color: var(--h5p-theme-contrast-cta);
  padding: 0 0.2em;
}

/* List container */
.h5p-theme-results-list-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  clear: both;
  margin: calc(-1 * var(--h5p-theme-spacing-l)) var(--h5p-theme-spacing-xl) var(--h5p-theme-spacing-l) var(--h5p-theme-spacing-xl);
  box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.08);
  background-color: var(--h5p-theme-ui-base);
  border-radius: var(--h5p-theme-border-radius-small);
  position: relative;
  z-index: 1000;
  max-height: calc(var(--h5p-theme-spacing-xl)*10);

  @container h5p-theme-result-screen (max-width: 576px) {
    margin: calc(-1 * var(--h5p-theme-spacing-xs)) var(--h5p-theme-spacing-s) var(--h5p-theme-spacing-xs) var(--h5p-theme-spacing-s);
  }
}

/* Reset margin-top if not first list on page*/
.h5p-theme-results-list-container ~ .h5p-theme-results-list-container {
  margin-top: 0;
}

.h5p-theme-results-list {
  list-style-type: none;
  overflow: hidden;
  overflow-y: auto;
  padding-inline-start: 0;
  padding: var(--h5p-theme-spacing-xs) var(--h5p-theme-spacing-m);
  flex: 1;

  @container h5p-theme-result-screen (max-width: 576px) {
    padding: 0 var(--h5p-theme-spacing-s);
  }
}

/* List headers */
.h5p-theme-results-list-heading {
  box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.08);
  border-bottom: none;
  padding: 0 var(--h5p-theme-spacing-m);

  @container h5p-theme-result-screen (max-width: 576px) {
    padding: 0 var(--h5p-theme-spacing-s);
  }
}

.h5p-theme-results-list-heading h3 {
  font-size: var(--h5p-theme-font-size-xl);
  margin: var(--h5p-theme-font-size-m) 0;
  width: 100%;
  text-align: left;

  @container h5p-theme-result-screen (max-width: 576px) {
    font-size: var(--h5p-theme-font-size-m);
    margin: var(--h5p-theme-font-size-s) 0;
  }
}

.h5p-theme-results-list-heading h3:last-child:not(:first-child) {
  grid-column: 3;
}

/* Questions */
.h5p-theme-results-list-item,
.h5p-theme-results-list-heading {
  display: grid;
  grid-template-columns: 1fr 8fr 1fr;
  color: var(--h5p-theme-text-primary);
  justify-items: center;
  border-bottom: solid 1px var(--h5p-theme-stroke-1);
  line-height: 1.5rem;
}

/* Only has question and score */
.h5p-theme-results-list-item:has(.h5p-theme-results-question-container:first-child),
.h5p-theme-results-list-container:has(.h5p-theme-results-question-container:first-child) .h5p-theme-results-list-heading {
  grid-template-columns: 9fr 1fr;
}

.h5p-theme-results-list-item:last-child {
  border-bottom: none;
}

.h5p-theme-results-question-container {
	width: -webkit-fill-available;
  width: 100%;
  text-align: left;
	padding: var(--h5p-theme-spacing-xs) var(--h5p-theme-spacing-m);

  @container h5p-theme-result-screen (max-width: 576px) {
    padding: var(--h5p-theme-spacing-xxs) var(--h5p-theme-spacing-s);
  }
}

.h5p-theme-results-question {
  font-size: var(--h5p-theme-font-size-l);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;

  @container h5p-theme-result-screen (max-width: 576px) {
    font-size: var(--h5p-theme-font-size-m);
  }
}

.h5p-theme-results-question:not(:last-child) {
  margin-bottom: var(--h5p-theme-spacing-xs);
}

/* Custom scrollbar */
.h5p-theme-results-list::-webkit-scrollbar {
  background-color: var(--h5p-theme-ui-base);
  width: 0.5em;
  border-radius: 1em;
}

.h5p-theme-results-list::-webkit-scrollbar-thumb {
  background-color: var(--h5p-theme-text-primary);
  background-size: 24px 100%;
  border-radius: 0;
}

.h5p-theme-results-list::-webkit-scrollbar-button:vertical {
  background-size: 20px 20px;
  background-position-x: -4px;
  background-position-y: -3px;
  background-repeat: no-repeat;
}

.h5p-theme-results-list::-webkit-scrollbar-button:vertical:decrement,
.h5p-theme-results-list::-webkit-scrollbar-button:vertical:increment {
  display: none;
}

.h5p-theme-results-points {
  color: var(--h5p-theme-text-primary);
  font-weight: bold;
  font-size: var(--h5p-theme-font-size-m);
  align-self: center;
  justify-self: end;
}

/* Image */
.h5p-theme-results-image {
  height: calc(var(--h5p-theme-spacing-xl)* 1.5);
  width: calc(var(--h5p-theme-spacing-xl)* 2);
  background-size: contain;
  background-position: center center;
  background-color: var(--h5p-theme-ui-base);
  background-repeat: no-repeat;
  background-origin: content-box;
  border-radius: var(--h5p-theme-border-radius-large);
  border: solid 4px var(--h5p-theme-ui-base);
  margin: auto var(--h5p-theme-spacing-m) auto 0;
}

.h5p-theme-results-image.default-image {
  background-color: var(--h5p-theme-alternative-base);
  text-align: center;
}

.h5p-theme-results-image.default-image:after {
  font-family: 'H5PFontAwesome4';
  content: "\f03e";
  font-size: 2rem;
  line-height: 2.2;
  color: var(--h5p-theme-text-third);
}

/* Answers */
.h5p-theme-results-answer {
  margin-right: 4.5em;
  font-size: var(--h5p-theme-font-size-m);
  overflow-wrap: break-word;
  color: var(--h5p-theme-text-third);
}

.h5p-theme-results-answer .h5p-theme-results-incorrect,
.h5p-theme-results-answer .h5p-theme-results-correct,
.h5p-theme-results-answer .h5p-theme-results-solution {
  display: inline-block;
  border-radius: var(--h5p-theme-border-radius-small);
  padding: calc(var(--h5p-theme-spacing-xs)/8) var(--h5p-theme-spacing-xs);
  margin-bottom: calc(var(--h5p-theme-spacing-xs));
  border: solid 2px;
  font-weight: 600;
  font-size: var(--h5p-theme-font-size-m);
}

.h5p-theme-results-answer .h5p-theme-results-correct,
.h5p-theme-results-answer .h5p-theme-results-solution {
  background-color: var(--h5p-theme-feedback-correct-secondary);
  color: var(--h5p-theme-feedback-correct-main);
  border-color: var(--h5p-theme-feedback-correct-third);
}

.h5p-theme-results-answer .h5p-theme-results-incorrect {
  background-color: var(--h5p-theme-feedback-incorrect-secondary);
  color: var(--h5p-theme-feedback-incorrect-main);
  border-color: var(--h5p-theme-feedback-incorrect-third);
  margin-right: var(--h5p-theme-spacing-xxs);
}

.h5p-theme-results-answer .h5p-theme-results-solution {
  border-style:  dotted;
}

.h5p-theme-results-answer .h5p-theme-results-solution .h5p-theme-results-solution-label {
  color: var(--h5p-theme-feedback-correct-main);
  font-style: italic;
  font-weight: normal;
}

.h5p-theme-results-answer .h5p-theme-results-box-small {
  color: var(--h5p-theme-feedback-correct-main);
}

.h5p-theme-results-answer .h5p-theme-results-box-small:before {
  font-family: 'h5p-theme';
  content: "\e903";
}

.h5p-theme-results-answer .h5p-theme-results-box-small:not(:empty)::before {
  padding-right: var(--h5p-theme-spacing-xxs);
}

.h5p-theme-results-answer .h5p-theme-results-incorrect.h5p-theme-results-box-small {
  color: var(--h5p-theme-feedback-incorrect-main);
}

.h5p-theme-results-answer .h5p-theme-results-incorrect.h5p-theme-results-box-small:before {
  content: "\e902";
}

.h5p-theme-result-screen + .buttons {
  container-type: inline-size;
}