@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');




:root{
    --pal1:#AA9585;
    --pal1d:#6b5d529c;
    --pal2:#61554F;
    --pal2d:#987c6f;
    --pal3:#e0e0d2;
}

*{
    margin:0px;
    padding:0px;
    font-family: 'Amiri',"Poppins", sans-serif;
    user-select:none;
    /* font-family: 'Poppins'; */
}

::-webkit-scrollbar{
    width:15px;
    background:var(--pal1);
}

::-webkit-scrollbar-thumb{
    background:var(--pal3);
    border-radius:10px;
    border:4px var(--pal1) solid ;
}

body{
    background-image: url(../Images/bg.jpg);
    background-repeat: repeat;
    display:flex;
    flex-flow: column wrap;
    margin:0px;
    padding:0px;
    justify-content:center;
    align-items:center;
}

#menu{
    display:flex;
    background-color:var(--pal1);
    border: 4px solid var(--pal2);
    position:relative;
    padding:5px;
    margin:5px;
    width:70%;
    min-width:1007px;
    height:80px;
    border-radius:20px;
    /* transition: transform 1s ease-in-out */
}


/* #menu:hover{
    transform: scale(0.7)
}
 */
#menuX{
    /* background-color:red; */
    display:none;
    position:absolute;
    z-index:7;
    inset:auto 70px -70px auto;
    font-size:3rem;
    cursor:pointer;
    color:var(--pal3);
    background-color:#757070bd;
    border-radius:20px;
    height:50px;
    padding:5px;
}

#menuX i::before{
    display:flex;
    justify-content:center;
    align-items:center;
}

.fieldOuter{
    background-color:var(--pal3);
    display:flex;
    flex-direction: row-reverse;
    border-radius: 20px;
    width:150px;
    height:40px;
    margin:2px 3px;
    position:absolute;
    align-items:center;
    gap:10px;
    justify-content:space-between;
    text-wrap:nowrap;
    user-select:none;
}

.fieldInner{
    display:flex;
    background-color:white;
    position:relative;
    padding:1px;
    border-radius:20px 0px 0px 20px;
    gap:5px;
    text-wrap:nowrap;
    width:85px;
}

.fieldInner p,.fieldInner input{
    font-size:1.25rem;
    margin:0px 2px;
}

#selSurah{
    position:absolute;
    inset: 8px 2px auto auto;
}

#selAyah{
    position:absolute;
    inset: 8px 2px auto auto;
}

.fieldP{
    font-size:1.3rem;
    margin:5px;
}

#surahSearch{
    inset: 1px 20px auto auto;
}

#ayahSearch{
    inset: 45px 20px auto auto;
}

#pageSearch{
    inset: 2px 175px auto auto;
    /* height:40px; */
}

#juzSearch{
    inset: 45px 175px auto auto;
}

#pageNumber,#juzNumber{
    border:none;
    margin:0px;
    width:50px;
    height:35px;
    font-size:1.1rem;
}



#textSearch{
    inset: 2px auto auto 40%;
    text-align:right;
    width:200px;
    padding:0px 10px;
}

#liveSearch{
    text-align:right;
    width:70%;
    border-radius:20px;
    border:none;
    height:90%;
    padding:0px 2px;
    direction:rtl;
    /* font-family: "Times New Roman";*/
    font-size:1em;
}

#recite{
    inset: 47% auto auto 8% !important;
    width:300px !important;
    position:relative;
    padding: 0px 10px;
    border: 3px solid var(--pal2)
    /* padding:2px; */
}

#tafseer{
    inset:auto auto 0% 45%;
    width:max-content;
    padding:0px 5px;
    background-color: var(--pal1);
    border: 2px solid var(--pal3);
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}



#ayahQuiz,#stats{
    /* inset: auto auto 10% 2px; */
    width: 17px;
    height: max-content;
    padding:2px;
    transition: all 1s ease-in-out ;
    overflow:hidden;
    text-align:right;
    cursor:pointer;
}

#stats{
    width:75px;
    border:2px solid var(--pal3);
}

#ayahQuiz{
    width:110px;
    font-size:1.2rem;
    inset: 0% auto auto 5%;
    border:2px solid var(--pal3);
}

#ayahQuiz span, #stats span{
    text-align:right;
    text-wrap:nowrap;
}

#stats{
    inset: 0px auto auto 25%;
    font-size:1.2rem;
    width:100px
}

/* #stats:hover{
    width:75px;
}
*/

/* #ayahQuiz:hover{
    width:90px !important;
}  */

.menus{
    display: none;
    position: absolute;
    width:890px;
    height:500px;
    background-color: var(--pal3);
    border: 5px solid var(--pal2);
    border-radius:10px;
    inset: 100px 130px auto auto;
    z-index: 6;
    padding:20px;
    flex-direction:row;
    align-items:flex-start;
    align-content: baseline;
    justify-content:flex-start;
    direction:rtl;
    gap:10px;
    flex-wrap:wrap;
    overflow-y:scroll;
    animation: menuOpen 0.7s  backwards ease-in-out;
}

.active{
    display:flex !important;
}



@keyframes menuOpen{
    from{
        height: 0px
    }

    to{
        height:500px
    }
}

.menuBtn{
    width:60px;
    height:55px;
    border-radius: 10px;
    background-color:var(--pal1);
    border: 2px solid var(--pal2);
    /* padding:0px 3px; */
    overflow:hidden;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

.menuBtn:hover{
    filter:brightness(0.8) contrast(1);
}

.menuBtn > p{
    text-align:center;
    height:20px;
    font-size:1.2rem;
}

#s112 p,#s46 p{
    font-size:1.1rem;
}

.surahOrder,.ayahOrder{
    font-size:1.3rem;
    background-color:var(--pal1d);
    width:100%;
    right:0px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#d0b6a3
    /* font-family: "Poppins", sans-serif */
    /* background-color:red; */
}

.ayahOrder{
    height:100%;
}

#tafseerMenu{
    left: -300px;
    flex-flow:column nowrap;
}


#LSMenu{
    /* z-index:3; */
    left:50%;
    transform: translateX(-50%);
    flex-flow:column nowrap;
}



.LSBtn,.tafseerBtn,.ayahQBtn,#statsCon,#weekStats{
    background-color: var(--pal1);
    display:flex;
    border: 4px solid var(--pal2);
    border-radius:30px;
    padding: 2px 5px;
    gap:5px;
    font-size:1.2rem;
    cursor:pointer;
    margin:5px 3px;
    transition: all 0.3s ease-in-out;
    font-size:1.9rem;
}

#LSLength{
    width: 80%;
    align-self:center;
    text-align:center;
    font-size:1.9rem;
    text-decoration:underline
    
}

.LSBtn:hover, #ayahQuizAns .ayahQBtn:hover{
    filter:brightness(0.8) contrast(1);
}


.LSresult,.ayahInfo,.tafseerInfo,#ayahQuizRes,#statsCon div{
    background-color:white;
    border-radius:10px;
    padding:6px 5px;
    margin:2px;
    text-decoration:underline
}

.LSresult{
    text-wrap:wrap;
    text-decoration:none;
}

.ayahInfo{
    background-color:var(--pal2d);
    align-self:center;
}

audio{
    width: 290px;
    height: 40px;
    position:absolute;
    left:0px;
}

audio::-webkit-media-controls-panel {
    background-color: var(--pal3);
    width:90px;
    
    border-radius: 10px;
}

audio::-webkit-media-controls-play-button {
    background-color: var(--pal2d);
    border-radius: 50%;
}

#ayahPage{
    width:45px;
    height:25px;
    /* align-self:flex-start; */
    /* justify-self:self-start; */
    display:block;
    z-index:2;
    inset: 6px auto auto -78px;
    position:absolute;
    font-size:1.2rem;
    text-align:center;
    border-radius:10px;
    border:none;
    /* background-color:var(--pal1d);*/
    border: 3px solid var(--pal1) 
}


#ayahPageP{
    width:80px !important;
    max-width:none;
    flex: 0 0 190px;
    white-space:nowrap;
    padding:0px 4px;
    inset:-4px auto auto -89px;
    position:absolute;
    font-size:1.2rem;
    border: 3px solid var(--pal2)
    /* z-index:3; */
    /* background-color:r */
}

#LSX{
    /* background-color:red; */
    /* width:100px; */
    height:100px;
    font-size:2rem;
    position:absolute;
    top:-16px;
    cursor:pointer
}

#tafseerMenu{
    height:600px;
    /* position:relative; */
    width:400px;
    flex-flow: column nowrap;
    animation: menuOpenTM 0.9s backwards ease-in-out;
    z-index:2;
}

@keyframes menuOpenTM{
    from{
        height:0px;
    }
    to{
        heigth:600px;
    }
}

.tafseerInfo{
    font-size:1.6rem !important;
}

#ayahQuizMenu{
    width:500px !important;
    height:450px;
    justify-content:center;
    align-content:center;
    flex-flow:row wrap;
    overflow-y:scroll;
    animation: menuOpenAQ 0.9s backwards ease-in-out;
    left: 50%; 
    top:150px;
    transform: translateX(-50%);
}

#AQBlanket{
    display:none;
    width: 80%;
    height:75px;
    background-color: var(--pal2);
    position:absolute;
    left: 50px;
    border-radius:20px;
    transition: 0.7s all ease-in-out;
    z-index:6
}
@keyframes menuOpenAQ{
    from{
        height:0px;
    }
    to{
        height:450px;
    }
}

#ayahQCon{
    display:flex;
    justify-content:center;
    flex: 0 0 100%
}

#AQScoreCon{
    flex: 0 0 80%;
    display:flex;
    justify-content:space-around;
    font-size:1.7rem;
    background-color: var(--pal1);
    border-radius:20px;
    border: 5px solid var(--pal2);
}


#ayahQuizRes{
    font-size:2.0rem;
    text-wrap:wrap;
    text-decoration:none;
    margin:4px;
    padding-top:17px;
}
/* There's a prbolem in [1] & [5] & [25] & ([29] is dup) */

#ayahQuizInfo{
    font-size:1.8rem;
    text-decoration:underline;
    flex: 0 0 100%;
    text-align:center;
}

#ayahQuizAns{
    display:flex;
    gap:10px;
    flex:0 0 100%;
    justify-content:center;
}

#statsMenu{
    font-size:1.2rem;
    width: 730px;
    height:540px;
    left:50%;
    top:150px;
    transform: translateX(-50%);
    animation: menuOpenSM 0.9s backwards ease-in-out;
}

@keyframes menuOpenSM{
    from{
        height:0px
    }
    to{
        height:540px
    }
}

#Date{
    width: 720px;
    text-align:center;
    font-size:1.9rem;
    background-color:var(--pal1);
    border-radius:20px;
    border: 4px solid var(--pal2);
}

#noToken{
    position: absolute;
    inset: 22% 20% auto auto;
    width: 420px;
    min-height: 50%;
    max-height:70%;
    /* background-image: radial-gradient(circle,var(--pal3) 40%,transparent); */
    background-color: var(--pal1);
    text-align:center;
    border: 3px solid var(--pal2);
    border-radius:10px;
    z-index:2;
}

#statsCon:hover, #weekStats:hover{
    z-index:3;
}

#noToken p{
    font-size:1.45rem;
    text-decoration:underline;
    background-color:var(--pal3);
    font-weight:600;
    border-radius:10px;
    padding:2px;
    margin:2px;
    
}

#LogInBtn{
    background-color: var(--pal3);
    font-size:1.5rem;
    border-radius:15px;
    padding:5px;
    border: 4px solid var(--pal2);
    cursor:pointer;
    transition: 0.5s all ease-in-out;
}

#LogInBtn:hover{
    filter: brightness(0.8);
}

#loginForm{
    direction:ltr;
}

#loginForm input{
    border-radius:20px;
    width:240px;
    height:40px;
    font-size:1.3rem;
    margin:6px;
    padding:0px 5px;
    border: solid 4px var(--pal2);
}

#loginForm input::placeholder{
    text-align:right;
}


#emailCon,#nameCon{
    text-align:left;
    padding-left: 35px;
}

#statsCon{
    width:fit-content;
    flex-flow: column wrap;
    transition: z-index 2s ease-in-out;
}

#statsCon div{
    text-decoration:none;
}


#weekStats{
    background-color:var(--pal1);
    display:block;
}

#weekStats thead td{
    text-decoration:underline;
    background-color: var(--pal3) ;
     border-bottom: 6px solid var(--pal2);
}

#weekStats td{
    background-color: white;
    border-radius:5px;
    padding:1px 1px;
    margin:2px;
    text-align:center;

}




/* Nav Bar */

/* -------------------------- */

/* Book View */


#bookCon{
    width:435px;
    height:min-content;
    display:flex;
    /* background-image:url("../../Quran\ Pages/6.png"); */
    /* background-image:url("../Images/6.png"); */
    /* padding:10px; */
    border: white 3px solid;
    /* background-color:red; */
    /* align-items:center; */
    justify-content:center;
}

#getTr{
    border-radius: 50%;
    width:100px;
    height:100px;
    margin:15px;
    background-color:blue;
    position:absolute;
    top:100px;
}

#pageRtCon,#pageLfCon{
    position:relative;
}

#pageLf,#pageRt{
    margin:0px 5px;  
    user-select: none;  
}

#nextPageBtn{
    position:absolute;
    cursor:pointer;
    top:336px;
    left:-25px;
}

#prevPageBtn{
    position:absolute;
    cursor:pointer;
    top:336px;
    right:-25px;
}   

#marker{
    width:50px;
    background: url(../Images/marker.png);
    width:35px;
    height:70px;
    top:-5px;
    left:-15px;
    position:absolute;
    z-index:5;
    /* background-color:red; */
    /*  */
}