:root {
    --back_app: #eeeeee;
    --back_app_dark: #cccccc;
    --border_app: #ffffff;
    --back_appFooter: #ffffff;
    --back_button: #eeeeee;
    --back_button_h: #ffffff;
    --back_cardRoot: #b1dce2;
    --back_cardImage: #ffffff;
    --col_app: #222222;
    --col_app_medium: #444444;
    --col_app_light: #666666;
    --col_app_veryLight: #888888;
    --col_app_hilight1: #003686;
    --col_app_hilight1_h: #489b04;
    --col_app_hilight2: #5d667e;
    --back_correct: rgb(4, 138, 4);
    --back_wrong: rgb(190, 5, 5);
    --col_correct: color: #d6dce4;
    --backl0: rgb(129, 181, 211);
    --backl0_h: rgb(74, 118, 143);
    --coll0: #192538;
    --borderl0: #9fbdd6;
    --backl1: rgb(129, 211, 186);
    --backl1_h: rgb(74, 143, 117);
    --coll1: #193838;
    --borderl1: #9fd6d6;
    --backl2: rgb(190, 218, 145);
    --backl2_h: rgb(117, 143, 74);
    --coll2: #193823;
    --borderl2: #a5d69f;
    --backl3: rgb(238, 199, 140);
    --backl3_h: rgb(143, 111, 74);
    --coll3: #413012;
    --borderl3: #d6c39f;
    --backl4: rgb(226, 183, 182);
    --backl4_h: rgb(143, 74, 74);
    --coll4: #381a19;
    --borderl4: #e4bebb;
    --backl5: rgb(214, 151, 165);
    --backl5_h: rgb(143, 74, 100);
    --coll5: #38191d;
    --borderl5: #caa8ab;
    --backl6: rgb(194, 129, 211);
    --backl6_h: rgb(137, 74, 143);
    --coll6: #381937;
    --borderl6: #d69fcd;
    --backl7: rgb(171, 129, 211);
    --backl7_h: rgb(121, 74, 143);
    --coll7: #2a1938;
    --borderl7: #cb9fd6;
    --backl8: rgb(129, 130, 211);
    --backl8_h: rgb(79, 74, 143);
    --coll8: #1e1938;
    --borderl8: #9fa3d6;
    --backl9: rgb(129, 134, 211);
    --backl9_h: rgb(74, 96, 143);
    --coll9: #191c38;
    --borderl9: #9fa9d6;
}


@font-face {
    font-family: BKoodak;
    /* src: url(/Resource/font/B\ Koodak\ Bold_0.ttf); */
    src: url(/Content/Flashcards/Font/B\ Koodak\ Bold_0.ttf);
}

#flashcardsx {
    direction: rtl;
    font-family: BKoodak;
    box-sizing: border-box;
    /* background-color: #ff5566; */
    /* background-image: url('/Resource/Img/Image/TxtPlantsSpink.jpg'); */
    background-image: url('/Content/Flashcards/Img/Image/TxtPlantsSpink.jpg');
    padding: 60px 0;
    line-height: normal;
    box-sizing: border-box;
    direction: rtl;
}

body {
    margin: 0;
}

button {
    border: none;
    outline: none;
    cursor: pointer;
    /* border-color: var(--border_app); */
}










.flashcardsOuter {
    background-color: var(--back_app);
    height: calc(88vh - 80px);
    width: calc(88% - 40px);
    overflow: hidden;
    margin: 40px auto;
    text-align: center;
    border: 4px solid var(--border_app);
    border-radius: 15px;
    text-align: center;
    color: var(--col_app);
}

.appOuter {
    width: 100%;
    height: 100%;
}



.episode {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: none;
}

    .appPage.show,
    .episode.show {
        display: block;
    }

    .episode.d0 > .episChildren {
        height: calc(100% - 60px);
        overflow: hidden auto;
        position: relative;
    }

    .episode.d0 > .episContent {
        box-sizing: border-box;
        background-color: var(--back_appFooter);
        height: 60px;
        padding: 12px 0;
        overflow: hidden;
        position: relative;
    }

    .episode.d1 > .episContent {
        width: 100%;
        height: 100%;
    }

.btnEpisode {
    background-color: var(--back_button);
    display: inline-block;
    width: 20%;
    max-width: 80px;
    margin: 0 4%;
    height: 100%;
    border-radius: 5px;
    transition: all 0.3s;
    cursor: pointer;
    display: none;
}

    .btnEpisode.showInlineBlock {
        display: inline-block !important;
    }

    .btnEpisode:hover {
        background-color: var(--back_button_h);
    }

    .btnEpisode > img {
        height: 80%;
        margin: 6% 0;
    }

/* #btnEpisodePrev {
    background-image: url('/Resource/Img/Icons/arrow_r.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
}

#btnEpisodeNext {
    background-image: url('/Resource/Img/Icons/arrow_l.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
} */













.scoreRoot {
    position: absolute;
    top: 90px;
    left: 15px;
    /* width: 150px; */
    /* height: 30px; */
    padding: 4px;
    background-color: #cecece55;
    text-align: left;
    direction: ltr;
    border-radius: 4px;
}

.scoreOuterScore {
    /* background-color: red; */
    display: inline-block;
    direction: ltr;
    width: 60px;
}

.scoreOuterLevel {
    /* background-color: green; */
    display: inline-block;
    direction: ltr;
    width: 70px;
}

.scoreScore {
}

.scoreLevel {
}

.scoreIcon {
    display: inline-block;
    width: 16px;
    vertical-align: middle;
    margin: 0 8px;
}

.soundButtonRoot {
    position: absolute;
    top: 85px;
    right: 15px;
    width: 36px;
    height: 36px;
    padding: 4px;
    border: 1px solid #cecece55;
    text-align: left;
    direction: ltr;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.4s;
}

    .soundButtonRoot:hover {
        background-color: #cecece55;
    }

.soundButtonImg {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 75%;
}




.appPage {
    display: none;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.pageHeader {
    height: 70px;
    padding: 20px 0 0 0;
    box-sizing: border-box;
    background-color: var(--backl0);
    font-size: x-large;
}

.pageImgBox {
    /* height: calc(100% - 262px); */
    background-color: var(--back_cardImage);
    /* text-align: center; */
}

    .pageImgBox > img {
        width: 100%;
        display: block;
    }

.pageDescsTitle {
    padding: 30px 0 10px 0;
    font-size: large;
    color: var(--col_app_medium);
    /* color: var(--col_app_hilight2); */
}

.pageDescs {
    width: 60%;
    margin: 10px auto 10px auto;
    font-size: small;
    color: var(--col_app_hilight2);
}



.btnStart {
    padding: 10px;
    color: var(--col_app);
    background-color: #ffffff;
    border-radius: 3px;
    margin: 5px auto 5px auto;
    width: 60%;
    height: 30px;
    cursor: pointer;
    transition: all 0.6s;
    /* color: var(--col_app_hilight1); */
}

    .btnStart:hover {
        /* background-color: var(--back_app); */
        color: var(--col_app_hilight1_h);
        /* animation: btnStartAnim 5s infinite; */
    }



.progressBar {
    /* background-color: yellow; */
    padding: 4px 0;
}

.progressBarOuter {
    background-color: var(--back_app_dark);
    border-radius: 3px;
    height: 9px;
    position: relative;
    width: 80%;
    margin: 10px auto 10px auto;
    overflow: hidden;
}

.progressBarInner {
    /* background-color: green; */
    position: absolute;
    left: 0;
    top: 0;
    /* width: 40%; */
    transition: all 0.2s;
    height: 100%;
    background: -moz-linear-gradient(90deg, rgba(129, 181, 211, 1) 0%, rgba(135, 208, 250, 1) 50%, rgba(59, 223, 178, 1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(129, 181, 211, 1) 0%, rgba(135, 208, 250, 1) 50%, rgba(59, 223, 178, 1) 100%);
    background: -o-linear-gradient(90deg, rgba(129, 181, 211, 1) 0%, rgba(135, 208, 250, 1) 50%, rgba(59, 223, 178, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3BDFB2', endColorstr='#81B5D3', GradientType=0);
    background: -ms-linear-gradient(90deg, rgba(129, 181, 211, 1) 0%, rgba(135, 208, 250, 1) 50%, rgba(59, 223, 178, 1) 100%);
    background: linear-gradient(90deg, rgba(129, 181, 211, 1) 0%, rgba(135, 208, 250, 1) 50%, rgba(59, 223, 178, 1) 100%);
}

.progressBarText {
    /* padding: 2px 0 0 0; */
    font-size: small;
    color: var(--col_app_veryLight);
    text-align: left;
    width: 70%;
    margin: 0 auto;
}



.cardRoot {
    /* background-color: var(--back_cardRoot); */
    width: 100%;
    height: 100%;
}

.cardHeader {
    height: 70px;
    padding: 20px 0 0 0;
    box-sizing: border-box;
    background-color: var(--backl0);
    font-size: x-large;
}

.cardImgBox {
    height: calc(100% - 262px);
    background-color: var(--back_cardImage);
    /* text-align: center; */
}

.cardTextBox {
    height: calc(40% - 112px);
    background-color: var(--back_cardImage);
    /* text-align: center; */
    font-size: xx-large;
    /* padding-top: 90px; */
    pointer-events: none;
}

    .cardTextBox > div {
        vertical-align: middle;
        padding-top: 20%;
        pointer-events: none;
    }

.cardAnswers {
    height: 150px;
}

.cardVisualAnswers {
    height: 60%;
}

.cardAddress {
    height: 22px;
    padding: 10px 0;
    font-size: small;
    color: var(--col_app_light);
}


.cardImg {
    max-width: 100%;
    /* text-align: center; */
    /* vertical-align: middle; */
    height: calc(100% - 40px);
    padding: 40px 0 0 0;
    object-fit: cover;
    /* margin: 0 auto; */
}








.episContent.l0 .cardAnswer,
.episContent.l0 .cardVisualAnswer,
.episContent.l0 .cardHeader {
    background-color: var(--backl0);
    color: var(--coll0);
    border-top: 1px solid var(--borderl0);
}

.episContent.l1 .cardAnswer,
.episContent.l1 .cardVisualAnswer,
.episContent.l1 .cardHeader {
    background-color: var(--backl1);
    color: var(--coll1);
    border-top: 1px solid var(--borderl1);
}

.episContent.l2 .cardAnswer,
.episContent.l2 .cardVisualAnswer,
.episContent.l2 .cardHeader {
    background-color: var(--backl2);
    color: var(--coll2);
    border-top: 1px solid var(--borderl2);
}

.episContent.l3 .cardAnswer,
.episContent.l3 .cardVisualAnswer,
.episContent.l3 .cardHeader {
    background-color: var(--backl3);
    color: var(--coll3);
    border-top: 1px solid var(--borderl3);
}

.episContent.l4 .cardAnswer,
.episContent.l4 .cardVisualAnswer,
.episContent.l4 .cardHeader {
    background-color: var(--backl4);
    color: var(--coll4);
    border-top: 1px solid var(--borderl4);
}

.episContent.l5 .cardAnswer,
.episContent.l5 .cardVisualAnswer,
.episContent.l5 .cardHeader {
    background-color: var(--backl5);
    color: var(--coll5);
    border-top: 1px solid var(--borderl5);
}

.episContent.l6 .cardAnswer,
.episContent.l6 .cardVisualAnswer,
.episContent.l6 .cardHeader {
    background-color: var(--backl6);
    color: var(--coll6);
    border-top: 1px solid var(--borderl6);
}

.episContent.l7 .cardAnswer,
.episContent.l7 .cardVisualAnswer,
.episContent.l7 .cardHeader {
    background-color: var(--backl7);
    color: var(--coll7);
    border-top: 1px solid var(--borderl7);
}

.episContent.l8 .cardAnswer,
.episContent.l8 .cardVisualAnswer,
.episContent.l8 .cardHeader {
    background-color: var(--backl8);
    color: var(--coll8);
    border-top: 1px solid var(--borderl8);
}

.episContent.l9 .cardAnswer,
.episContent.l9 .cardVisualAnswer,
.episContent.l9 .cardHeader {
    background-color: var(--backl9);
    color: var(--coll9);
    border-top: 1px solid var(--borderl9);
}

.episContent.l0 .cardAnswers.answersUnsolved .cardAnswer:hover,
.episContent.l0 .cardVisualAnswers.answersUnsolved .cardVisualAnswer:hover {
    background-color: var(--backl0_h);
    color: var(--col_correct);
}

.episContent.l1 .cardAnswers.answersUnsolved .cardAnswer:hover,
.episContent.l1 .cardVisualAnswers.answersUnsolved .cardVisualAnswer:hover {
    background-color: var(--backl1_h);
    color: var(--col_correct);
}

.episContent.l2 .cardAnswers.answersUnsolved .cardAnswer:hover,
.episContent.l2 .cardVisualAnswers.answersUnsolved .cardVisualAnswer:hover {
    background-color: var(--backl2_h);
    color: var(--col_correct);
}

.episContent.l3 .cardAnswers.answersUnsolved .cardAnswer:hover,
.episContent.l3 .cardVisualAnswers.answersUnsolved .cardVisualAnswer:hover {
    background-color: var(--backl3_h);
    color: var(--col_correct);
}

.episContent.l4 .cardAnswers.answersUnsolved .cardAnswer:hover,
.episContent.l4 .cardVisualAnswers.answersUnsolved .cardVisualAnswer:hover {
    background-color: var(--backl4_h);
    color: var(--col_correct);
}

.episContent.l5 .cardAnswers.answersUnsolved .cardAnswer:hover,
.episContent.l5 .cardVisualAnswers.answersUnsolved .cardVisualAnswer:hover {
    background-color: var(--backl5_h);
    color: var(--col_correct);
}

.episContent.l6 .cardAnswers.answersUnsolved .cardAnswer:hover,
.episContent.l6 .cardVisualAnswers.answersUnsolved .cardVisualAnswer:hover {
    background-color: var(--backl6_h);
    color: var(--col_correct);
}

.episContent.l7 .cardAnswers.answersUnsolved .cardAnswer:hover,
.episContent.l7 .cardVisualAnswers.answersUnsolved .cardVisualAnswer:hover {
    background-color: var(--backl7_h);
    color: var(--col_correct);
}

.episContent.l8 .cardAnswers.answersUnsolved .cardAnswer:hover,
.episContent.l8 .cardVisualAnswers.answersUnsolved .cardVisualAnswer:hover {
    background-color: var(--backl8_h);
    color: var(--col_correct);
}

.episContent.l9 .cardAnswers.answersUnsolved .cardAnswer:hover,
.episContent.l9 .cardVisualAnswers.answersUnsolved .cardVisualAnswer:hover {
    background-color: var(--backl9_h);
    color: var(--col_correct);
}

.cardAnswer {
    height: 30px;
    padding: 4px 0;
    /* margin: 1px 0; */
    background-color: #bbbbbb;
    color: #222222;
    font-size: large;
}

.cardVisualAnswer {
    height: 20%;
    /* padding: 4px 0; */
    box-sizing: border-box;
    /* margin: 1px 0; */
    background-color: #bbbbbb;
    color: #222222;
    font-size: large;
    position: relative;
}

.cardAnswers.answersUnsolved .cardAnswer, .cardVisualAnswers.answersUnsolved .cardVisualAnswer {
    cursor: pointer;
}

.cardAnswer:hover, .cardVisualAnswer:hover {
    transition: all 0.5s;
}

.cardAnswer .answerIcon {
    width: 16px;
    margin: 0 6px;
    display: none;
    vertical-align: middle;
}

.cardVisualAnswer .answerIcon {
    height: 60%;
    margin: 0 6px;
    box-sizing: border-box;
    display: none;
    position: absolute;
    top: 20%;
    right: 20px;
    /* vertical-align: middle; */
}

.answerImage {
    height: 100%;
}

/* .answerIcon.show {
    display: inline-block;
} */
.cardAnswer.answerCorrect .answerIcon,
.cardAnswer.answerWrong .answerIcon,
.cardVisualAnswer.answerCorrect .answerIcon,
.cardVisualAnswer.answerWrong .answerIcon {
    display: inline-block;
}

.episContent .cardAnswer.answerCorrect, .episContent .cardVisualAnswer.answerCorrect {
    background-color: var(--back_correct);
    color: #eeeeee;
}

.visualAnswerTitle {
    font-size: x-large;
    padding-top: 0.65em;
}

.cardVisualAnswer > .visualAnswerTitle {
    display: none;
}

.cardVisualAnswer.answerCorrect > .answerImage,
.cardVisualAnswer.answerWrong > .answerImage {
    display: none;
}

.cardVisualAnswer.answerCorrect > .visualAnswerTitle,
.cardVisualAnswer.answerWrong > .visualAnswerTitle {
    display: block;
}



.levelRoot {
    /* background-color: var(--back_cardRoot); */
    width: 100%;
    height: 100%;
}

.levelHeader {
    height: 70px;
    padding: 20px 0 0 0;
    box-sizing: border-box;
    background-color: var(--back_appFooter);
    font-size: large;
}

.confetti {
    width: 360px;
    position: absolute;
    top: 135px;
    left: calc(50% - 180px);
    pointer-events: none;
    opacity: 0.7;
}

.resultsText {
    padding-top: 120px;
    color: var(--col_app_light);
}

.resultsValue {
    box-sizing: border-box;
    padding: 10px;
    height: 80px;
    /* border: 3px solid #555555; */
    font-size: xx-large;
    display: inline-block;
    border-radius: 12px;
    margin: 10px 0;
    animation: pulseColor 10s infinite;
}

.btnNextLevel {
    padding: 20px;
    background-color: yellow;
    /* border: 3px solid #555555; */
    /* font-size: x-large; */
    /* display: inline-block; */
    color: #ffffff;
    border-radius: 12px;
    margin: 10px 20px;
    cursor: pointer;
    animation: pulseBg 10s infinite;
}

@keyframes pulseBg {
    0% {
        background-color: #e63b49;
    }

    25% {
        background-color: #ba56e9;
    }

    50% {
        background-color: #2faa9a;
    }

    75% {
        background-color: #7fb933;
    }

    100% {
        background-color: #e63b49;
    }
}

@keyframes pulseColor {
    0% {
        color: #3d0e14;
    }

    25% {
        color: #2f103f;
    }

    50% {
        color: #0d3a34;
    }

    75% {
        color: #2b3d11;
    }

    100% {
        color: #3d0e14;
    }
}








.resultsRoot {
    /* background-color: var(--back_cardRoot); */
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
}

.resultsBg {
    width: 100%;
    height: calc(100% - 70px);
    position: absolute;
    left: 0;
    top: 70px;
    background-image: url(/Resource/Img/Image/Animals2.jpg);
    background-image: url(/Content/Flashcards/Img/Image/Animals2.jpg);
    background-size: auto 100%;
    /* background-position: center 50%; */
    opacity: 0.2;
    z-index: 0;
    animation: movingBg 60s infinite;
    /* animation-timing-function: linear; */
    animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
    pointer-events: none;
}

@keyframes movingBg {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 0%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.resultsHeader {
    height: 70px;
    padding: 20px 0 0 0;
    box-sizing: border-box;
    background-color: var(--back_appFooter);
    font-size: large;
}

.animalsPic {
    position: absolute;
    top: 70px;
    left: 0;
    height: calc(100% - 70px);
    display: block;
    z-index: 1;
}

.levelResults_text {
    padding: 60px 0 1px 0;
    color: var(--col_app_light);
    position: relative;
    z-index: 2;
    font-size: small;
    pointer-events: none;
}

.resultsVal {
    background-color: #888888;
    border-radius: 3px;
    margin: 1px auto;
    width: 70px;
    font-size: small;
    /* border-top: 1px solid var(--borderl0); */
    /* border-bottom: 1px solid #888888; */
    z-index: 2;
    /* opacity: 0.8; */
    /* border: 2px solid var(--border_app); */
}

.totalresults_text {
    padding: 2px 0 1px 0;
    color: var(--col_app_light);
}

.totalResultsVal {
    /* background-color: #cddac6; */
    border-radius: 3px;
    margin: 1px auto;
    width: 120px;
    animation: pulseResults 5s infinite;
    /* border: 2px solid var(--border_app); */
    /* border: 1px solid var(--border_app); */
    /* opacity: 0.8; */
}

.btnRestart,
.btnContinue,
.btnFromStart {
    padding: 10px;
    color: var(--col_app);
    background-color: var(--backl0);
    /* color: #ffffff; */
    border-radius: 3px;
    margin: 10px auto 0 auto;
    width: 60%;
    cursor: pointer;
    /* border: 2px solid var(--border_app); */
    transition: all 0.6s;
}

    .btnRestart:hover,
    .btnContinue:hover,
    .btnFromStart:hover {
        background-color: var(--backl0_h);
        color: #000000;
    }

.resultsVal.l0 {
    background-color: var(--backl0);
    color: var(--coll0);
    border: 1px solid var(--borderl0);
}

.resultsVal.l1 {
    background-color: var(--backl1);
    color: var(--coll1);
    border: 1px solid var(--borderl1);
}

.resultsVal.l2 {
    background-color: var(--backl2);
    color: var(--coll2);
    border: 1px solid var(--borderl2);
}

.resultsVal.l3 {
    background-color: var(--backl3);
    color: var(--coll3);
    border: 1px solid var(--borderl3);
}

.resultsVal.l4 {
    background-color: var(--backl4);
    color: var(--coll4);
    border: 1px solid var(--borderl4);
}

.resultsVal.l5 {
    background-color: var(--backl5);
    color: var(--coll5);
    border: 1px solid var(--borderl5);
}

.resultsVal.l6 {
    background-color: var(--backl6);
    color: var(--coll6);
    border: 1px solid var(--borderl6);
}

.resultsVal.l7 {
    background-color: var(--backl7);
    color: var(--coll7);
    border: 1px solid var(--borderl7);
}

.resultsVal.l8 {
    background-color: var(--backl8);
    color: var(--coll8);
    border: 1px solid var(--borderl8);
}

.resultsVal.l9 {
    background-color: var(--backl9);
    color: var(--coll9);
    border: 1px solid var(--borderl9);
}



@keyframes pulseResults {
    0% {
        background-color: #e63b49;
        color: #360f14;
    }

    25% {
        background-color: #ba56e9;
        color: #290f35;
    }

    50% {
        background-color: #2faa9a;
        color: #102e2a;
    }

    75% {
        background-color: #7fb933;
        color: #24330f;
    }

    100% {
        background-color: #e63b49;
        color: #360f14;
    }
}




@media only screen and (min-width: 768px) {

    .flashcardsOuter {
        width: 250px;
        height: 500px;
        margin: 20px;
    }

    #flashcardsx {
        display: flex;
        justify-content: center;
    }

    .cardTextBox {
        height: calc(50% - 112px);
    }

    .cardVisualAnswers {
        height: 50%;
    }

    .confetti {
        width: 90%;
        left: 5%;
        top: 205px;
    }
}

@media only screen and (min-width: 992px) {

    .flashcardsOuter {
        width: 293px;
        height: 586px;
    }

    .cardTextBox {
        height: calc(45% - 112px);
    }

    .cardVisualAnswers {
        height: 55%;
    }

    .confetti {
        width: 90%;
        left: 5%;
        top: 185px;
    }
}

@media only screen and (min-width: 1200px) {

    .flashcardsOuter {
        width: 360px;
        height: 720px;
    }

    .cardTextBox {
        height: calc(40% - 112px);
    }

    .cardVisualAnswers {
        height: 60%;
    }

    .confetti {
        width: 90%;
        left: 5%;
        top: 155px;
    }
}