/* ---------------------------- STYLING AF HELE MODULET ---------------------------- */
.quiz-module {
  width: 75%; /* Benyttes til at illustrere opsætningen på siderne - skal sletts ved deploy */
  height: 550px; /* En fast højde på modulet */
  margin: 0 auto; /* Placerer boksen i midten af skærmen*/
  border: 1px solid #7284FA; /* Giver en tynd kant rundt om hele modulet */
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); /* Giver skygge rundt om boksen, så den står mere ud */
  padding-left: 70px; /* Den indvendige padding i venstre side */
  padding-right: 70px; /* Den indvendige padding i højre side */
  border-radius: 15px; /* Giver hele modulet (boksen) afrundede kanter */
}

@media only screen and (max-width: 750px) {
  .quiz-module {
    width: 90%; /* Bredden på quizmodulet i mobil tilstand */
    height: 650px;
    padding: 40px 40px; /* Alt indhold har 40px ud til quizzens horisontale kanter */
  }
}

/* STYLING AF PROCESSBAREN */
.progress-bar {
  opacity: 0; /* Progressbaren vises ikke på startsiden */
  display: flex; /* Placerer linjerne på en linje */
  gap: 10px; /* Skaber afstand mellem hver linje */
  justify-content: center; /* Placerer linjerne i midten */
  margin-top: 40px; /* Afstand til toppen */
  transition: opacity 0.5s ease; /* Overgang mellem opaciteten på processbaren */
}

@media only screen and (max-width: 480px) {
  .progress-bar {
    margin: 0; /* Nulstiller al margin for denne */
  }
}

.progress-bar.show {opacity: 1; /* Processbaren vises ved klik på start */}

.progress-step {
  width: 40px; /* En fast bredde på hver linje */
  height: 4px; /* En fast højde på linjen */
  background-color: #E9E8FA; /* Baggrundsfarven */
  border-radius: 2px; /* Skaber afrundede kanter */
  transition: background-color 0.3s ease; /* Baggrundsfarven skifter med en trasition */
}

/* ---------------------------- STYLING AF STARTSIDEN ---------------------------- */
.quiz-module-start-text {margin-top: 137px; /* Afstanden fra startteksten op til progress-baren */}

@media only screen and (max-width: 480px) {
  .quiz-module-start-text {margin-top: 140px; /* Afstand fra top af quiz-modul ned til teksten */}
}

.quiz-module-start-text h2 {
  color: #7284FA; /* Eyebrow-headling får en anden farve */
  margin: 0; /* Margin default styling fra master css fjernes */
}

@media only screen and (max-width: 480px) {
  .quiz-module-start-text h1 {
    font-size: 28px; /* Ændrer font-størrelsen */
  }
  
  .quiz-module-start-text h2 {
    font-size: 22px; /* Ændrer font-størrelsen */
  }
}

/* STYLING AF STARTKNAP */
.quiz-start-button-container { 
  display: flex; /* Gør det muligt at placere knappen */
  justify-content: flex-end; /* Placerer startknappen i højre side*/
  margin: 90px 0 36px; /* Oven- og nedstående afstand */
}

@media only screen and (max-width: 480px) {
  .quiz-start-button-container {
    margin: 150px 0 0; /* Skaber en afstand på 150px til top og nulstuller anden margin*/
  }
}

/* ---------------------------- STYLING AF SPØRGSMÅL- OG SVARSIDEN ---------------------------- */
.question-and-answer {
  display: flex; /* Placerer indholdet på en horisontal linje */
  gap: 70px; /* Skaber afstand mellem de to containere */
  align-items: center; /* Placerer indholdet centreret på den vertikale retning, så det står på den horisontale linje */
  margin-top: 100px; /* Afstand mellem top og indholdet af spørgsmål og svar */
  height: 240px; /* Containeren har altid en fast højde */
}

@media only screen and (max-width: 990px) {
  .question-and-answer {
    flex-direction: column; /* Indholdet placeres på en vertikal linje */
    margin: 0; /* Al margin nulstilles */
    padding: 0; /* Padding nulstilles */
    height: 525px; /* Højden på quiz-modulet minus padding i top og bund og submitknappens højde */
    gap: 0; /* Nulstiller gap fra desktop */
    justify-content: space-between; /* Spørgsmålet og svarmulighederne skubbes op til toppen og ned til bunden af containeren */
  }
  
  .question-and-answer > div > h2 {
    margin-top: 35px; /* Placerer overskriften 60px fra top */
    text-align: center !important; /* Sikrer at indholdet palceres i midten */
    font-size: 20px;
  }
}

.question-and-answer > div {
  flex: 1; /* Begge div'er får samme bredde */
}

.quiz-module-answer-options {
  display: flex; /* Placerer elementerne på linje */
  flex-direction: column; /* Elementerne placeres på en horisontal linje */
  justify-content: center; /* Det placeres i midten af containeren */
  align-items: center; /* Det placeres i midten af containeren */
}

@media only screen and (max-width: 480px) {
  .quiz-module-answer-options {
    width: 100%; /* Containeren med svarmuligheder fylder hele bredden */
  }
}

/* STYLING AF SPØRGSMÅL- OG SVARMULIGHEDSSIDEN */
.answer-option {
  width: 100%; /* En fast bredde */
  min-height: 45px; /* En fast højde */
  font-size: 14px; /* Fontstørrelsen */
  background-color: #E9E8FA; /* Giver en baggrundsfarve */
  border: 1px solid #7284FA; /* Giver en kant */
  border-radius: 50px; /* Afrunder kanterne */
  cursor: pointer; /* Tydeliggør at det er klikbart*/
  margin-bottom: 15px; /* Der skabes en afstand på 15px til understående elementer */
  color: #000; /* Gør skriftfarven sort, der overruler master-css */
  padding: 0; /* Fjern default button styling */
  line-height: normal; /* Fjern default button styling */
  transition: all 0.1s ease; /* Overgangen fra hover til !hover */
}

@media only screen and (max-width: 375px) {
  .answer-option {
    font-size: 14px; /* Fontstørrelsen for mindre skærme */
  }
}

/* STYLING AF SVARMULIGHEDER */
.answer-option:hover {
    background-color: #B7C1FC; /* Lidt mørkere når den besøgende hover */
    outline: 2px solid #7284FA; /* Kanten bliver tykkere ved hover */
}

/* STYLING AF SVARMULIGHEDER */
.answer-option.selected {
    background-color: #B7C1FC; /* Baggrundsfarven er mere fed */
    outline: 2px solid #7284FA; /* Der benyttes outline for ikke at skubbe layoutet */
    border: none; /* Kanten på boksen i normal tilstand fjernes */
}

.answer-option.disabled {
  pointer-events: none; /* Syner ikke at elementet er klikbart */
  cursor: default; /* Cursor bliver den almidenlige mus */
}

/* STYLING AF SUBMIT-KNAP */
.submit-button-container {
  display: flex; /* Gør det muligt at placere knappen efter ønske */
  justify-content: center; /* Knappen placeres i midten */
  margin: 90px 0 36px; /* Knappens placering */
}

@media only screen and (max-width: 480px) {
  .submit-button-container {
    margin: 0; /* Nulstiller al margin for knappens container */
  }
}

/* RYSTEANIMATION PÅ SUBMIT, HVIS DER IKKE ER KLIKKET PÅ NOGET */
.submit-button.inactive {
    opacity: 0.5; /* Når knappen ikke er klikbar får den en lavere opacitet */
    cursor: not-allowed; /* Cursoren sættes til not-allowed */
}

.submit-button.active {
    opacity: 1; /* Opaciteten er 100%, når knappen er klikbar */
    cursor: pointer; /* Pointer-cursor for at tydeligør klikbarhed */
}

/* Selve rysteanimationen - fundet på W3-schools*/
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } /* Elementet flyttes 5px på x-aksen i forskellige intervaller */
  20%, 40%, 60%, 80% { transform: translateX(5px); } /* Elementet flyttes 5px på x-aksen i forskellige intervaller */
}

.shake {
  animation: shake 0.5s ease-in-out; /* Fundet på W3-schools */
}

/* GENEREL STYLING AF KNAPPER */
.quiz-module-start-button, .submit-button {
    width: 150px; /* Fast bredde til alle knapper */
    height: 45px; /* Fast minimumshøjde */
    display: flex; /* Tekst og pil stilles på linje */
    align-items: center; /* Indholdet står på linje */
    justify-content: space-between; /* Tekst til venstre, pil til højre */
    padding: 10px 20px; /* Padding omkring indholdet */
    background-color: #182975; /* Baggrundsfarven overruler master-css */
    color: #FFF; /* Giver en skriftfarve */
    border-radius: 50px; /* Skaber afrundede kanter */    
    font-size: 20px; /* Giver teksten en bestemt størrelse */
    gap: 8px; /* Mellemrum mellem tekst og pil i start-knap */
    text-decoration: none; /* Ingen underline */
    margin-top: 15px; /* Skaber en afstand til ovenstående */
}

/* Sikrer at teksten altid starter samme sted */
.quiz-module-start-button h3, .submit-button h3 {
    flex: 1; /* Må fylder lige så meget som det andre flex-element */
    text-align: left; /* Teksten placeres til venstre i boksen */
    margin: 0; /* Margin fra master-css overrules */
    font-size: 20px; /* Sætter en bestemt størrelse på heading i knappen */
    color: #FFF; /* Giver heading en bestemt farve */
}

/* Pilen placeres altid samme sted til højre */
.quiz-module-start-button svg, .submit-button svg {flex-shrink: 0; /* Forhindrer pilen i at skrumpe */}

/* ---------------------------- STYLING AF FORKLARING ---------------------------- */
.question-and-explanation {
  display: flex; /* Placerer indholdet på en horisontal linje */
  gap: 70px; /* Skaber afstand mellem de to containere */
  align-items: center; /* Placerer indholdet centreret på den vertikale retning, så det står på den horisontale linje */
  margin-top: 100px; /* Afstand mellem top og indholdet af spørgsmål og svar */
  height: 240px; /* Containeren har altid en fast højde */
}

.question-and-explanation > div {flex: 1; /* Begge div'er får samme bredde */}

.question-and-explanation > div > h2 {
  font-size: 20px;
}

.question-and-explanation h3 {
  color: #7284FA; /* Overskriftfarve på forklaringssiden */
  margin: 0; /* Fjerner al default-styling */
}

.quiz-module-answer-description {
  text-align: left; /* Indholdet placeres til venstre */
}

@media only screen and (max-width: 990px) {
  .question-and-explanation {
    flex-direction: column; /* Indholdet placeres på en vertikal linje */
    margin: 0; /* Al margin nulstilles */
    padding: 0; /* Padding nulstilles */
    height: 525px; /* Højden på quiz-modulet minus padding i top og bund og submitknappens højde */
    gap: 0; /* Nulstiller gap fra desktop */
    justify-content: space-between; /* Spørgsmålet og svarmulighederne skubbes op til toppen og ned til bunden af containeren */
    align-items: initial; /* Fjerne stylingen fra desktop-versionen */
  }
  
  .question-and-explanation h2 {
    margin-top: 35px; /* Placerer overskriften 60px fra top */
    text-align: center !important; /* Overskriften i forklaringen placeres i midten*/
  }
  
  .question-and-explanation h3 {
    text-align: left !important; /* Indholdet placeres til venstre */
    margin-top: 20px;
  }
  
  .question-and-explanation p {
    text-align: left !important; /* Indholdet placeres til venstre */
    font-size: 14px;
  }
}

/* ---------------------------- STYLING AF RESULTATER - GENERELT ---------------------------- */
.quiz-module-result-overview {
  display: flex; /* Placerer elementer på linje */
  gap: 70px; /* Skaber afstand mellem de to containere */
  align-items: start; /* Placerer indholdet centreret på den vertikale retning, så det står på den horisontale linje */
  margin-top: 100px; /* Afstand mellem top og indholdet af spørgsmål og svar */
  height: 350px; /* Containeren har altid en fast højde */
}


.share-heading {
  margin: 0; /* Nulstiller al margin for h-tags */
}

@media only screen and (max-width: 1330px) {
  .quiz-module-result-overview {
    flex-direction: column; /* Indholdet placeres på en vertikal linje */
    margin: 0; /* Al margin nulstilles */
    padding: 0; /* Padding nulstilles */
    height: 525px; /* Højden på quiz-modulet minus padding i top og bund og submitknappens højde */
    gap: 0; /* Nulstiller gap fra desktop */
    justify-content: space-between; /* Spørgsmålet og svarmulighederne skubbes op til toppen og ned til bunden af containeren */
  }
}

/* ---------------------------- STYLING AF RESULTATER - VENSTRE SIDE ---------------------------- */
.quiz-module-results-left {
  flex: 1; /* Elementerne i denne container fylder lige meget */
}

  .quiz-module-results-left {
    width: 100%; /* Bredden på elementet er 100% på mindre skærme */
    display: block; /* Add this - left visible on mobile initially */
  }
}

.score-display {
  color: #7284FA; /* Eyebrow-headling får en anden farve */
  margin: 0; /* Margin default styling fra master css fjernes */
}

@media only screen and (max-width: 375px) {
  .score-display, .share-heading {
    font-size: 20px; /* Font-størrelsen på små skræme nedjusteres */
  }
}

.toggle-container {
  display: none; /* Indholdet vises ikke i desktop */
}

@media only screen and (max-width: 1330px) {
  .toggle-container {
    display: flex; /* Elementer placeres på linje */
    align-items: center; /* Elementer placeres i midten */
    outline: 1px solid #182975; /* Giver den blå kant på toggleboksen */
    border-radius: 50px; /* Meget (!) afrundede kanter */
    background-color: #FFF; /* Hvid baggrundsfarve */
    margin: 20px 0 0; /* Afstand til ovenstående */
    height: 40px; /* Højden på containeren */
    position: relative; /* Gør det muligt at placere noget relativt (så oven på) i containeren*/
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); /* Giver skygge rundt om boksen, så den står mere ud */
    width: 100%; /* Elementet må fylde hele sin bredde */
  }
  
  .toggle-container:hover {
    cursor: pointer;
  }
  
  .toggle-container.toggle-right {
    display: none; /* Vises ikke på mobil */
  }
  
  .toggle-container.toggle-left {
    display: flex; /* Starttilstand - synlig */
  }
  
  /* Sørg for at toggle-containerene placeres korrekt */
  .quiz-module-results-left .toggle-container {
    order: 1; /* Placér efter heading */
  }
  
  .sliding-element {
    position: absolute; /* Placeres oven på det relative element */
    width: 50%; /* Bredden er 50% af containerens bredde */
    height: 100%; /* Højden må fylde 100% af sin containers højde */
    background-color: #E9E8FA; /* Baggrundsfarven på slideren */
    top: 0; /* Sikrer at elementet starter øverst */
    left: 0; /* Sikrer at elementet starter til venstre */
    border-radius: 50px; /* Afrundede kanter på elementet*/
    outline: 1px solid #182975; /* Outline på elementet */
  }
  
  .toggle-item {
    padding: 0; /* Nulstiller al padding */
    margin: 0; /* Nulstiller al margin */
    position: relative; /* Gør det muligt at placere noget absolut ift den relative */
    z-index: 1; /* Placerer indholdet øverst */
    flex: 1; /* Sørger for at indholdet fylder lige meget */
    text-align: center; /* Teksten placeres i midten af der container */
  }

  .toggle-item.active {
    color: #000; /* Skriftfarven */
  }
}

@media only screen and (min-width: 1331px) {
  .sliding-element {
    display: none; /* Elementet vises ikke på større skærme */
  }
}

/* STYLING AF KOPIERINGSTEKST */
.quiz-module-copy-text {
  border: 1px solid #7284FA; /* Kantstyling på tekstfeltet på resultatsiden*/
  border-radius: 6px; /* Giver afrundede kanter */
  width: 100%; /* Feltet må fylde 100% af sin container*/
  height: 100%; /* Feltet må fylde 100% af sin container */
  padding: 20px; /* Skaber afstand mellem teksten og dens kant */
  position: relative; /* Gør det muligt at placere børnelementer aboslut inden i */
}

@media only screen and (max-width: 1330px) {
  .quiz-module-copy-text {
    width: 100%; /* Indholdet får lov til at fylde hele containerens bredde */
    height: auto; /* Højden justereres efter indholdet */
    margin-top: 20px; /* Skaber en afstand til ovenstående */
  }
  
  .desktop-copy-icon {
    display: none; /* Ikonet i kopier-boksen vises ikke */
  }
  
  .score-display {
    margin-top: 40px; /* Skaber en afstand til ovenstående elementer */
  }
}

.copy-text-p-tags {
  width: 90%; /* En fast bredde, så tekstfelterne ikke går ind over copy-knappen */
  margin: 0; /* Fjerner al margin fra master-css */
}

@media only screen and (max-width: 1330px) {
  .copy-text-p-tags {
    width: 100%;
  }
}

.copy-text-p-tags p {
  margin: 0; /* Nulstiller al margin for disse p-tags */
}

#copy-score {
  display: inline; /* eller inline-block */
}

@media only screen and (max-width: 1330px) {
  .copy-text-p-tags p {
    font-size: 14px; /* Nedjusterer font-størrelsen */
  }
}

/* DESKTOP COPY-KNAP - BLIVER I TEKSTBOKSEN */
.desktop-copy-button {
    position: absolute;
    top: 15px; /* Knappens placering fra top */
    right: 15px; /* Knappens placering fra højre side */
    cursor: pointer; /* Pointerer at knappen er klikbar */
}

.desktop-copy-button:hover::after {
    content: "Copy"; /* Teksten inden i */
    position: absolute; /* Placering */
    bottom: 100%; /* Sikrer placeringen af beskeden */
    background: #182975; /* Baggrundsfarven på beskeden */
    color: #FFF; /* Tekstfarven på beskeden */
    padding: 4px 8px; /* Afstand omkring teksten i beskeden */
    border-radius: 4px; /* Afrundede kanter på beskeden */
    font-size: 12px; /* Skriftstørrelsen */
    white-space: nowrap; /* Bogstaver stilles på linje */
}

.desktop-copy-button.copied:hover::after {
    content: "Copied!"; /* Beskeden ændres til dette */
}

.mobile-copy-button-container {
  display: none; /* Vises ikke i default */
}

@media only screen and (max-width: 1330px) {
  .desktop-copy-button {
    display: none; /* Skjul desktop-knappen på mobil */
  }
  
  /* MOBILE COPY-KNAP STYLING */
  .mobile-copy-button-container {
    display: flex; /* Placerer indholdet på linje */
    justify-content: start; /* Placerer indholdet i starten */
  }
  
  .mobile-copy-button {
    display: flex; /* Indholdet stilles på linje */
    align-items: center; /* Elementer stilles på samme linje horisontalt */
    justify-content: center; /* Elementer stilles på samme linje vertikalt */
    background-color: #FFF; /* Baggrundsfarven for kopieringsknappen */
    border-radius: 50px; /* Afrundede kanter */
    width: 75px; /* Fast bredde */
    height: 35px; /* Fast højde */
    padding: 0; /* Nulstiller al padding */
    margin: 0; /* Nulstiller al margin */
    gap: 5px; /* Skaber en afstand på 5px mellem tekst og svg */
    cursor: pointer; /* Tydeliggør klikbarheden */
  }
}

.mobile-copy-button h5 {
  align-items: center; /* Placerer elementer i midten */
  padding: 0; /* Nulstiller padding */
  margin: 0; /* Nulstiller margin */
  color: #182975; /* Angiver farven på ikonet */
}

.mobile-copy-button-container::after {
    content: "Copied"; /* Tekst, når der klikkes på knappen */
    position: absolute; /* Gør det muligt at  */
    bottom: 100%; /* Placerer elementet i toppen */
    left: 3%; /* Placerer elementet 3% fra venstre */
    background: #182975; /* Baggrundsfarven er blå */
    color: #FFF; /* Skriftfarven er hvid */
    padding: 4px 8px; /* Padding på teksten */
    border-radius: 4px; /* Afrundede kanter */
    font-size: 12px; /* Skriftstørrelse på 'Copied' */
    white-space: nowrap; /* Teksten skifter ikke til en ny linje */
    opacity: 0; /* Skjules i default */
    pointer-events: none; /* Elementet er ikke i sig selv klikbart */
    transition: opacity 0.3s ease-in-out; /* Overgang mellem visning og skjulning */
}

.mobile-copy-button-container.copied::after {
    opacity: 1; /* Elementet vises */
}

@media only screen and (max-width: 375px) {
  .mobile-copy-button h5 {
    font-size: 16px; /* Nedjusterer header-størrelsen */
  }
}

/* ---------------------------- STYLING AF RESULTS OVERVIEW - HØJRE SIDE ---------------------------- */

.quiz-module-results-right {
  flex: 1; /* Må fylde lige så meget som de andre containere i containeren */
  flex-direction: column; /* Indholdet sættes på en verikal række */
  gap: 20px; /* Der er et gap mellem hvert spørgsmål */
  align-items: center; /* Indholdet placeres i midten */
  max-height: 350px; /* Sæt maksimal højde */
  overflow-y: auto; /* Tilføj vertikal scrollbar */
  overflow-x: hidden; /* Skjul horisontal scrollbar */
}

.mobile-heading-right {
  display: none; /* Elementet skjules */
}

@media only screen and (max-width: 1330px) {
  .quiz-module-results-right {
    display: none;
  }
}

@media only screen and (max-width: 375px) {
  .quiz-module-results-right {
    gap: 0; /* Nulstiller afstand imellem */
  }
}

/* Styling af hver 'boks' hvori spørgsmålet står */
.result-question-item {
  border-bottom: 1px solid #182975; /* Kant i bunden af hvert spørgsmål */
  padding-bottom: 15px; /* Indvendig mellemrum mellem indhold og border*/
  padding-right: 10px; /* Afstand mellem scrollbar og indhold */
  margin-bottom: 15px; /* Afstand mellem hvert spørgsmål */
}

@media only screen and (max-width: 1330px) {
  .result-question-item {
    display: none;
    width: 100%; /* Bredden må fylde 100% */
    margin-top: 20px; /* Afstand til ovenstående elementer */
    margin-bottom: 0; /* Nulstiller margin i bunden */
  }
}

.result-question-header {
  display: flex; /* Placerer spørgsmål og pil på linje */
  justify-content: space-between; /* Placerer indholdet */
  align-items: center; /* Placerer tekst og pil på en horisontal lije */
  cursor: pointer; /* Tydeligør at elementet er klikbart */
  gap: 45px; /* Spørgsmål og foldu-pil står med minimum 45px mellemrum */
}

.quiz-explanation-link {
  display: flex; /* Tekst og pil på linje */
  justify-content: end; /* Placeres i højre side af sin container */
  align-items: center; /* Tekst og pil står på en horisontal linje */
  gap: 12px; /* De står med 12px afstand til hinanden */
  text-decoration: none; /* Ingen underline */
  color: #7284FA; /* Linket får den lilla farve */
  font-weight: 500; /* Tykkelsen på linket */
}

.quiz-explanation-link svg {
  width: 24px; /* Bredden på pilen i linket */
  height: 11px; /* Højden på pilen i linket */
  transition: transform 0.4s ease; /* En effekt, der får pilen til at flytte sig frem og tilbage */
}

/* NÅR MUSEN HOLDES OVER LINKET */
.quiz-explanation-link:hover svg {
  transform: translate(8px, 0px); /* Pilens bevægelse */
}

/* NÅR MUSEN HOLDES OVER LINKET */
.quiz-explanation-link:hover .quiz-explanation-link {text-decoration: underline; /* Når der hover over linket for teksten en underline - tydeligører klikbarheden */}

/* Styling af hver overskrift i denne boks*/
.result-question-item h3 {margin: 0; /* Fjerner al margin fra master-css*/}

.result-status-text {
    margin: 0; /* Nulstiller margin */
    padding: 10px 0; /* Skaber padding i top og bund og nulstiller i siderne */
}

.result-question-details {
    display: none; /* Som standard skjult */
    padding-top: 15px; /* Lidt afstand når den åbnes */
    transition: all 0.3s ease; /* Smooth overgang */
}

.result-question-details.open {
    display: block; /* Vises når den er åben */
    margin: 0; /* Fjerner margin fra master-css */
    padding: 0; /* Fjerner padding fra master-css */
}

.result-question-header svg {transition: transform 0.3s ease; /* Rotation af pil */}

.result-question-item.open .result-question-header svg {transform: rotate(90deg); /* Rotér pil når åben */}

.quiz-module-answer-options, .quiz-module-answer-description {opacity: 1; transition: opacity 0.3s ease;} /* Giver overgang mellem skiftet */

.quiz-module-answer-options.fade-out, .quiz-module-answer-description.fade-out {opacity: 0;} /* Skjuler elementet */

@media only screen and (max-width: 1330px) {
  .show-answers-text {
    display: none !important; /* Force hide on mobile */
  }
  
}

/* BENYTTES PÅ CTA-KNAPPER */
.text-center-alignment {
  text-align: center; /* Elementer placeres centreret */
  justify-content: center; /* Elementer placeres centreret */
}

.cta-knap-container {
  margin-top: 20px; /* Knapperne placeres 20px fra ovenstående */
}