:root {
    --dotank-game-color-primary: #2e294e;
    --dotank-game-color-takeda-red: #E1242A;
    --dotank-game-color-takeda-deep-red: #8A1415;
    --dotank-game-color-takeda-cream: rgb(251, 241, 216);
    --dotank-game-color-takeda-cream-alpha: rgba(251, 241, 216, 0.8);
    --dotank-game-color-takeda-text: #34373F;
    --dotank-game-color-takeda-highlight: rgba(136, 173, 102, 0.2);
    --dotank-game-color-mars-teal: #038f99;
    --dotank-game-color-mars-blue: #0C11A0;

    scroll-behavior: smooth;
}

.quiz-game-section {
    min-height: 520px;
    padding: 15px;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*align-items: center;*/
}

.quiz-questions-wrapper,
.quiz-correct-answer-wrapper,
.quiz-wrong-answer-wrapper {
    padding: 15px;
}

.quiz-correct-answer-wrapper,
.quiz-wrong-answer-wrapper {
    text-align: center;
    justify-content: center;
    align-items: center;
}


.quiz-question-text {
    text-align: left;
    color: var(--color-primary);
    letter-spacing: 1px;
    font-size: 22px !important;
}

.quiz-question-text-winner {
    font-size: 38px !important;
    font-weight: 900 !important;
}

.answer-text {
    font-size: 20px;
    font-weight: 600;
}

/* .quiz-question-image {
    display: block;
    width: 150px;
} */

.quiz-game-list {
    list-style: none;
}


.quiz-game-list li:hover {
    opacity: 0.75;
    background-color: #f6f6f6;
    border-radius: 15px;
    -webkit-box-shadow: 9px 11px 34px -15px rgba(110, 110, 110, 1);
    -moz-box-shadow: 9px 11px 34px -15px rgba(110, 110, 110, 1);
    box-shadow: 9px 11px 34px -15px rgba(110, 110, 110, 1);
}

.answer-wrapper {
    display: flex;
    align-items: end;
    margin-top: 2.5rem;
}

.answer-wrapper>img {
    display: inline-block;
    height: 75px !important;
    width: auto;
    margin-right: 15px;
}


.deep-red {
    color: var(--dotank-game-color-takeda-red);
}

.btn-wrapper {
    width: 60%;
    text-align: center;
}

.btn-answer .btn-big {
    font-size: 1em;
}

.answer-btn-disabled {
    pointer-events: none;
    opacity: 0.3;
}

.quiz-start-text-wrapper p {
    font-size: 1em;
    text-align: center;
}

.quiz-questions-wrapper,
.quiz-complete,
.quiz-correct-answer-wrapper,
.quiz-wrong-answer-wrapper {
    display: none;
    flex-direction: column;
    box-sizing: border-box;
}

.quiz-finish-btn {
    display: none;
}

.quiz-questions-wrapper li,
.right-answer-output li {
    box-sizing: border-box;
    cursor: pointer;
    align-items: center;
    margin-bottom: 5px;
    padding: 5px 5px;
    font-size: 1rem;
    color: var(--dotank-game-color-takeda-text);
}

h4.right-answer-output {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: -15px;
}

.highlight-answer {
    box-sizing: border-box;
    background-color: #f6f6f6;
    border-radius: 15px;
    -webkit-box-shadow: 9px 11px 34px -15px rgba(110, 110, 110, 1);
    -moz-box-shadow: 9px 11px 34px -15px rgba(110, 110, 110, 1);
    box-shadow: 9px 11px 34px -15px rgba(110, 110, 110, 1);
}

.highlight-good-answer {
    background-color: var(--dotank-game-color-takeda-highlight);
    border-radius: 15px;
    -webkit-box-shadow: 9px 11px 34px -15px rgba(110, 110, 110, 1);
    -moz-box-shadow: 9px 11px 34px -15px rgba(110, 110, 110, 1);
    box-shadow: 9px 11px 34px -15px rgba(110, 110, 110, 1);
}

li.highlight-good-answer::before {
    content: url("data:image/svg+xml,%3Csvg width='45' height='45' viewBox='0 0 45 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='circle-check-regular 1' clip-path='url(%23clip0_1009_3411)'%3E%3Cpath id='Vector' d='M21.4277 29.8652C20.4697 30.8232 18.9053 30.8232 17.9473 29.8652L12.3223 24.2402C11.3643 23.2822 11.3643 21.7178 12.3223 20.7598C13.2803 19.8018 14.8447 19.8018 15.8027 20.7598L19.6875 24.6445L29.1973 15.1348C30.1553 14.1768 31.7197 14.1768 32.6777 15.1348C33.6357 16.0928 33.6357 17.6572 32.6777 18.6152L21.4277 29.8652ZM45 22.5C45 34.9277 34.9277 45 22.5 45C10.0723 45 0 34.9277 0 22.5C0 10.0723 10.0723 0 22.5 0C34.9277 0 45 10.0723 45 22.5ZM22.5 4.21875C12.4014 4.21875 4.21875 12.4014 4.21875 22.5C4.21875 32.5986 12.4014 40.7812 22.5 40.7812C32.5986 40.7812 40.7812 32.5986 40.7812 22.5C40.7812 12.4014 32.5986 4.21875 22.5 4.21875Z' fill='%23688940'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1009_3411'%3E%3Crect width='45' height='45' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    margin-right: 10px;
}

/* li.highlight-answer::before,
.quiz-game-list li:hover::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' height='20'%3E%3E%3C!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M320 408c0-6.428-.8457-12.66-2.434-18.6C338.2 376.7 352 353.9 352 328c0-6.428-.8457-12.66-2.434-18.6C370.2 296.7 384 273.9 384 248c0-2.705-.1484-5.373-.4414-8H440C479.7 240 512 207.7 512 168S479.7 96 440 96H243.7C227.5 76.51 203.2 64 176 64H126.1C94.02 64 64.47 81.1 49 108.6L17.65 164.5C6.104 185.1 0 208.4 0 231.8v107.9C0 417.1 64.6 480 144 480h104C287.7 480 320 447.7 320 408zM280 304c13.23 0 24 10.78 24 24S293.2 352 280 352H232.1C218.9 352 208 341.2 208 328S218.8 304 232 304H280zM312 224c13.23 0 24 10.78 24 24S325.2 272 312 272h-48c-3.029 0-5.875-.7012-8.545-1.73C260.7 259.9 264 248.4 264 236V224H312zM440 144c13.23 0 24 10.78 24 24S453.2 192 440 192h-176V152c0-2.686-.5566-5.217-.793-7.84C263.5 144.2 263.7 144 264 144H440zM48 339.7V231.8c0-15.25 3.984-30.41 11.52-43.88l31.34-55.78C97.84 119.7 111.4 112 126.1 112H176c22.06 0 40 17.94 40 40v84c0 15.44-12.56 28-28 28S160 251.4 160 236V184C160 170.8 149.3 160 136 160S112 170.8 112 184v52c0 33.23 21.58 61.25 51.36 71.54C161.3 314 160 320.9 160 328c0 5.041 1.166 9.836 2.178 14.66C137.4 354 120 378.1 120 408c0 7.684 1.557 14.94 3.836 21.87C80.56 420.9 48 383.9 48 339.7zM192 432c-13.23 0-24-10.78-24-24S178.8 384 192 384h56c13.23 0 24 10.78 24 24s-10.77 24-24 24H192z'/%3E%3C/svg%3E");
    margin-right: 10px;
} */

.quiz-start-wrapper {
    margin: auto;
    flex-direction: column;

}

.quiz-start-wrapper h1,
.quiz-complete h2 {

    text-align: center;
}

.correct-answers-heading {
    margin-bottom: 20px;
    margin-top: 20px;
}

.quiz-finish-message,
.quiz-question-text {
    color: var(--dotank-game-color-takeda-text);
    font-family: "Figtree", Sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 30px;
}

.quiz-start-text-wrapper,
.quiz-complete-text-wrapper {
    margin: auto;
}


/*.quiz-game-list {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
}*/
.quiz-winner-wrapper,
.quiz-loser-wrapper,
.quiz-spinner-wrapper {
    display: none;
    padding-top: 20px;
    padding-bottom: 20px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.quiz-winner-text {
    margin-top: 50px;
}

.start-btn-quiz-wrapper,
.submit-answer-wrapper,
.restart-quiz-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.btn-answer {
    padding: 3px 10px;
}

.start-quiz,
.quiz-answer-btn,
.btn-restart,
.quiz-next-question-btn,
.quiz-finish-btn {
    color: white;
    padding: 10px 25px;
    cursor: pointer;
    margin-top: 50px;
    border-radius: 15px;
    font-weight: 400;
    font-size: 16px;
    box-sizing: border-box;
    background-color: var(--dotank-game-color-mars-teal);
}

.submit-wrapper {
    background-color: aqua;
}

.quiz-complete-text-wrapper p {
    font-size: 1.4em;
    line-height: 1.8;
}

.quiz-complete {
    align-items: center;
}

.quiz-game-panel-row {
    display: none;
    justify-content: space-around;
}

.quiz-game-panel-row p {
    display: flex;
    align-items: center;
}

.game-panel-play-icon {
    font-size: 3.5rem;
    color: var(--dotank-game-color-takeda-red);
    transition: all 0.3s ease-out;
}

.game-panel-play-icon:hover {
    transform: scale(1.2);
}

.game-panel-stopwatch-icon,
.game-panel-question-icon {
    font-size: 2.5rem !important;
    color: var(--dotank-game-color-takeda-text);
}

.quiz-game-panel-stopwatch,
.quiz-game-panel-question {
    font-size: 1.3rem;
    color: var(--dotank-game-color-takeda-text);
    margin-left: 30px;
    font-weight: bold;
}

@media only screen and (min-width: 370px) and (max-width: 600px) {

    /* ruleset for 370px - 600px */
    .game-panel-play-icon,
    .game-panel-player-icon,
    .game-panel-timer-icon,
    .game-panel-turns-icon {
        font-size: 1.6rem !important;
    }

    .game-panel-timer,
    .game-panel-score {
        font-size: 2rem;
        margin-left: 15px;
    }

    .game-panel-player,
    .game-panel-player-name {
        font-size: 1.2rem;
    }

    .game-board-wrapper {
        width: 400px;
        height: 420px;
    }

    .scoreboard-table th {
        font-size: 1rem;
        font-weight: 600;
    }

    .scoreboard-table th {
        display: none;
    }

    .scoreboard-table tr {
        display: flex;
        flex-direction: column;
    }

    .scoreboard-table td:first-of-type {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 800;
    }

    .scoreboard-table td:nth-child(2),
    .scoreboard-table td:nth-child(3) {
        border-bottom: none;
    }
}

.quiz-complete-text-wrapper {
    text-align: center;
}

/* Quiz Leaderboard Styles*/

.quiz-leaderboard-wrapper {
    /* From https://css.glass */
    background: rgba(47, 110, 200, 0.46);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10.4px);
    -webkit-backdrop-filter: blur(10.4px);
    border: 1px solid rgba(47, 110, 200, 0.31);
    padding: 30px;
}

.quiz-leaderboard-table th {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--dotank-game-color-secondary);
}

.quiz-leaderboard-table {
    border: none;
    color: var(--dotank-game-color-takeda-cream);
    font-weight: 600;
    font-size: 1rem;
}


.quiz-leaderboard-warning {
    font-size: 2rem;
    margin-top: 20px;
    text-align: center;
    color: var(--dotank-game-color-takeda-cream);
}