@font-face {
    font-family: 'AdobeNaskh-Medium';
    src: url(../fonts/AdobeNaskh-Medium.otf) format("opentype");
}

* {
    margin: 0px auto;
    font-family: 'AdobeNaskh-Medium';
    font-variant-ligatures: none;
    direction: rtl
}

body {
    width: 870px;
    height: 710px;
}

.container {
    position: relative
}

#actContainer {
    width: 870px;
    height: 650px;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    background-color: rgba(2, 43, 42, 0.5);
    visibility: hidden;
}

#background {
    width: 60%;
    display: block;
    margin-top: 30px;
    position: absolute;
    left: 0;
    right: 0
}



#seekQ {
    width: 869.5px;
    height: 65px;
    background-color: lightgreen;
    position: absolute;
    left: 0;
    right: 0;
    direction: ltr;
    top: 650px;
}

#seekbar {
    width: 868px;
    direction: ltr;
    position: absolute;
    left: 0;
    right: 0;
    top: 12px;
    height: 40px;

}

progress[value]::-webkit-progress-bar {
    background-color: #eee;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
    background-color: dodgerblue;

    border-radius: 2px;

}

#transper {
    width: 869.5px;
    height: 65px;
    background-color: rgba(250, 250, 250, 0.0);
    position: absolute;
    left: 0;
    right: 0;
    direction: ltr;
    top: 650px;
    z-index: 3
}



#questionHead1 {
    color: #000;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 55.5%;
    font-weight: normal;
    font-size: 28px;
    z-index: 5
}


#imgScore {
    width: 13%;
    position: absolute;
    top: 60px;
    right: 30px
}

#totalScore,
#score {
    position: absolute;
    right: 8.5%;
    font-size: 36px;
    top: 18%
}

#score {
    top: 11%;
    right: 9%
}

#q1,
#q2,
#q3,
#q4,
#q5,
#q6,
#q7,
#q8,
#q9,
#q10 {
    position: absolute;
    z-index: 2;
    width: 3%;
    top: -15px
}


#forNabil {
    visibility: hidden;
}

#forHamad {
    visibility: hidden;
}

#startBG {
    position: absolute;
    left: 0;
    right: 0;
    width: 60%;
    top: 18%;
    z-index: 4
}

#startBtn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15%;
    z-index: 5;
    width: 25%;
    cursor: pointer;
}

#langBtnStrt {
    position: absolute;
    right: 42%;
    left: 0;
    width: 8%;
    cursor: pointer;
    top: 16%;
    z-index: 5
}

video#myVid {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    width: 870px;
    height: 650px;
}

#playVideo {
    position: absolute;
    width: 870px;
    height: 715px;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 3;
    left: 0;
    right: 0;
    visibility: visible
}

#recordPart {
    position: absolute;
    width: 870px;
    height: 715px;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 6;
    left: 0;
    right: 0;
    visibility: hidden
}

#characterBG {
    position: absolute;
    left: 0;
    right: 0;
    width: 60%;
    top: 18%;
}

#langBtn {
    position: absolute;
    top: 15%;
    width: 8%;
    left: 220px;
    cursor: pointer;
    z-index: 6
}


#langBtn2 {
    position: absolute;
    top: 15%;
    width: 8%;
    left: 220px;
    cursor: pointer;
    z-index: 6;
    display: none;
}
#nabilID {
    z-index: 6;
    position: absolute;
    left: 20%;
    right: 0;
    width: 12.5%;
    top: 40%;
    cursor: pointer;
}

#hamadID {
    z-index: 10;
    position: absolute;
    left: 0;
    right: 20%;
    width: 13%;
    top: 40%;
    cursor: pointer
}

#questionHead {
    color: #000;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: 27%;
    font-weight: normal;
    font-size: 32px;
    z-index: 6
}

#playVid {
    position: absolute;
    left: 0;
    right: 0;
    width: 12%;
    top: 40%;
    cursor: pointer;
}

#retakeQuiz {
    position: absolute;
    width: 870px;
    height: 715px;
    background-color: dimgray;
    z-index: 3;
    left: 0;
    right: 0;
    visibility: hidden
}

#replayActivity {
    width: 15%;
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    cursor: pointer
}

#recordIcons {
    position: absolute;
    width: 870px;
    height: 715px;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 6;
    left: 0;
    right: 0;
    visibility: hidden
}


#bgRec {
    position: absolute;
    left: 0;
    right: 0;
    width: 60%;
    top: 18%;
}

#startAndStopRecordBtn {
    position: absolute;
    left: 30%;
    right: 0;
    width: 12%;
    top: 33%;
    cursor: pointer
}

#playRecorededSound {
    position: absolute;
    right: 0;
    width: 12%;
    top: 33%;
    left: 0%;
    cursor: pointer
}
#playRecorededSound.animated {
    width: 10%;
    top: 35%;
    opacity: 0.6;
}
#gotoNextQuestion {
    position: absolute;
    right: 33%;
    width: 12%;
    top: 33%;
    left: 0;
    cursor: pointer
}