:root {
    --bg: #fff5ed;
    --card-bg: #ffffff;

    --primary: #f2762e;
    --primary-dark: #d9611a;
    --primary-light: #ff9b5e;

    --accent-warm: #ffeadb;

    --btn-bg: #ffffff;
    --btn-hover: #fff0e5;
    --btn-border: #f0ddd0;
    --btn-border-hover: #f5ccb1;
    --btn-text: #3d2e22;
    --btn-text-wrong: #fff;

    --question-text: #2c1d12;
    --correct: #4caf6a;
    --correct-low: #88b595;
    --progress-empty: #ede0d6;
    --progress-fill: var(--primary);
    --white: #ffffff;
    --muted: #a08976;
    --card-shadow: rgba(180, 120, 70, 0.1);
}

.jq-clearfix {
    clear: both;
}

.jq-hide {
    display: none;
}

button:focus {
    outline: 0;
}

.jq-wrapper {
    width: 510px;
    margin: 10px auto;
    padding: 20px;
    position: relative;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -o-border-radius: 8px;
    height: 380px;
    text-align: center;
    overflow: hidden;
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: normal;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -o-box-sizing: content-box;
    background-color: var(--bg);
}
.jq-wrapper * {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -o-box-sizing: content-box;
}

.jq-wrapper .jq-appFrame1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.jq-wrapper .jq-bg2 {
    position: absolute;
    top: 26px;
    left: 11px;
    width: 96%;
    height: 96%;
    z-index: 0;
    border-radius: 8px;
}

/* .jq-wrapper .jq-page .jq-bg3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 8px;
}

.jq-wrapper .jq-page .jq-bg4 {
    position: absolute;
    top: -8px;
    width: 100%;
    left: 0;
    z-index: -1;
    border-radius: 8px;
} */

.jq-pages {
    visibility: hidden;
}

.jq-page {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    z-index: 3;
}

.jq-page.jq-animation {
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: linear;
    -webkit-transform: translateZ(0);
}

.jq-page.jq-swipeleft {
    left: -100%;
    right: 100%;
}

.jq-page.jq-swiperight {
    right: -100%;
    left: 100%;
}

.jq-page.jq-swipetop {
    top: -100%;
    bottom: 100%;
}

.jq-page.jq-swipebottom {
    bottom: -100%;
    top: 100%;
}

.jq-page.jq-fade {
    opacity: 0;
}

.jq-page .jq-appFrame1 {
    display: none;
}

.jq-page .jq-pageInner {
    padding: 39px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
}

.jq-startPage {
    display: block;
}

.jq-startPage,
.jq-endPage {
    background: transparent;
}

.jq-copyright {
    position: absolute;
    bottom: 1px;
    left: 0;
    right: 0;
    font-size: 7px;
    color: var(--muted);
    z-index: 100;
}

.jq-quizName {
    color: var(--primary);
    font-size: 40px;
    font-family: Georgia, Times, "Times New Roman", serif;
    font-weight: bold;
    line-height: 62px;
    text-shadow: 1px 1px 3px #cdc4b5;
    -webkit-text-shadow: 1px 1px 3px #cdc4b5;
    -o-text-shadow: 1px 1px 3px #cdc4b5;
    margin: 80px 0 0;
}

.jq-buttonStart {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    color: #fff;
    font-size: 24px;
    padding: 5px 60px;
    border: 0;
    cursor: pointer;
    position: absolute;
    bottom: 73px;
    left: 50%;
    margin-left: -101px;
    background: var(--correct); /* Old browsers */
    /* background: linear-gradient(to bottom, #ffcc00 0%, #ff9f00 100%); W3C */
}

.jq-buttonStart.jq-buttonStartAlt {
    background: #ff6600; /* Old browsers */
    background: linear-gradient(to bottom, #ff6600 0%, #e17a39 100%); /* W3C */
}

.jq-buttonStart:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(242, 118, 46, 0.12);
}

/* ===================== QUESTION ====================== */

.jq-questionBox {
    margin-bottom: 35px;
}

.jq-questionBox table {
    width: 100%;
    border-collapse: collapse;
}

.jq-questionBox table td {
    padding: 0;
    margin: 0;
}

.jq-question {
    height: 56px;
    font-size: 28px;
    cursor: default;
    text-align: left;
}

/* === Question Sound Button === */
.speaker_icon {
    width: 24px;
    height: 24px;
    background-color: var(--primary-light);
    -webkit-mask-image: url("/HTML5_quiz/QuizTree_1.11/imgs/speaker_white.png");
    mask-image: url("/HTML5_quiz/QuizTree_1.11/imgs/speaker_white.png");
    mask-size: contain;
    mask-repeat: no-repeat;
}

.speaker_icon:hover {
    background-color: var(--primary);
}

.speaker_icon:active {
    transform: scale(0.9);
}

.jq-questionSound {
    width: 30px;
    height: 30px;
    cursor: pointer;
    /* background-color: red; */
}

.jq-question > div,
.jq-questionSound > div {
    /* height: 26px; */
    color: var(--question-text);
}

.jq-questionSound img {
    /* width: 16px; */
    /* margin: 8px auto; */
}

.jq-questionSound audio {
    display: none;
}

.jq-questionSound > div {
    /* width: 26px;
    height: 26px; */
    margin-left: 10px;
}

/* === DONE Question Sound Button === */

.jq-question > div {
    height: 32px;
    padding: 10px;
    vertical-align: middle;
}

.jq-question > div > div {
    line-height: 32px;
}

.jq-questionImage .jq-questionBox {
    margin-bottom: 15px;
}

.jq-questionImage .jq-question {
    height: auto;
}

.jq-questionImage .jq-question > div {
    padding: 0;
    height: auto;
    text-align: center;
    line-height: 0px;
}

.jq-questionImage .jq-question > div > div {
    line-height: 0px;
}

.jq-questionImage .jq-questionBox img {
    max-width: 100%;
    max-height: 210px;
    border: 2px solid white;
    border-radius: 5px;
}

.jq-questionImage .jq-answer {
    width: 85%;
    margin: 0px auto 5px auto;
}

/* ===================== DONE QUESTION ====================== */

/* ===================== ANSWERS ====================== */

.jq-questionImage .jq-answer:nth-child(even) {
    /*test float: right;*/
}

.jq-answerBox {
    max-width: 100%;
    height: 310px;
}

.jq-answer {
    border: 1px solid var(--btn-border);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    background: var(--btn-bkg);
    color: var(--btn-text);
    margin-bottom: 6px;
    padding: 0 10px;
    cursor: pointer;
    line-height: 23px;
    font-size: 19px;
}

.jq-answer:hover {
    background: var(--btn-hover);
    border-color: var(--btn-border-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(242, 118, 46, 0.12);
}

/* wrong answer */
.jq-answer.jq-answerClicked {
    background: var(--primary-light);
    color: var(--btn-text-wrong);
    cursor: default;
}

/* right answer */
.jq-answer.jq-answerCorrect.jq-answerClicked {
    background: var(--correct);
}

.jq-answer > div {
    height: 37px;
    padding: 5px;
    vertical-align: middle;
}

.jq-answer > div > div {
    line-height: 37px;
}

/* ===================== DONE ANSWERS ====================== */

/* ===================== Progress Bar ====================== */
.jq-progressBar {
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    z-index: 10;
    font-size: 8px;
    display: none;
    list-style: none;
    z-index: 95;
    margin: 0;
    padding: 0;
    /* border: 1px solid red; */
}

.jq-progressBar > li {
    display: inline-block;
    vertical-align: top;
    height: 8px;
}

.jq-progressCells {
    width: 290px;
}

.jq-progressCells > div {
    display: inline-block;
    vertical-align: top;
    background: var(--progress-empty);
    border-radius: 120px;
}

.jq-progressCells > div > div {
    border: 0px solid #fff;
    /* border-width: 1px 0 1px 1px; */
    height: 8px;
}

.jq-progressCells > div:last-child > div {
    border-right-width: 0px;
}

.jq-progressCells > div.jq-cell-correct {
    background: #99cc00;
    border-radius: 120px;
}

.jq-progressCells > div.jq-cell-failed1 {
    background: #ffff89;
    border-radius: 120px;
}

.jq-progressCells > div.jq-cell-failed2 {
    background: #ff6600;
    border-radius: 120px;
}

.jq-progressCurrent,
.jq-progressPercentage {
    width: 44px;
    /* border: 1px solid #AAAAAA; */
    /* background: #555555; */
    color: var(--muted);
    /* line-height: 16px; */
}

/* ===================== DONE Progress Bar ====================== */

.jq-resultBox {
    width: 310px;
    background: var(--bg);
    box-shadow: 0 4px 14px rgba(242, 118, 46, 0.12);
    margin: 40px auto 14px;
    padding: 5px 5px 1px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    font-size: 30px;
    font-weight: bold;
    color: var(--btn-text);
}

a.jq-button {
    width: 220px;
    /* border: 3px solid #ffcc00; */
    background: var(--primary-light);
    color: #fff;
    margin: 0 auto 10px;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    cursor: pointer;
    display: block;
    text-decoration: none;

    transition-duration: 0.25s;
}

.jq-button:hover,
.jq-button:focus,
.jq-button:active {
    text-decoration: none;

    transform: scale(1.1);
}

.jq-button img {
    width: 28px;
    margin: -3px 0;
    float: left;
}

.jq-buttonMore img {
    margin-top: 1px;
}

/* ===================== Twitter ====================== */

.jq-buttonTwitter {
    position: absolute;
    top: 110px;
    right: 198px;
    border: none;
    background: none;
    cursor: pointer;

    animation: travel 3s ease-in-out 1 alternate;
}

.jq-buttonTwitter img {
    width: 30px;
    height: 30px;

    /*	border: 1px solid #fff;
	border-radius: 50%;
	*/
    animation-name: bubble;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes bubble {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

@keyframes travel {
    0% {
        transform: translateX(-200px);
        opacity: 0.5;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

/* ===================== DONE Twitter ====================== */

/* ===================== Playlist Previous and Next buttons ====================== */

.jq-buttonPlaylist {
    position: absolute;
    top: 60px;
    right: 30px;
    border: none;
    cursor: pointer;
}

a.jq-buttonPlaylist {
    width: 40px;
    height: 36px;
    border: 2px solid #ffffff;
    background: #82ad00;
}

a.jq-buttonPlaylist img {
    width: 40px;

    /*	*/

    animation-name: bubble2;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.jq-buttonPlaylistNext {
    right: 30px;
    animation: appear1 1s ease-in-out 1 alternate;
}

.jq-buttonPlaylistPrevious {
    right: 455px;
    animation: appear1 1s ease-in-out 1 alternate;
}

@keyframes appear1 {
    0% {
        transform: translateY(-100px);
        opacity: 0.1;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes bubble2 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}
/* ===================== DONE Playlist Previous and Next buttons ====================== */

/* ===================== Marquee ====================== */

.marquee {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
}

.marquee span {
    display: inline-block;
    position: relative;
    left: 100%;
    animation: marquee 15s linear infinite;
}

.marquee:hover span {
    animation-play-state: paused;
}

.marquee span:nth-child(1) {
    animation-delay: 0s;
}

/* should show the second span with a delay, but doesn't work in the "get newsletter" button. */
.marquee span:nth-child(2) {
    animation-delay: 2s;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
/* ===================== DONE Marquee ====================== */

a.jq-buttonNewsletter {
    background: #82ad00;
    color: yellow;
    font-weight: normal;
    font-size: 26px;
    padding: 8px 10px;
}

.jq-buttonNewsletter marquee {
    vertical-align: middle;
}

.jq-stars {
    display: flex;
}

.jq-stars img {
    width: 30px;
    margin: 15px;
}

.jq-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../imgs/loading.gif") no-repeat center center
        rgba(0, 0, 0, 0);
    z-index: 9999;
}

.jq-answerSound {
    width: 66px;
    height: 56px;
    cursor: pointer;
}

.jq-answerSound > div {
    height: 52px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border: 2px solid #aacc00;
    color: #fff;
    background: #87e0fd; /* Old browsers */
    background: linear-gradient(
        to bottom,
        #87e0fd 0%,
        #53cbf1 40%,
        #05abe0 100%
    ); /* W3C */
}

.jq-answerSound img {
    width: 22px;
    margin-top: 10px;
}

.jq-answerSound audio {
    display: none;
}

.jq-answerSound > div {
    width: 45px;
    height: 45px;
    margin-left: 10px;
    margin-top: -8px;
}

/* Fractions */
.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.001em;
    text-align: center;
}

.frac > span {
    display: block;
    padding: 0.25em;
}
.frac span.bottom {
    border-top: 2px solid #fff;
}
.frac span.symbol {
    display: none;
}

/* DONE Fractions */