@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat&family=DynaPuff&family=Monserrat:wght@500&display=swap');

.animation-area{ 
	width:100%;
	height:100vh;}
.box-area{ 
	position:absolute;
	top:0;
	left:0;
	width:85vw;
	height:100vh;
	overflow:hidden;}
.box-area li{ 
	position:absolute;
	display:block;
	list-style:none;
	width:0;
	height:0;
	animation:animate 20s linear infinite;
	bottom:-150px;}
.box-area li:nth-child(1){ 
	left:86%;
	animation-delay:0s;}
.box-area li:nth-child(2){ 
	left:12%;
	animation-delay:1.5s;
	animation-duration:10s;}
.box-area li:nth-child(3){ 
	left:70%;
	animation-delay:5.5s;}
.box-area li:nth-child(4){ 
	left:42%;
	animation-delay:0s;
	animation-duration:15s;}
.box-area li:nth-child(5){ 
	left:65%;
	animation-delay:0s;}
.box-area li:nth-child(6){ 
	left:23%;
	animation-delay:3.5s;}
@keyframes animate{ 
	0%{ 
		transform:translateY(0) scale(0);
	}
	100%{ 
		transform:translateY(-800px) scale(2);
		opacity:0;
	}
}
/* PRELOAD CSS */
.loader-bg-bibleQuiz{
    background:#1a0f30;
    display:grid;
    place-content:center;
    height:100%;
    position:fixed;
    width:100%;
    z-index:999999;}
.loader-bibleQuiz{
    border:0 soild transparent;
    border-radius:50%;
    height:150px;
    width:150px;
    position:absolute;
    top:calc(45vh - 75px);
    left:calc(46vw - 75px);}
.loader-bibleQuiz:before, .loader-bibleQuiz:after{
    border:1em solid #ff5733;
    content:'';
    border-radius:50%;
    width:inherit;
    height:inherit;
    position:absolute;
    top:0;
    left:0;
    animation:loader 2s linear infinite;
    opacity:0;}
.loader-bibleQuiz:before{
    animation-delay:.5s;}
@keyframes loader{
    0%{
        transform:scale(0);
        opacity:0;
    }
    50%{
        opacity:1;
    }
    100%{
        transform:scale(1);
        opacity:0;
    }
}
html{ 
    font-size:100%;
    font-size:62.5%;
    font-size:16px;
    /* line-height:16px; */
}
body{
    background:#1a0f30;
    color:#f0f6fc;
    font-family:'DynaPuff', cursive;
    margin:0;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;}
#quizResult-section, #CorrectedAnswers-section,.corAnswers-Board .explainButton, audio{
    display:none;}
/* Custom CSS */
.option>span>ul>li>span[ref]:not(.verse){color:#FFA500!important;}
a{text-decoration:none;}
ul, ol, li{
    list-style-type:none;
    list-style-type:disc;}
hr{
    width:-webkit-fill-available;
    border-radius:5px;}
.icons{
    font-size:20px ;}
.show{
    display:grid!important;}
.hide{
    display:none!important;}
.content{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease-out;
    margin:0;
    padding:0;}
.explainButton,#confirmButton,.popupBtn>button, .Result-btn>button,.corAnswers-btn>button,details>summary:first-of-type{cursor:pointer;}
.explainButton{
    position:absolute;
    border-radius:6px;
    right:10px;
    top:3px;
    font-size:medium;
    z-index:1;}
.QandA-BoardLinks{
    display:grid;
    grid-template-columns:50% 50%;
    padding:0 10px;
    z-index:1;}
#quizCatName{
    border-radius:13px;
    /* font-weight:bolder; */
    font-size:larger;
    text-transform:capitalize;
    place-self:center start;
    /* border:gray 1px solid; */
    /* width:130px; */
}
#confirmButton{
    border-radius:6px;
    font-weight:bold;
    padding:10px;
    place-self:center end;
    text-transform:uppercase;
    text-transform:capitalize;
    width:auto;}
#confirmButton:hover{
    font-weight:bolder;}
/* Choose QandA-Categories CSS */
button.fadeOut:hover{
    opacity:1!important;}
.catSettings{
    position:absolute;
    bottom:0;
    right:0;}
.catSettings>img{
    width:35px;}
.choosecat-grid{
    display:grid;
    /* grid-template-rows:10% 90%;
    grid-template-columns:100%; */
    min-height:calc(100vh - 80px);
    position:relative;}
.choosecat-grid-inner{
    display:grid;
    place-content:center;
    /* grid-template-columns:95%; */
    width:100%;
    min-height:calc(100vh - 80px);}
.choosecat-grid-inner>div{
    display:grid;
    gap:10px;}
.choosecat-grid-inner>div{
    grid-template-areas:"col-1 col-2" "row-1 row-1";}
.con1{ 
    grid-area:col-1;}
.con2{ 
    grid-area:col-2;}
.con3{ 
    grid-area:row-1;}
.choosecat-grid-inner>div>button{
    border-radius:100%;
    font-size:1.375em!important;
    font-weight:bold;
    /* padding:10px; */
    cursor:pointer;
    place-self:center;
    text-align:center;
    text-transform:capitalize;}
.choosecat-grid-inner>div>button>a{
    display:grid;
    place-content:center;
    height:160px;
    width:160px;}
.choosecat-grid h2{
    font-size:1.8em;
    place-self:end;
    margin:2em 0;
    text-align:center;
    width:-webkit-fill-available;}
@media only screen and (max-width:300px){
.choosecat-grid-inner>div>button>a{
    height:120px;
    width:120px;}}
@media only screen and (min-width:376px){
.choosecat-grid-inner>div>button, .choosecat-grid h2{
    font-size:2em!important;}}
/* @media only screen and (min-width:410px){
.choosecat-grid-inner>div>button, .choosecat-grid h2{
    font-size:2.2em!important;}} */

@media only screen and (min-width:540px){
.choosecat-grid-inner>div>button, .choosecat-grid h2{
    font-size:2.2em!important;}
.choosecat-grid-inner>div{ 
    gap:35px;}
.choosecat-grid-inner>div>button>a{
    height:195px;
    width:195px;}}
@media only screen and (min-width:768px){
.choosecat-grid-inner>div>button, .choosecat-grid h2{
    font-size:3em!important;}
.choosecat-grid-inner>div>button>a{ 
    height:320px;
    width:320px;}}
@media only screen and (min-width:820px){
.choosecat-grid-inner>div>button>a{ 
    height:350px;
    width:350px;}}
@media only screen and (min-width:912px){
.choosecat-grid{ 
    /* grid-template-rows:10% 90%; */
    height:100vh;}
.choosecat-grid h2{ 
    place-self:end center;}
.choosecat-grid-inner>div>button>a{
    height:370px;
    width:370px;}}
@media  only screen and (min-width:1024px){
.choosecat-grid{ 
    /* display:grid;
    grid-template-rows:13% 87%;
    place-content:center; */
    gap:0;
    height:100vh;}
.choosecat-grid-inner>div{
    display:flex;
    justify-content:center;}
.choosecat-grid>div>button, .choosecat-grid h2{ 
    font-size:2.5em!important;
    place-self:center;}
.choosecat-grid-inner>div>button>a{
    height:300px;
    width:300px;    
}}


/* QandA-Categories CSS */
/* HEADER SECTION */
#mobileHeader, #desktopHeader, footer{ 
display:none!important;}
#cat-headerbar{
    display:grid;
    /* place-items:center; */
    place-content:center;
    font-size:1.5em;
    grid-template-columns:10% 90%;
    overflow:visible;
    position:relative;}
#cat-headerbar a{
    display:grid;}
/* .churchLOGO{
    display:-ms-grid;
    display:grid;
    place-content:center start;
    place-self:normal;} */
#catSettings{ 
    display:grid;
    place-content:center end;
    place-self:center end;}
.headerUL{
    display:-ms-grid;
    display:grid;
    place-content:center start;}
ul.header-links{
    column-gap:1em;
    display:-webkit-box;
    display:flex;
    margin:0!important;
    padding:0;}
.header-links-li{
    list-style-type:none;
    margin:0;}
.header-links-li>a{
    font-size:100%!important;
    padding:15px 10px;
    text-decoration:none!important;}
.align-items{
    align-items:center;}
.churchLOGO img{ 
    padding:10px 10px 10px 0;}
@media only screen and (max-width:589px){
#cat-headerbar{
    grid-template-columns:32% 53% 15%;}
#settingsContent, #settingsReviewContent, #catSettingsContent{
    top:150px;}
#cat-bibleQuiz-inner h1{ 
    margin:0.4em 0!important;}
#cat-bibleQuiz-inner h5{ 
    margin:0.7em 0!important;}
.churchLOGO img{ 
    height:35px;}
ul.header-links{ 
    column-gap:0em;}
.leftRight-space-16{ 
    padding:0 8px 0!important;}}
@media screen and (max-width:420px){
#cat-headerbar{ 
    font-size:1.3em;}
.churchLOGO img{ 
    height:28px;}
.header-links-li>a{ 
    font-size:85.7%!important;}
#settingsContent, #settingsReviewContent, #catSettingsContent{ 
    top:130px;}}
@media screen and (max-width:360px){
.catSettings>img{ 
    width:45px;}}
@media screen and (max-width:280px){
#cat-headerbar{ 
    font-size:0.8em;}
#cat-bibleQuiz-inner h1{ 
    margin:0.4em 0!important;
    font-size:2em!important;
    -webkit-text-stroke-width:1px!important;}
.churchLOGO img{ 
    height:23px;}
.catSettings>img{ 
    width:35px;}}
@media only screen and (min-width:590px){ 
#settingsContent, #settingsReviewContent, #catSettingsContent{ 
    top:150px;}
#cat-headerbar{
    grid-template-columns:30% 50% 20%;}
.headerUL{ 
    margin-left:20px;}
.leftRight-space-16{ 
    padding:0 16px 0!important;}}
@media only screen and (min-width:768px){
#settingsContent, #settingsReviewContent, #catSettingsContent{ 
    top:170px;} 
#cat-headerbar{
    /* font-size:2.5em; */
    grid-template-columns:35% 53% 12%;}
.churchLOGO img{ 
    height:40px;}
.catSettings>img{
    width:50px;}}
@media only screen and (min-width:1024px){ 
#settingsContent, #settingsReviewContent, #catSettingsContent{ 
    top:80px;} 
#cat-headerbar{
    /* place-self:baseline; */
    grid-template-columns:43% 40% 17%;}}
@media only screen and (min-width: 1024px) and (min-height: 1366px){
#settingsContent, #settingsReviewContent, #catSettingsContent{ 
    top:300px;}    
}
/* END OF HEADER SECTION */

.cat-bibleQuiz-section{
    position:relative;
    display:grid;}
#cat-bibleQuiz-inner{
    position:relative;
    margin-bottom:20px;}
#cat-bibleQuiz-inner .aboutRules{ 
    line-height:26px;}
#cat-bibleQuiz-inner .aboutImg{
    width:20px;}
#cat-bibleQuiz-inner h1{
    border:none;
    font-size:7rem;
    letter-spacing:0.5rem;
    /* transform:translate(-50%, -50%); */
    -webkit-text-stroke-width:4px;}
#cat-bibleQuiz-inner h5{
    border:none;
    display:grid;
    font-size:2em;
    margin:0;
    place-content:center start;}
#cat-bibleQuiz-inner h6{
    font-size:1.5em;
    margin:0;}
.aboutRules p, .aboutRules ol{ 
    font-size:1rem;}
.aboutRules li{ 
    list-style-type:decimal;}
.aboutRules li li{ 
    list-style:lower-alpha;}
.cat-grid{ 
    place-content:baseline;}
/* MOBILE CSS */
@media screen and (max-width:590px){
#cat-bibleQuiz-inner h1{
    font-size:3rem;
    -webkit-text-stroke-width:2px;}
#cat-bibleQuiz-inner h5{
    font-size:1.2rem;}}
@media only screen and (max-width:350px){
.cat-grid{ 
    display:-ms-grid;
    display:grid;
    font-size:0.9em;
    gap:10px;
    grid-template-columns:repeat(2, 1fr);
    grid-gap:10px;
    -webkit-box-direction:normal;
    -webkit-box-orient:horizontal;}}
@media only screen and (min-width:351px){
.cat-grid{ 
    display:-ms-grid;
    display:grid;
    font-size:0.9em;
    gap:10px;
    grid-template-columns:repeat(2, 1fr);
    grid-gap:10px;
    -webkit-box-direction:normal;
    -webkit-box-orient:horizontal;}}
@media only screen and (min-width:540px){
.cat-grid{ 
    font-size:1em;
    gap:20px;
    margin-top:15px;
    grid-template-columns:repeat(3, 1fr);
    grid-gap:20px;
    -webkit-box-direction:normal;
    -webkit-box-orient:horizontal;}}
@media only screen and (min-width:821px){
.cat-grid{ 
    font-size:0.9em;
    gap:15px;
    grid-template-columns:repeat(4, 1fr);
    grid-gap:15px;
    -webkit-box-direction:normal;
    -webkit-box-orient:horizontal;}}
@media only screen and (min-width:960px){
.cat-grid{ 
    grid-gap:20px;
    gap:20px;
    font-size:1em;}}
@media screen and (max-width:299px){
.cat-grid{ 
    font-size:0.7em;}
.cat-grid>a{ 
    height:75px;
    padding:0.3em;}}
@media screen and (min-width:300px){
.cat-grid>a{ 
    height:93px;
    padding:0.5em;}}
@media screen and (min-width:400px){
.cat-grid>a{ 
    height:110px;}}
@media screen and (min-width:821px){
.cat-grid>a{ 
    height:125px;}}
.cat-grid>a{ 
    cursor:pointer;
    border-radius:4px;
    overflow:hidden;
    position:relative;}
.cat-grid>a{ 
    cursor:pointer;
    text-transform:uppercase;
    text-decoration:none!important;
    direction:ltr;
    display:-webkit-box;
    display:flex;
    -webkit-box-align:end;
    align-items:end;}
.cat-grid>a:hover{
    text-decoration:underline!important;}
/* DESKTOP VIEW */
@media screen and (min-width:591px){
#cat-bibleQuiz-inner .aboutRules{ 
    line-height:30px;}
#cat-bibleQuiz-inner h1{
    margin:0.3em 0;}
.aboutRules p, .aboutRules ol{ 
    font-size:1.5rem;}}
@media screen and (min-width:767px){
#cat-bibleQuiz-inner h1{
    margin:0.2em 0;}
#cat-bibleQuiz-inner h5{
    font-size:2.1em;}}
@media screen and (min-width:911px){
#cat-bibleQuiz-inner .aboutRules{ 
    line-height:35px;}
#cat-bibleQuiz-inner h5{
    font-size:2.2em;}
#cat-bibleQuiz-inner h6{
    font-size:1.7em;}}

/* QandA CSS */
#QandA-section{
    font-style:normal;
    /* padding:5px 10px 0; */
    /* height:100vh; */
    display:grid;
    grid-template-rows:10% 20% 60% 10%;}
.opacityBG{
    /* height:100vh; */
    display:grid;
    grid-template-rows:10% 15% 5% 60% 10%;
    perspective:1000px;}
.opacityBGTwo{
    grid-template-rows:60px 80px auto 10%;}
/* HEADER SECTION */
.QandA-header{
    border-radius:3px;
    padding:10px 0;
    overflow:hidden;;
    display:inline-flex;
    display:grid;
    place-content:center;
    grid-template-rows:minmax(10px, 1fr) auto;
    position:relative;
    grid-template-areas:"col-1 col-2 col-3";
    width:-webkit-fill-available;}
.quizCatLink{
    cursor:pointer;
    display:flex;
    place-content:start;
    align-items:center;
    align-self:center;
    width:-webkit-fill-available;
    border-radius:3px;
    padding:0;}
button{
    background-color:inherit;
    border:none;
    font-family:inherit;}
.quizCatLink a{ 
    text-decoration:none!important;
    text-align:left;
    width:-webkit-fill-available;
    height:-webkit-fill-available;
    display:grid;
    place-items:center start;}
#settings{ 
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;}
#settings>img{ 
    height:-webkit-fill-available;
    width:95%;}
#settingsContent, #settingsReviewContent, #catSettingsContent, #poorPerPopup{ 
    border-radius:6px;
    display:none;
    font-size:1.25em;
    position:absolute;
    width:60vw;
    height:auto;
    place-self:center;
    text-align:left;
    place-content:center;
    padding:40px;
    z-index:3;
    gap:10px;
    text-transform:uppercase;
    box-shadow:3px -500px 22px 2000px rgb(0 0 0 / 88%);}
#settingsContent, #settingsReviewContent, #catSettingsContent{
    color: #f0f6fc!important;}
#settingsContent a, #settingsReviewContent a, #catSettingsContent a, #poorPerPopup a{
    text-decoration:none;}
.settingsContentInner, .catSettingsContentInner, #poorPerPopup{ 
    display:grid;
    gap:10px;}
#poorPerPopup{ 
    place-self:center;}
.settingsContentInner>div, #settings, .catSettingsContentInner>div, #catSettings{ 
    cursor:pointer;}
#themeSettings ul, #fontSettings ul, #catThemeSettings ul{ 
    font-size:16px!important;
    display:flex;
    flex-direction: column;
    gap:8px;
    /* margin-top:8px; */
    /* opacity:0.8; */
    padding-left:8px;
    height: 150px;
    overflow-y:auto;
    flex-wrap:nowrap;}
#themeSettings li, #fontSettings li{
    display:grid;
    text-transform:capitalize;
    position:relative;
}
#themeSettings li{
    grid-template-columns:70% 25%;
}
#themeSettings li, #fontSettings li{
    grid-template-columns:45% 30% 25%;
}
#themeSettings li>p, #fontSettings li>p{
    margin:0;
    max-width: 100px;
    opacity: 0.8;
}
#themeSettings li>p:hover, #fontSettings li>p:hover{
    opacity: 1;
}
#themeSettings li>em, #fontSettings li>em{
    font-size: 10px!important;
    place-self: center;
}
#themeSettings li>span{
    border-radius:50%;
    width:20px;
    height:20px;
    margin-top:2px;
}
#themeSettings li>span, #fontSettings li>span{
    font-size: 14px!important;
    position:absolute;
    right:10px;
    text-transform:lowercase;
}
#themeSettings li>span,
#fontSettings li>span{
    place-self:center;
    opacity: 1!important;
}
@media screen and (max-width:541px){
#themeSettings li{
    /* grid-template-columns:80% 20%; */
}
#themeSettings li>span{
    width:12px;
    height:12px;
    margin-top:3px;
}}
#rulesContent{
    display:none;
    z-index:1100;
    position:absolute;
    /* height:100vh; */
    top:0;}
#audioSettings, #catAudioSettings{ 
    display:flex;}
#audioSettings span, #catAudioSettings span{ 
    margin-right:30px;}
#audioSettings .fa-volume-up, #catAudioSettings .fa-volume-up{ 
    opacity:0.5;
    font-size:14px;}
#playButton, #pauseButton, #playButtonCat, #pauseButtonCat, #playButtonFromResult, #pauseButtonFromResult{ 
    font-size:1.25em!important;
    padding:0;
    place-self:center;
    cursor:pointer;}
#playButton, #playButtonCat, #playButtonFromResult{
    opacity:0.2;}
.vl{ 
    margin:0 15px;
  }
#nextPrevButton{ 
    border-radius:10px;
    /* padding:0 10px; */
    /* color:aliceblue; */
    cursor:pointer;
    display:flex;
    align-items:center;
    /* grid-area:col-2; */
    grid-template-columns:100%;
    width:100%;
    /* place-content:center; */
    z-index:1;}
#prevquestionbutton{ 
    display:inline-flex;
    /* place-content:center; */
    border-right:2px solid;
    flex-direction:row;
    width:50%;
    /* align-content:stretch; */
    justify-content:center;}
#nextquestionbutton{ 
    display:inline-flex;
    place-content:center;
    justify-content:center;
    align-items:center;
    width:50%;}
#prevquestionbutton span, #nextquestionbutton span{display:flex;}
#prevquestionbutton i, #nextquestionbutton i{
    display:flex;
    align-items:center;
    line-height:normal;}
#questionhint{ 
    border-radius:3px;
    cursor:pointer;
    display:flex;
    align-content:center;
    place-self:center end;}
#CountHint{
    display:flex;
    justify-self:center;
    width:-webkit-fill-available;
    width:95%;}
#subCat{
    place-content:center;
    place-self:center;
    width:95%;
    display:flex;}
#subCat>p{
    background-color:transparent!important;
    margin:0;
    padding:0!important;}
.Hint-img>img{ 
    height:100px;
    height:55px;}
.imgSizeRight, .imgSizeWrong{
    display:grid;
    grid-area:col-1;
    position:absolute;
}
#questioncount{
    cursor:default;
    display:grid;
    place-content:center start;
    width:100%;}

/* QandA-BOARD SECTION */
.QandA-Board{
    height:-webkit-fill-available;
    position:relative;}
.QandA-Board>ol{
    padding:0;
    margin:0;
    margin-bottom:10px;}
.QandA-Board>ol>li{ 
    display:-ms-grid;
    display:grid;
    place-items:center;
    border-radius:3px!important;
    text-align:left;
    text-align:center;
    margin:0;}
.QandA-Board>ol>li>em, .QandA-Board>ol>li>p{
    display:none;}
.showHintCSS{
    border-radius:6px;
    display:block!important;
    padding:70px 20px!important;
    position:absolute;
    width:76vw;
    height:auto;
    place-self:center;
    text-align:center;
    z-index:3;}
.showNewCatCSS{
    display:block;
    position:initial;
    width:auto;
    z-index:0;}
.closeHint, .closeSettings, .closeCatSettings{
    background: url(../images/cancel-svgrepo-com-DarkMode.svg) center no-repeat;
    border-radius:6px;
    width:1em;
    height:1em;
    padding:5px;
    cursor:pointer;
    position:absolute;
    right:3px;
    top:3px;
    z-index:1;}
#rulesContent .closeSettings{
    width:2em;
    height:2em;}
.showHintCSS>a, .showNewCatCSS>a{ 
    text-decoration:underline;
    place-self:center;}
.QandA-Board>ol>li, .showHintCSS, #rulesContent, #settingsContent, #settingsReviewContent, #catSettingsContent, #poorPerPopup, #quizResult-section{ 
    -webkit-animation-name:bounceIn;
    -moz-animation-name:bounceIn;
    -o-animation-name:bounceIn;
    -ms-animation-name:bounceIn;
    animation-name:bounceIn;
    -webkit-animation-duration:.6s;
    -moz-animation-duration:.6s;
    -o-animation-duration:.6s;
    -ms-animation-duration:.6s;
    animation-duration:.6s;
    -webkit-animation-timing-function:ease-out;
    -moz-animation-timing-function:ease-out;
    -o-animation-timing-function:ease-out;
    -ms-animation-timing-function:ease-out;
    animation-timing-function:ease-out;}
.QandA-Board>ol>li>ul>li{
    -webkit-animation-name:mymove;
    -moz-animation-name:mymove;
    -o-animation-name:mymove;
    -ms-animation-name:mymove;
    animation-name:mymove;
    -webkit-animation-duration:3s;
    -moz-animation-duration:3s;
    -o-animation-duration:3s;
    -ms-animation-duration:3s;
    animation-duration:3s;
    -webkit-animation-timing-function:ease-out;
    -moz-animation-timing-function:ease-out;
    -o-animation-timing-function:ease-out;
    -ms-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
    -webkit-animation-delay:-2s;
    -moz-animation-delay:-2s;
    -o-animation-delay:-2s;
    -ms-animation-delay:-2s;
    animation-delay:-2s;
    -webkit-animation-direction:alternate;
    -moz-animation-direction:alternate;
    -o-animation-direction:alternate;
    -ms-animation-direction:alternate;
    animation-direction:alternate;}
@keyframes bounceIn{ 
0%{ 
    transform:scaleY(0)
}
80%{ 
    transform:scaleY(1.1)
}
100%{ 
    transform:scaleY(1)
}}
@keyframes mymove{ 
from{ right:-300px;}
to{ left:0px;}
}
.QandA-Board>ol>li>ul{ 
    list-style-type:none;
    padding:0;
    counter-reset:alphabeticList;}
.QandA-Board>ol>li>ul>li,
.insertedSpan>strong{ 
    font-weight:400!important;}
.removeMaxHeight{
    max-height:none!important;}
.insertedDiv,.QandA-Board>ol>li>ul>li{
    display: block;
    position: relative;
    padding: 2px;}
.insertedDivInner{
    display: grid;}
.insertedDiv, .insertedDivInner{ 
    max-height:-webkit-fill-available;
    max-height:500px;
    border-radius: 20px;}
.QandA-Board>ol>li>ul>li,.insertedSpan{
    border-width:5px;
    border-radius:24px;
    /* border-radius:40px; */
    position:relative;
}
.QandA-Board>ol>li>ul>li{
    margin-top:20px;}
.insertedSpan{
    display:-ms-grid;
    display:grid;
    place-content:center;
    place-items:center start;
    grid-template-columns:7% 93%;
    align-content:space-around;
    grid-template-areas:"col-1 col-2"
                        "row-1 row-2";
    cursor:pointer;
    text-align:left;
    padding:0.7em 0.5em;
}
.insertedSpan::before{ 
    counter-increment:alphabeticList;
    content:counter(alphabeticList, upper-alpha);
    display:grid;
    place-content:center;
    grid-area:col-1;
    font-size:15px;
    font-weight:600;
    width:20px;
    height:20px;
    border-radius:50%;
    margin-right:0.5em;}
.QandA-Board>ol>li>ul>li>ul, .QandA-Board>ol>li>ul>li>span>ul{
    -webkit-animation-name:bounceIn;
    -moz-animation-name:bounceIn;
    -o-animation-name:bounceIn;
    -ms-animation-name:bounceIn;
    animation-name:bounceIn;
    -webkit-animation-duration:.6s;
    -moz-animation-duration:.6s;
    -o-animation-duration:.6s;
    -ms-animation-duration:.6s;
    animation-duration:.6s;
    -webkit-animation-timing-function:ease-out;
    -moz-animation-timing-function:ease-out;
    -o-animation-timing-function:ease-out;
    -ms-animation-timing-function:ease-out;
    animation-timing-function:ease-out;}
.QandA-Board>ol>li>ul>li>ul,.QandA-Board>ol>li>ul>li>span>ul{
    display:inline-flex;
    display:none;
    grid-area:row-2;
    font-weight:400;
    padding:0;
    list-style:none;
    text-align:left;}

/* MOBILE VIEW */
@media  only screen and (max-width:657px){
#QandA-section{
    grid-template-rows:10% 10% 4% auto 10%;}
.opacityBG{
    grid-template-rows:10% 10% 4% auto 10%;
    min-height:calc(100vh - 80px);}
.opacityBGTwo{
    grid-template-rows:10% 11% auto 12%;}
.QandAbody-section{ 
    /* padding:0 6px; */
    place-self:center;
    width:-webkit-fill-available;}
.QandA-BoardLinks{
    margin-top:20px;
    grid-template-columns:95%;
    grid-template-areas:"col-1";
    place-content:center;
    padding:0 6px;}
.explainButton{
    font-size:small;}
.imgSizeRight{ 
    left:6px;}
.imgSizeWrong{ 
    left:2px;}
/* HEADER SECTION */
.QandA-header{
    grid-template-columns:40% 55%;
    grid-template-columns:30% 15% 50%;}
#prevquestionbutton{
    border-right:1px solid;}

/* QandA-BOARD SECTION */
.insertedDiv, .insertedDivInner{ 
    position:relative;
    min-height:130px;
    max-height:300px;
    width:-webkit-fill-available;
    place-content:center;}
.insertedDivInner{
    padding:15px 10px;
}
.QandA-Board>ol>li{
    display:grid;
    /* grid-template-rows:60% 10% auto; */
    grid-template-columns:95%;
    place-content:start center;
    position:relative;
    text-align:center;}
.showHintCSS{ 
    /* border-radius:2px; */
    font-weight:400;
    /* left:50px; */
    top:5px;
    padding:45px 10px!important;
    max-width:90%;
    /* width:76vw; */
}
.showNewCatCSS{ 
    top:-26px;
    padding:10px!important;}
.QandA-Board>ol>li>ul{ 
    /* margin-top:50px; */
    place-self:baseline;
    width:100%;}
.QandA-Board>ol>li>ul>li>span>ul {
    margin-top: 5px;
}
.QandA-Board>ol>li>ul>li,.insertedSpan{
    min-height:20px;
    /* max-height:100px; */
}
.QandA-Board>ol>li>ul>li{ 
    margin-top:10px;}
.insertedSpan{ 
    grid-template-columns:13% 87%;}
.insertedSpan::before{
    margin-left:6px;}
.QandA-Board>ol>li>ul>li>span>ul{ 
    margin-top:5px;}
#quizCatName, #confirmButton{ 
    grid-area:col-1;}}
/* MOBILE VIEW FONT SIZES CSS */

/* FONT SIZES HEADER SECTION */
@media only screen and (max-width:657px){
.quizCatLink, #nextPrevButton, #questionhint{
    font-size:1.25em!important; /* 20px */
}
#questionhint:hover{
    font-size:1.375em!important; /* 22px */
}
#questioncount, #questionhint{ 
    font-size:1.25em!important;}}
@media only screen and (max-width:389px){
.quizCatLink, #nextPrevButton, #questionhint{
    font-size:1.125em!important; /* 18px */
}}
/* FONT SIZES QandA-BOARD SECTION */
@media only screen and (max-width:657px){
.QandA-Board>ol>li{ 
    font-size:1.5em; /* 24px */
    line-height:24px;}
.showHintCSS{ 
    font-size:1.0834em; /* 26px */
     line-height:28px;}
.showNewCatCSS{ 
    font-size:1.0834em;
    line-height:15px;}
.QandA-Board>ol>li>ul>li{ 
    font-size:0.85em; /* 18px */
    line-height:20px;}
.QandA-Board>ol>li>ul>li>ul,.QandA-Board>ol>li>ul>li>span>ul{ 
    font-size:0.667em; /* 12px */
    line-height:14px;}
#quizCatName, #confirmButton{ 
    font-size:1.375em!important; /* 22px */
}}
@media  only screen and (max-width:490px){
.insertedDiv,.QandA-Board>ol>li>ul>li{
    padding: 2px;}}
@media  only screen and (max-width:300px){
#playButton, #pauseButton, #playButtonCat, #pauseButtonCat, #playButtonFromResult, #pauseButtonFromResult{ 
    width:28px;
    height:28px;}
.vl{ 
    margin:0px 4px;}
.QandA-BoardLinks{
    margin-top:15px;}
.insertedDiv, .insertedDivInner{ 
    min-height:110px;
    max-height:250px;
}
.insertedDivInner{ 
    padding:12px 7px
}
.QandA-Board>ol>li>ul>li,.insertedSpan{ 
    min-height:20px;
    /* max-height:80px; */
}
.QandA-Board>ol>li>ul>li{ 
    margin-top:5px;}
.insertedSpan{ 
    grid-template-columns:13% 87%;
    padding:0.5em 0.2em;}
.insertedSpan::before{ 
    width:17px;
    height:17px;}
.imgSizeRight{ 
    width:20px;
    height:20px;}
.imgSizeWrong{ 
    width:27px;
    height:27px;}}
/* FONT SIZES QandA-BOARD SECTION */
@media only screen and (max-width:300px){
#settingsContent, #settingsReviewContent, #catSettingsContent, #poorPerPopup{ 
    font-size:1.05em;}
/* HEADER SECTION */
#questioncount, #questionhint, .quizCatLink, #nextPrevButton, #questionhint{ 
    font-size:0.9em!important;}
#playButton, #pauseButton, #playButtonCat, #pauseButtonCat, #playButtonFromResult, #pauseButtonFromResult{
    font-size:0.8em!important;}
.Hint-img>img{ 
    height:45px;}
/* QandA-BOARD SECTION */
.QandA-Board>ol>li{ 
    font-size:1.275em; /* 22px */
    line-height:22px;}
.showHintCSS{ 
    font-size:1.0634em; /* 24px */
    line-height:26px;}
.showNewCatCSS{ 
    font-size:0.7634em;
    line-height:10px;}
.QandA-Board>ol>li>ul>li{ 
    font-size:0.72em; /* 16px */
    line-height:18px;}
.QandA-Board>ol>li>ul>li>ul,.QandA-Board>ol>li>ul>li>span>ul{ 
    font-size:0.467em; /* 10px */
    line-height:12px;}
.QandA-Board>ol>li>ul>li::before{ 
    font-size:12px;}
.explainButton{ 
    font-size:smaller;}
#quizCatName, #confirmButton{ 
    font-size:1.125em!important; /* 20px */
}}
/* END OF MOBILE VIEW */

/* DESKTOP VIEW */
@media only screen and (min-width:658px){
#QandA-section{
    height:100vh;
    grid-template-rows:10% 12% auto 10%;}
.opacityBG{
    height:100vh;
    grid-template-rows:10% 12% 5% auto 10%;}
.opacityBGTwo{
    grid-template-rows:10% 12% auto 12%;}
.QandAbody-section{ 
    place-content:space-between;}
.QandA-BoardLinks{ 
    grid-template-columns:95%;
    grid-template-areas:"col-1";
    place-content:center;}
/* HEADER SECTION */
.QandA-header{
    grid-template-columns:25% 15% 55%;
    padding:15px 0;}
#questioncount{ 
    grid-template-columns:100%;
    place-content:center;}
.Hint-img>img{ 
    height:80px;}
/* QandA-BOARD SECTION */
.insertedDiv, .insertedDivInner{ 
    min-height:225px;
    max-height:450px;
    width:-webkit-fill-available;
  }
  .insertedDivInner{ 
    place-content:center;
    padding:30px 20px
  }
.QandA-Board>ol>li{
    /* grid-template-rows:60% 10% 30%;
    grid-template-rows:300px auto 30%; */
    grid-template-columns:95%;
    place-content:start center;
    position:relative;}
.showHintCSS{ 
    padding:0.5em;
    top:10px;}
.showNewCatCSS{ 
    padding:20px!important;
    top:-48px;}
.QandA-Board>ol>li>ul{ 
    /* margin-top:40px; */
    place-self:baseline;
    width:100%;}
/* .QandA-Board>ol>li>ul>li:first-child {
    margin-top: 10px;
} */
.QandA-Board>ol>li>ul>li,.insertedSpan{
    min-height:30px;
    /* max-height:120px; */
}
.insertedSpan{
    padding:0.5em 0.5em;}
.QandA-Board>ol>li>ul>li>span>ul{
    margin-top:10px;}
#quizCatName,#confirmButton{ 
    grid-area:col-1;}}
@media only screen and (min-width:912px){
.QandA-Board>ol>li>ul>li,.insertedSpan{
    /* max-height:140px; */
}
.insertedSpan {
    padding: 0.8em 0.5em;
}}
@media only screen and (min-width:1024px){
/* HEADER SECTION */
.QandA-header{
    grid-template-columns:20% 20% 55%;
    padding:10px 0;}
#settingsContent, #settingsReviewContent, #catSettingsContent, #poorPerPopup{ 
    gap:15px;
    width:50vw;}
#themeSettings ul, #fontSettings ul, #catThemeSettings ul{ 
    gap:10px;
    /* margin-top:10px; */
    padding-left:10px;}
.Hint-img>img{ 
    height:70px;}
#subCat{ 
    place-content:baseline;}
/* QandA-BOARD SECTION */
#QandA-section{
    grid-template-rows:60px 90px 30px auto 20%;}
.opacityBG{ 
    grid-template-rows:60px 90px 30px auto 20%;
    min-height:100vh;}
.opacityBGTwo{
    grid-template-rows:60px 80px auto 10%;}
.QandAbody-section{ 
    display:grid;
    place-content:center;
    place-self:center;
    padding:0!important;
    width:95%;}
.QandA-Board{
    width:calc(100vw - 6%);
    place-self:center;}
.QandA-Board>ol{ 
    margin-bottom:20px;}
.insertedDiv, .insertedDivInner{ 
    position:relative;
    min-height:250px;
    width:-webkit-fill-available;
  }
  .insertedDivInner{ 
    place-content:center;
    padding:30px 20px
  }
.QandA-Board>ol>li{ 
    grid-template-rows:250px 50px;
    grid-template-rows:288px auto;
    grid-template-rows:minmax(86px, 1fr) auto;
    grid-template-columns:55% 40%;
    place-content:space-between;
    position:relative;
    text-align:center;
    grid-template-areas:
        "col-1 col-2";}
.showHintCSS{ 
    padding:80px 25px!important;
    top:10px;}
.showNewCatCSS{ 
    padding:20px!important;
    top:-49px;}
.QandA-Board>ol>li>ul{ 
    grid-area:col-2;
    place-self:center;
    margin:0;
    width:100%;}
.QandA-Board>ol>li>ul>li:first-child {
    margin-top:0;
}
.QandA-Board>ol>li>ul>li,.insertedSpan{
    /* max-height:200px; */
}
.insertedSpan{
    grid-template-columns:10% 90%;
    padding:0.7em 0.5em;}
/* .insertedSpan:hover,.insertedSpan:active,.insertedSpan>strong:hover, .insertedSpan>strong:active{
    font-weight:bold!important;} */
.imgSizeWrong{ 
    left:-2px;}
.QandA-BoardLinks{ 
    grid-template-columns:46% 50%;}
#quizCatName, #confirmButton{ 
    margin-bottom:10px;
    grid-area:auto;}}
@media only screen and (min-width: 1024px) and (min-height: 1366px){
#settingsContent, #settingsReviewContent, #catSettingsContent, #poorPerPopup {
    width:60vw;
    padding:50px;
    font-size:3em!important;
}
.settingsContentInner, .catSettingsContentInner, #poorPerPopup {
    gap: 15px;
}
#themeSettings ul, #fontSettings ul, #catThemeSettings ul{
   height:250px; 
   font-size:28px!important;
}}
/* DESKTOP FONT SIZES CSS */
@media only screen and (min-width:658px){
#settingsContent, #settingsReviewContent, #catSettingsContent, #poorPerPopup{
    font-size:2.25em;}
    
/* FONT SIZES HEADER SECTION */
.quizCatLink, #nextPrevButton, #questionhint {
    font-size: 2em!important;
}
#questioncount{
    font-size:2.25em!important; /* 36px */
}
/* FONT SIZES QandA-BOARD SECTION */
.QandA-Board>ol>li{ 
    font-size:2.75em; /* 44px */
    line-height:44px;}
.showHintCSS{ 
    font-size:0.8637em; /* 38px */
    line-height:36px;}
.showNewCatCSS{ 
    font-size:2.0637em;
    line-height:20px;}
.QandA-Board>ol>li>ul>li{ 
    font-size:0.7273em; /* 32px */
    line-height:34px
}
.QandA-Board>ol>li>ul>li>ul,.QandA-Board>ol>li>ul>li>span>ul{ 
    font-size:0.75em; /* 24px */
    line-height:26px;}
#quizCatName, #confirmButton{ 
    font-size:2.25em!important; /* 36px */
}}
/* FONT SIZES QandA-BOARD SECTION */
@media only screen and (min-width:820px) and (max-width:1023px){
.quizCatLink, #nextPrevButton, #questionhint {
    font-size: 2.2em!important;
}
.QandA-Board>ol>li{ 
    font-size:3em;
    line-height:48px;}
.insertedDiv, .insertedDivInner{ 
    min-height:230px;}
.insertedDivInner{ 
    padding:35px 20px;}
.insertedSpan::before{
    font-size:20px;
    width:30px;
    height:30px;}
.imgSizeRight, .imgSizeWrong{
    width:35px;
    height:35px;}}
@media only screen and (min-width:912px) and (max-width:1023px){
.quizCatLink, #nextPrevButton, #questionhint {
    font-size: 2.4em!important;
}
.QandA-Board>ol>li{ 
    font-size:3.55em;
    line-height:50px;}
.insertedDiv, .insertedDivInner{ 
    min-height:240px;}
.insertedDivInner{ 
    padding:40px 20px;}
.insertedSpan::before{
    font-size:25px;
    width:35px;
    height:35px;}
.imgSizeRight, .imgSizeWrong{
    width:40px;
    height:40px;}}
@media only screen and (min-width:1024px){
#settingsContent, #settingsReviewContent, #catSettingsContent, #poorPerPopup{ 
    font-size:2em;}
#themeSettings ul, #fontSettings ul, #catThemeSettings ul{ 
    font-size:22px!important;}
#fontSettings li>span{
    font-size: 20px!important;
}
.quizCatLink, #nextPrevButton, #questionhint{
    font-size:1.563em!important; /* 25px */
}
#questioncount{
    font-size:1.563em!important; /* 25px */
}
/* FONT SIZES QandA-BOARD SECTION */
.QandA-Board>ol>li{ 
    font-size:2.5em;  /* 40px */
    line-height:44px;}
.showHintCSS{ 
    font-size:1.2249em;  /* 50px */
    line-height:52px;}
.showNewCatCSS{ 
    font-size:1.5249em;
    /* line-height:25px; */
}
.QandA-Board>ol>li>ul>li{ 
    font-size:0.55em;  /* 22px */
    line-height:24px;}
.QandA-Board>ol>li>ul>li>span>ul{ 
    font-size:0.546em;  /* 12px */
    line-height:16px;}}

@media only screen and (min-width: 1024px) and (min-height: 1366px){
.opacityBGTwo {
    grid-template-rows:8% 10% auto 10%;
}
.quizCatLink, #nextPrevButton, #questionhint {
    font-size: 2.2em!important;
}
#questioncount {
    font-size: 2.25em!important;
}
.Hint-img>img {
    height: 90px;
}
.QandAbody-section,.QandA-Board {
    display:block;
    width:100%;
    place-self:start;
}
.QandA-Board>ol{margin:0;}
.QandA-Board>ol>li {
    display: -ms-grid;
    display: grid;
    grid-template-columns: 95%;
    place-content: start center;
    grid-template-areas: none;
    border-radius: 3px!important;
    text-align: left;
    text-align: center;
    margin: 0;
}
.QandA-Board>ol>li>ul {
    grid-area: auto;
    place-self: center;
    width: 100%;
}
.insertedDiv, .insertedDivInner{ 
    min-height:300px;}
.insertedDivInner{ 
    padding:45px 30px;}
.QandA-Board>ol>li>ul>li:first-child {
    margin-top: 20px;
}
.insertedSpan {
    padding: 0.8em 0.5em;
}
/* FONT SIZES QandA-BOARD SECTION */
.QandA-Board>ol>li{ 
    font-size:3.55em;
    line-height:50px;}
.QandA-Board>ol>li>ul>li {
    font-size: 0.7273em;
    line-height: 34px;
}
.insertedSpan::before{
    font-size:25px;
    width:35px;
    height:35px;}
.imgSizeRight, .imgSizeWrong{
    width:40px;
    height:40px;}}
/* QUIZ RESULT CSS */
#quizResult-section{
    font-style:normal;
    grid-template-rows:0% 85% 15%;
    width:-webkit-fill-available;
    height:100vh;
    /* min-height:calc(100vh - 50px); */
    position:absolute;
    top:0;}
.Result-BoardHeader{
    border-radius:3px;
    overflow:hidden;
    display:flex;}
.Result-BoardHeader>div{ 
    font-style:normal;
    width:-webkit-fill-available;
    height:-webkit-fill-available;
    grid-template-columns:100%;
    display:grid;
    place-items:center;
    font-size:1.563em!important; /* 25px */
    text-transform:capitalize;
    display:none;}
.Result-BoardHeader>ul:last-child, .corAnswers-BoardHeader>ul:last-child{ 
    float:right!important;}
.Result-BoardHeader>ul:first-child, .corAnswers-BoardHeader>ul:first-child{ 
    float:left!important;}
.Result-BoardHeader>ul a{
    font-size:20px;}
.Result-Board{ 
    display:grid;
    place-content:center;
    border-radius:6px!important;
    box-sizing:border-box;
    height:auto;
    margin-top:10%;
    width:90%;
    padding:3px;
    place-self:center;
    text-align:center;}
.Result-Board-inner{ 
    padding:10px;
    border-radius:6px;
    /* height:95%; */
    width:95%;
    place-self:center;
    position:relative;}
.Result-Board h2{ 
    font-size:1.2em;
    margin:10px 0;
    letter-spacing:2px;
    white-space:nowrap;}
.Result-Board h4{ 
    display:block!important;
    font-size:0.9em;
    margin:8px 0;}
.Result-Board h5{ 
    font-size:0.83em;
    margin:10px 0;
    margin-right:5px;}
.Result-Board>div>span{ 
    font-size:larger;}
.Result-img, .performance{ 
    display:grid;
    place-items:start center;}
.Result-img>img{ 
    height:200px;
    display:grid;
    place-self:center;}
.performance ol{ 
    display:grid;
    font-size:xx-large;
    grid-template-columns:43% 24% 33%;
    list-style:none;
    margin:0;
    padding:15px 0;
    place-items:start;
    width:-webkit-fill-available;}
.performance li:first-child{ 
    place-self:start;}
.performance li{
    place-self:center;
    list-style-type:none;}
.performance li:last-child{ 
    place-self:end;}
/* poor performance popup css */
#poorPerPopup{
    display:none;
    top:200px;
    text-align:center;
    /* width:200px;
    padding:20px;
    border-radius:6px;
    position:absolute; */
}
#poorPerPopup p{ 
    margin:0;}
.popupBtn{
    display:flex!important;
    width:100%!important;
    padding:0!important;}
.popupBtn>button{
    height:auto;
    min-height:40px;}
.Result-btn{ 
    margin:0;
    padding:0 15px;
    place-self:start center;
    text-align:center;
    z-index:1;}
.Result-btn>button{ 
    font-size:1.563em; /* 25px */
    text-transform:uppercase;}
.Result-btn>button>a, .Result-btn>button>span{ 
    text-decoration:none!important;
    width:-webkit-fill-available;
    height:-webkit-fill-available;
    display:block;
    padding:0.2em;}
.btn-bg-color{ 
    border-radius:6px;
    margin:5px 5px 5px 0;
    width:63%;}
.btn-bg-outline{ 
    border-radius:6px;
    margin:5px 5px 5px 0;
    width:63%;}
.btn-bg-color>a{ 
    text-decoration:none!important;}
@media only screen and (max-width:540px){
#quizResult-section{
    height:calc(100vh - 50px);}
.Result-img>img{ 
    height:150px;}
.performance ol{ 
    grid-template-columns:45% 20% 30%;
    place-content:center;
    padding:15px 0;}
.Result-btn{ 
    /* display:grid; */
    text-align:center;
    width:90%;}
.Result-btn>button{
    min-height:35px;
    text-align:center;
    width:46%;}
.popupBtn>button{
    width:38%!important;
    height:auto!important;
    min-height:35px;}}
@media only screen and (max-width:285px){
.Result-img>img{ 
    height:120px;}
.performance ol{ 
    grid-template-columns:50% 20% 25%;}
.Result-btn>button{
    min-height:30px;
    width:47%;}
.popupBtn>button{
    min-height:30px;
    width:37%!important;}}
@media only screen and (min-width:541px){
.Result-img>img{ 
    height:250px;}
.performance{ 
    padding-left:10px;}
#poorPerPopup{ 
    top:290px;}
.Result-btn{
    width:90%;}
.Result-btn>button{ 
    width:49%;}}
@media only screen and (min-width:540px){
.Result-Board{
    margin:0;}
.Result-btn>button>a, .Result-btn>button>span{
    padding: 0.5em!important;
}}
@media only screen and (min-width:963px){
.Result-btn>button{ 
    width:32%;}
.popupBtn>button{
    width:32%!important;}}
@media only screen and (min-width:1024px){
.Result-Board{
    place-content:inherit;
    width:95%;}
.Result-Board-inner{ 
    display:grid;
    grid-template-columns:50% 50%;
    place-self:center;}
.Result-btn{
    display:grid;
    grid-template-columns:33% 33% 33%;
    place-self:start center;
    gap:5px;
    width:95%;}
#poorPerPopup{
    top:150px;}
.popupBtn>button, .Result-btn>button{ 
    width:100%!important;}}
@media only screen and (min-width: 1024px) and (min-height: 1366px){
.Result-Board {
    margin-top: 0!important;}
.Result-Board-inner{
    display:block;
    place-self:normal;}
.Result-img{
    border-bottom: 1px solid var(--btn-bg-color-light);
    border-right:none!important;
}
.Result-btn>button{
    font-size: 1.863em!important;
}
.Result-btn>button>a, .Result-btn>button>span{
    padding: 0.5em!important;}
#poorPerPopup{
    top:300px;}}
/* MOBILE VIEW FONT SIZES CSS */
.popupBtn>button{
    font-size:1.363em!important;}
@media only screen and (max-width:540px){
.performance ol{
    font-size:28px;}
.Result-btn>button{
    font-size:1.125em; /* 18px */
}
.popupBtn>button{
    font-size:0.6em!important;}}
@media only screen and (max-width:394px){ 
.Result-btn>button{ 
    font-size:0.88em; /* 14px */
}
.popupBtn>button{
    font-size:0.48em!important;}}
@media only screen and (max-width:285px){
.Result-Board h2{ 
    font-size:1.3em;}
.performance ol{ 
    font-size:23px;}
.Result-btn>button{
    font-size:0.7em; /* 13.5px */
}
.popupBtn>button{
    font-size:0.48em!important;}}
@media only screen and (min-width:541px){
.popupBtn>button{ 
    font-size:0.653em!important;}}
@media only screen and (min-width:658px) and (max-width:1023px){
.Result-Board h2{ 
    font-size:2.8em;}
.Result-Board h4{ 
    font-size:1.8em;}
.Result-Board h5{ 
    font-size:1.23em;}
.Result-img>img{ 
    height:280px;}
#questionsIndex{
    font-size:1.2em;}}
@media only screen and (min-width:820px) and (max-width:1023px){
.Result-Board h5{ 
    font-size:1.7em;}
#questionsIndex{ 
    font-size:1.5em;}
.performance ol{
    font-size:xxx-large;}}
@media only screen and (min-width:912px) and (max-width:1023px){
.Result-Board h2{ 
    font-size:3.5em;}
.Result-img>img{ 
    height:300px;}
#questionsIndex{ 
    font-size:1.9em;}}
@media only screen and (min-width: 1024px) and (min-height: 1366px){
.Result-Board h2{ 
    font-size:3.5em!important;}
.Result-Board h4 {
    font-size: 2.2em!important;}
.Result-Board h5 {
    font-size:2em!important;}
.Result-img>img{ 
    height:300px!important;}
#questionsIndex{ 
    font-size:2.2em!important;}
.performance ol {
    font-size: xxx-large!important;}}
/* DESKTOP VIEW FONT SIZES CSS */
@media only screen and (min-width:1024px){
.Result-Board h2{ 
    font-size:2.5em;}
#questionsIndex{ 
    font-size:1.4em;}
.popupBtn>button{ 
    font-size:0.663em!important;}}
@media only screen and (min-width:1066px){
.Result-Board h2{ 
    font-size:3em;}
.Result-Board h4{ 
    font-size:1.5em;}
.Result-Board h5{ 
    font-size:1.23em;}}
/* CORRECTED ANSWERS CSS */
#CorrectedAnswers-section{ 
    font-style:normal;
    grid-template-rows:70px 70px auto 8%;
    grid-template-rows: 60px 80px auto 20px;
    height:auto;
    min-height:calc(100vh - 90px);
    position:relative;
}
.corAnswers-BoardHeader{
    border-radius:3px;
    overflow:hidden;
    display:flex;
    position:relative;}
.corAnswers-BoardHeader>div{ 
    width:-webkit-fill-available;
    height:-webkit-fill-available;
    grid-template-columns:100%;
    display:grid;
    place-items:center;
    font-size:2.5em;
    text-transform:capitalize;}
.corAnswers-BoardHeader #settings{
    position: absolute;
    right: 2px;
    place-self: center;
    width: 5%;}
.corAnswers-BoardHeader #settings>img{
    width:100%;
}
.corAnswers-Board-Header{
    display:grid;
    grid-template-rows:100%;
    place-self:center;
    height:-webkit-fill-available;}
.corAnswers-Board-Header>h1{
    margin:0;
    word-break:break-word;
    width:-webkit-fill-available;
    height:-webkit-fill-available;
    display:flex;
    align-items:center;}
.corAnswers-Board{ 
    display:grid;
    place-self:start center;}
.corAnswers-Board ol{ 
    list-style:none;
    margin:0;
    padding:0;}
.corAnswers-Board p{ 
    display:none!important;}
.corAnswers-Board>ol>details{ 
    font-style:normal;
    margin:0!important;
    padding:1em 0;
    place-content:start;
    place-items:start;
    text-align:left;
    word-break:break-word;
}
details > summary:first-of-type{ 
    display:list-item;}
.corAnswers-Board>ol>details>summary>div{ 
    display:grid;
    grid-template-columns:90%;
    place-content:center;
    margin-top:-24px;}
.corAnswers-Board>ol>details>summary::marker{ 
    height:100%;}
.corAnswers-Board>ol>details>li>ul{
    padding-inline-start:20px;}
.corAnswers-Board>ol>details>li>ul>li{
    list-style-type:circle!important;
    padding:10px 0 0 0;}
.corAnswers-Board>ol>details>li>ul>li>ul,.corAnswers-Board>ol>details>li>ul>li>span>ul{ 
    list-style-type:none;
    margin-top:10px;
    padding:0;}
.corAnswers-btn{
    display:flex;
    place-self:start center;
    height:fit-content;
    padding:1em 0;}
.corAnswers-btn>button{
    border-radius:6px;
    margin:5px 5px 5px 0;
    font-size:2em!important; /* 25px */
    text-transform:uppercase;}
.corAnswers-btn>button>a{ 
    text-decoration:none!important;
    width:-webkit-fill-available;
    height:-webkit-fill-available;
    display:block;
    padding:0.5em;}
.corAnswers-btn>button>a:hover{ 
    text-decoration:none!important;}
.corAnswers-Board-Header, .corAnswers-Board, .corAnswers-btn{ 
    width:97%;}
.corAnswers-Board>ol>details>li>ul>li>ul>li,.corAnswers-Board>ol>details>li>ul>li>span>ul>li{ 
    margin-top:10px;
    list-style-type:decimal;}
.corAnswers-Board>ol>details>li>ul>li>ul>li>ul>li,.corAnswers-Board>ol>details>li>ul>li>span>ul>li>ul>li{ 
    list-style:lower-alpha;}
@media only screen and (max-width:767px){
.corAnswers-BoardHeader #settings{
    width:9%;}}
@media only screen and (max-width:541px){
.corAnswers-BoardHeader #settings{
    width:11%;}}
@media only screen and (max-width:490px){
.corAnswers-BoardHeader #settings{
    width:13%;}}
@media only screen and (max-width:300px){
#CorrectedAnswers-section{ 
    grid-template-rows:40px 50px auto 10%}
.corAnswers-BoardHeader>div, .corAnswers-Board-Header>h1{ 
    font-size:0.875em;}
.corAnswers-Board>ol>details>summary>div{ 
    grid-template-columns:85%;}}
@media only screen and (min-width:490px){
.corAnswers-Board>ol>details>li>ul{
    padding-inline-start:25px;}}
@media only screen and (min-width:541px){
.corAnswers-BoardHeader #settings{
    width:11%;}
.corAnswers-Board>ol>details>summary>div{ 
    margin-top:-35px;}
.corAnswers-Board>ol>details>li>ul{
    padding-inline-start:40px;}
.corAnswers-Board>ol>details>li>ul>li{
    padding:15px 0 0 0;}
.corAnswers-btn>button{
    width:50%;}}
@media only screen and (min-width:768px){
.corAnswers-BoardHeader #settings{
    width:7%;}
.corAnswers-Board-Header, .corAnswers-Board, .corAnswers-btn{ 
    width:99%;}}
@media only screen and (min-width:821px){
.corAnswers-Board>ol>details>li>ul{ 
    padding-inline-start:45px;}}
@media only screen and (min-width:912px){ 
.corAnswers-BoardHeader #settings{
    width:6%;}
.corAnswers-Board>ol>details>summary>div{ 
    margin-top:-40px;}}
@media only screen and (min-width:1024px){
.corAnswers-BoardHeader #settings{
    width:5%;}
.corAnswers-Board>ol>details>summary>div{ 
    margin-top:-43px;}
.corAnswers-Board>ol>details>li>ul{ 
    padding-inline-start:53px;}}
@media only screen and (min-width: 1024px) and (min-height: 1366px){
#CorrectedAnswers-section {
    grid-template-rows: 80px 100px auto 20px;
}
.corAnswers-BoardHeader #settings {
    width: 6%;
}
.corAnswers-BoardHeader>div, .corAnswers-Board-Header>h1 {
    font-size:2.7em;
}
.corAnswers-Board>ol>details {
    font-size:2.675em;
    line-height:44px;
}
.corAnswers-Board>ol>details>li>ul>li {
    font-size:1.23em;
    line-height:38px;
}
.corAnswers-Board>ol>details>li>ul>li>ul, .corAnswers-Board>ol>details>li>ul>li>span>ul {
    font-size:0.662em;
    line-height:40px;
}
.corAnswers-btn>button{
    font-size: 2.2em!important;}}
@media only screen and (min-width:1280px){
.corAnswers-Board>ol>details>li>ul{ 
    padding-inline-start:67px;}}
/* MOBILE VIEW FONT SIZES CSS */
@media only screen and (max-width:767px){
.corAnswers-BoardHeader>div, .corAnswers-Board-Header>h1{
    font-size:1.5em;}
.corAnswers-Board>ol>details{ 
    font-size:2em;
    line-height:30px;}
.corAnswers-Board>ol>details>li>ul>li{ 
    font-size:1em;
    line-height:30px;}
.corAnswers-Board>ol>details>li>ul>li>ul,.corAnswers-Board>ol>details>li>ul>li>span>ul{ 
    font-size:0.974em; /* 22px */
    line-height:30px;}}
@media only screen and (max-width:540px){
.corAnswers-BoardHeader>div, .corAnswers-Board-Header>h1{
    font-size:1.175em; /* 20px */
}
.corAnswers-Board>ol>details{ 
    font-size:1.575em; /* 22.5px */
    line-height:26px;
    gap:10px;}
.corAnswers-Board>ol>details>li>ul>li{ 
    font-size:0.88em;/* 22p.3x */
    line-height:26px;}
.corAnswers-Board>ol>details>li>ul>li>ul,.corAnswers-Board>ol>details>li>ul>li>span>ul{ 
    font-size:0.7888em; /* 14.5px */
    line-height:26px;}
.corAnswers-btn>button{
    font-size:1.25em!important; /* 20px */
    width:100%;}}
@media only screen and (max-width:300px){
.corAnswers-BoardHeader>div, .corAnswers-Board-Header>h1{ 
    font-size:0.885em;}
.corAnswers-btn>button{
    font-size:1em!important; 
}
.corAnswers-Board>ol>details {
    font-size: 1.475em;}}
/* DESKTOP VIEW FONT SIZES CSS */
@media only screen and (min-width:768px){
.corAnswers-BoardHeader>div, .corAnswers-Board-Header>h1{
    font-size:2em;}
.corAnswers-Board>ol>details{ 
    font-size:2.5em;
    line-height:36px;}
.corAnswers-Board>ol>details>li>ul>li{ 
    font-size:0.715em;
    line-height:28px;}
.corAnswers-Board>ol>details>li>ul>li>ul,.corAnswers-Board>ol>details>li>ul>li>span>ul{ 
    font-size:0.574em; /* 22px */
    line-height:28px;}}
@media only screen and (min-width:820px){
.corAnswers-Board-Header>h1{
    font-size:2em;
}
.corAnswers-Board>ol>details{ 
    font-size:2.5em;
    line-height:36px;}
.corAnswers-Board>ol>details>li>ul>li{ 
    font-size:0.715em;
    line-height:28px;}}
@media only screen and (min-width:912px){
.corAnswers-Board>ol>details>li>ul>li{ 
    font-size:0.8em;
    line-height:30px;}}
@media only screen and (min-width:1024px){
    .corAnswers-BoardHeader>div, .corAnswers-Board-Header>h1{
    font-size:2.25em; /* 36px */
}
.corAnswers-Board>ol>details{ 
    font-size:2.375em; /* 38px */
    line-height:42px;}
.corAnswers-Board>ol>details>li>ul>li{ 
    font-size:0.83em; /* 38px */
    line-height:34px;}
.corAnswers-Board>ol>details>li>ul>li>ul,.corAnswers-Board>ol>details>li>ul>li>span>ul{ 
    font-size:0.532em; /* 26px */
    line-height:32px;}}
@media only screen and (min-width:1180px){
.corAnswers-Board-Header>h1{
    font-size:2.45em; /* 36px */
}
.corAnswers-Board>ol>details{ 
    font-size:2.5em; /* 38px */
    line-height:42px;}
.corAnswers-Board>ol>details>li>ul>li{ 
    font-size:0.9em; /* 38px */
    line-height:38px;}
.corAnswers-Board>ol>details>li>ul>li>ul,.corAnswers-Board>ol>details>li>ul>li>span>ul{ 
    font-size:0.632em; /* 26px */
    line-height:36px;}}