: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;
    --dotank-game-color-mars-ibe-orange: #FFD8B0;
    --dotank-game-color-mars-ibe-orange-rgba: rgba(255, 130, 0, .75);

    scroll-behavior: smooth;
}

.ibe-quiz-game-section {
    min-height: 520px;
    padding: 15px;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    /*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: #2C2C49;
    letter-spacing: 1px;
    font-size: 20px !important; /* Changed to make it a little smaller */
}

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

.answer-text {
    font-size: 18px; /* Changed to make it a little smaller */
    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: #FFD8B0;
    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: 1.5rem; /* Changed to make it a little smaller */
}

.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;
}

.ibe-quiz-headings {
    color: #000043;
}

.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: #2C2C49;
}

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

.highlight-answer {
    box-sizing: border-box;
    background-color: #FFD8B0;
    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;
}

.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: #2C2C49;
    font-family: "Mars Centra", Sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 30px;
}

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

.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;
}

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

.ibe-start-btn-quiz-wrapper {
    min-height: 520px;
}

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

.start-quiz,
.quiz-answer-btn,
.btn-restart,
.quiz-next-question-btn,
.quiz-finish-btn {
    color: #000072;
    padding: 10px 25px;
    cursor: pointer;
    margin-top: 50px;
    border-radius: 15px;
    font-weight: 400;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #ffd8b0;
    box-shadow: 0px 2px 6px 2px rgba(25, 25, 25, 0.15), 0px 1px 2px 0px rgba(25, 25, 25, 0.30);
}

.start-quiz:hover,
.quiz-answer-btn:hover,
.btn-restart:hover,
.quiz-next-question-btn:hover,
.quiz-finish-btn:hover {
    color: #E6E6F6;
    background-color: #000072;
}

.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;
    background-color: #ffd8b0;
    box-shadow: 0px 2px 6px 2px rgba(25, 25, 25, 0.15), 0px 1px 2px 0px rgba(25, 25, 25, 0.30);
    border-radius: 20px;
}

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

.ibe-quiz-panel-text {
    margin: 0;
}

.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;
    }

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

    .ibe-scoreboard-table th {
        display: none;
    }

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

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

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

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

/* Quiz Leaderboard Styles*/

.hall_of_fame_wrapper {
    background-color: var(--dotank-game-color-mars-ibe-orange-rgba);

}

.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;
}

.ibe-scoreboard-table th {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--dotank-game-color-mars-blue);
}

.ibe-scoreboard-table {
    border: none;
}



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