body {
    margin: 0;
    padding: 0;
    font-family: 'Vazir', Arial, sans-serif;
    direction: rtl;
    display: block;
    text-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -webkit-align-self: center;
    -moz-align-self: center;
    -ms-align-self: center;
    -o-align-self: center;
    align-self: center;
    font-family: 'Vazir', Arial, sans-serif;
    margin: 0;
    padding: 0 0 5% 0;
    font-family: 'Vazir', Arial, sans-serif;
    direction: rtl;
    display: block;

}


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

.header {
    background-color: rgb(41, 71, 45);
    width: 100%;
    height: 60px;
    padding: 10px 0;
    display: flex;
    align-items: center;
}

.header2 {
    background-color: #3C5D50;
    min-width: 360px;
    max-width: 360px;
    height: 50px;
    padding: 10px 0 10px 10px;
    display: flex;
    align-items: center;
}




.logo {
    max-width: 50px;
    max-height: 50px;
    margin-right: 20px;
}

.header-topic {
    font-size: 12px;
    color: rgb(195, 178, 0);
    margin: 0;
}

/*-------------------formStatus---------------------*/

.form-status{
    width:310px;
}

.marginTop{
    margin-top: 4%;
}

.marginTop2{
    margin-top: 4.7%;

}
.marginBottom{
    margin-bottom: 7%;
}

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

.container {
    transform: translate(0,-15px);
    direction: rtl;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 390px;
    min-height:1030px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.container-home{
    transform: translate(0,15px);
    direction: rtl;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 390px;
    height: 1030px;
    margin: 0 auto;
    box-sizing: border-box;
}

.header-topic-home{
    font-size: 12px;
    color: rgb(195, 178, 0);
    margin: 0;
}

.content-home {  
    margin: 20px;
    direction: rtl;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1% auto;
    border: 4px solid rgb(1, 69, 10);
    border-radius: 20px;
    height: 848px;  
    max-width: 350px;  
}

.introduction-text {
    margin-bottom: 20px;   
}

.content1-img {
    position: absolute;
    max-width: 420px;
    min-width: 420px;
    padding: 10px;
    border-radius: 5px;
    transform: translate(-22px,110px);  
}

.introduction-btn{
    width:150px;
    height:30px;
    font-size: 15px;
    border-radius: 20px;
    background-color: #3C5D50;
    border: none;
    z-index: 999;
    cursor: pointer;
    color:white;
}

.introduction-btn-span{
    color: #2a6d58;

}




.content1 {
    direction: rtl;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1% auto;
    border: 4px solid rgb(1, 69, 10);
    border-radius: 20px;
    height: 843px; 

}

.content2{
    direction: rtl;
    display: flex;
    margin-top: 3%;
    flex-direction: column;
    border-right: 1px;
    width: 300px;
}

.introduction-text-topic{
    text-align: center;
    transform: translate(0,-10px);

}

.introduction-text {
    flex: 1;
    font-size: 14px;
    padding: 20px;
    transform: translate(0,-60px);
    text-align: right;
}

.button-wrapper {
    position: absolute;
    padding: 1px;
    border: 3px solid #3C5D50;
    border-radius: 25px;
    transform: translate(76px,500px);
    z-index: 999;
}


.main-content {
    width: 100%;
    max-width: 382px;
    margin: 0 auto;
}




/*----------------------------------------*/
.quiz-form1{
    margin-top: 25px;
}

.quiz-form2{
    margin-top: 25px;
}

#quiz-form{
    margin-right: -15px;
}


#quiz-form-div {
    direction: rtl;
    font-family: Arial, sans-serif;
    text-align: right;
    width: 300px;
    transform: translateX(-15px);
}

#quiz-form1-div {
    direction: rtl;
    font-family: Arial, sans-serif;
    transform: translate(29px,-35px);
}



#quiz-form2-div {
    direction: rtl;
    font-family: Arial, sans-serif;
    transform: translate(80px,0px);
    margin-top: 15px;
}

.input-page1{
    width: 200px;
    height: 15px;
    padding: 5px;
    border: 1px solid black;
    border-radius: 12px;
}

.input-page2{
    width: 200px;
    height: 15px;
    padding: 5px;
    border: 1px solid black;
    border-radius: 12px;
    transform: translate(-55px,0);
}

.select-options{
    width: 200px;
    height: 30px;
    padding: 5px;
    border: 1px solid black;
    border-radius: 20px;
    transform: translate(-55px,0);
    background-color: #fff;
    color:#6a6a6a;
}




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

.transform-exception-2{
    transform: translateX(250px);
}

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



@font-face {
    font-family: 'Vazir';
    src: url('https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.woff2') format('woff2'),
         url('https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.woff') format('woff'),
         url('https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



.question-container{
    margin-top: -2.5%;
    width: 100%;
    direction: rtl;
    display: flex;
    align-items: center;
    display: flex;
    margin-bottom: 5px;

}

.question-container2{
    margin-top: 1%;
    width: 100%;
    direction: rtl;
    display: flex;
    align-items: center;
    display: flex;
    margin-bottom: 10px;
    transform: translate(-19px,13px);
}



.question-container3{
    margin-top: 0%;
    width: 100%;
    direction: rtl;
    display: flex;
    align-items: center;
    transform: translate(-70px,0px);
}





.question {
    font-family: 'Vazir', Arial, sans-serif;
    text-align: right;
    font-size: 14px;
}


.question1{
    font-weight:bolder;
    margin-bottom: 15px;
    font-family: 'Vazir', Arial, sans-serif;
    border: 1px solid black;
    border-radius: 7px;
    padding: 7px 23px;
    width:326px;
    text-align: right;
    direction: rtl;
    font-size: 12px;
}

.options-radio {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    direction: rtl;
    display: none; 
    text-align: right;
}


.option {
    cursor: pointer;
    align-items: center;
    font-family: 'Vazir', Arial, sans-serif;
    width: 90%;
    direction: rtl;
    font-size: 13px;
    text-align: right;
}

.options3{
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: 'Vazir', Arial, sans-serif;
    margin-top: 20px;
    margin-right: 24px;
}

.option input[type="radio"] {
    margin-left: 10px;
}

.submit-btn {
    display: block;
    width: 10%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 20px;
}

.submit-btn:hover {
    background-color: #45a049;

}


.pages-footer .page-one-footer-exp {
    width: 100%;
    text-align: center;
    padding: 10px;
    position:absolute;
    background-color: #00000000;
    transform: translateY(970px);
    overflow: hidden;
}

.pages-footer-exp{
    width: 100%;
    text-align: center;
    padding: 10px;
    position:absolute;
    background-color: #00000000;
    transform: translate(60px,750px);
    overflow: hidden;
}

.pages-footer-14 {
    transform: translateX(-38px);

}

.footer-btn {
    background-color: #00000000;
    width:5px;
    height: 3px;
    color: rgb(205, 92, 0);
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    margin: 0 10px;
    font-size: 16px;
}

.footer-btn:hover {
    background-color: #00000000;
}

.footer-next-btn-img1{
    width:40px;
    transform: translate(122px,50px);
    cursor: pointer;

}

.footer-next-btn-img2{
    width:40px;
    transform: translate(122px,8px);
    cursor: pointer;

}

.footer-next-btn-img2-2{
    width:40px;
    transform: translate(122px,12px);
    cursor: pointer;
}

.footer-prev-btn-img1{
    width:40px;
    transform: translate(-80px,50px);
    cursor: pointer;

}

.footer-prev-btn-img2{
    width:40px;
    transform: translate(-80px,8px);
    cursor: pointer;

}

.footer-prev-btn-img2-2{
    width:40px;
    transform: translate(-80px,12px);
    cursor: pointer;
}

.page-number {
    justify-self: center;
    text-align: center;
    justify-content: center;

    font-size: 25px;
    margin: 0;
    color: #777575;
}

.footer-line {
    margin-top: 60px;
    border: 0;
    height: 1px;
    background-color: rgb(205, 92, 0);
    width: 350px;
}



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

.porseshname-topic{
    background-color: #3C5D50;
    color: #fff;
    display: inline-block;
    padding: 6px 20px;
    border-radius: 17px;
    font-size: 22px;
    margin-top: 25%;
}

.porseshname-instruction{
    direction: rtl;
    text-align: right;
    width:300px;
    transform: translateX(-20px);
}

.porseshname-four-topic{
    background-color: #3C5D50;
    color: #fff;
    display: inline-block;
    padding: 6px 20px;
    border-radius: 17px;
    font-size: 13px;
    margin-top: 10%;

}

.porseshname-four-instruction{
    font-weight: bold;
    direction: rtl;
    text-align: right;
    font-size: 13px;
    width: 300px;
    transform: translateX(-20px);

}



hr{
    height: 10px;
    background-color: black;
}

.section3-divider-line{
    width: 105%;
    height: .05px;
    margin-top: 3%;
    margin-right: 0%;
}

.quiz-form3-1{
    gap: 20px;
    margin-top: 25px;
    width: 300px;
}



.options {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: flex-start;
    margin-right: 45px;
}

.options-exp{
    display: grid;
}

.option-btn {
    display: inline-block;
    width: 80px;
    height: 25px;
    background-color: white;
    border: 1px solid gray;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
}


.option-btn2{
    margin-top: 1%;
    width: 220px;
    height: 35px;
    background-color: white;
    border: 1px solid gray;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    margin-right: 18px;
}

.option-btn:hover {
    background-color: #e0e0e0;
}

.option-btn.selected {
    background-color: #3C5D50;
    color: white;
}

.option-btn2:hover {
    background-color: #e0e0e0;
}

.option-btn2.selected {
    background-color: #004f03;
    color: white;
}

.question-choise{
    display: flex;
}

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

.line-text {
    align-self: center;
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 40px;
  }

  .line {
    flex-grow: 1;
    height: 2px;
    background-color: #ff8900;
    border: none;
    margin-top: 2%;
  }

  .text {
    padding: 0 20px;
    font-size: 25px;
    white-space: nowrap;
    color: #ff8900;
    text-align: right;
  }


.footer{
    width: 350px;   
    height: 720px;
    margin: 3% auto;
    border-radius: 60px;
    background: linear-gradient(to bottom , #3C5D50, #ffffff00);
    transform: translate(0px,-15px);
    overflow: hidden;
}

.footer-text{
    font-size: 14px;
    padding: 0 8%;
    font-family: 'Vazir', Arial, sans-serif;
    text-align: right;
    font-weight: lighter;
    line-height: 28px;
    margin-top: 10%;

}

.result-btn{
    width: 250px;
    height: 35px;
    border: 1px solid black;
    border-radius: 25px;
    background-color:#ff8900 ;
    font-size: 20px;
    cursor: pointer;
}

.result-button-wrapper{
    position: absolute;
    padding: 2px;
    border: 2px solid #2a6d58;
    border-radius: 25px;
    transform: translate(128px,-120px);
}


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


.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
    border: 1px solid #ccc;
    margin-left: 10px;
    transition: background-color 0.3s ease;
    float:right;
}

input[type="radio"]:checked ~ .status-indicator {
    background-color: orange;
}




#quiz-form1-div .status-indicator.active {
    background-color: orange;
}

#quiz-form1-div > div:nth-child(2) .status-indicator.active {
    background-color: orange;
}

#quiz-form1-div > div:nth-child(1) .status-indicator.active {
    background-color: orange;
}


.options-radio input[type="radio"]:checked + span:before {
    background-color: #818181;
    border-color: #888;
}





.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgb(255, 255, 255);
    border: 1px solid #004e11;
    margin-left: 10px;
    margin-top: .5px;
    margin-right: .5px;
}

.status-indicator-out{
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: white;
    border: 1px solid #004e11;
    margin-left: 10px;
}






.options-radio + label.option span {
    position: relative;
    padding-right: 20px;
    text-align: right;
    margin-top: 1%;
    width: 91%;
}

.options-radio + label.option span::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px; 
    height: 10px; 
    border: 1px solid #cd6300; 
    background-color: white;
    border-radius: 0; 
    transition: background-color 0.3s;
}

.options-radio:checked + label.option span::before {
    background-color: gray; 
    border-color: gray;
}



/*-------------------result page---------------*/

.content-result{
    width: 360px;
    justify-self: center;
    text-align: center;
    align-items: center;

}




.result-page-div{
    background: linear-gradient(to bottom , #DBE1DF, #3C5D50);
    width: 360px;
    height: 750px;
    margin-top: 5%;
    transform: translate(0px,0);
    border-radius: 90px;
    justify-self: center;
    text-align: center;
    align-items: center;
}



.result-page-div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #fefefe;
    pointer-events: none;
    margin: 7px;
    border-radius: 90px;

}


.result-page-resultDiv{
    transform: translateY(45px);
    background-color: #ff8900 ;
    display: inline-block;
    width: 75%;
    padding: 6px 2px;
    font-size: 12px;
    border: 3px solid white;
    border-radius: 20px;
    justify-content: center;
    text-align: center;
    align-self: center;
}

.result-page-suggestDiv{
    transform: translate(-75px,55px);
    width: 50%;
    border: 2px solid white;
    padding: 15px 15px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;

}


.result-page-pdfBtn{
    margin-top: 2%;
    border: none;
    background-color: #fff;
    border-radius: 13px;
    width: 100%;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
}

.logo-result-watermark{
    position: absolute;
    width: 360px;
    opacity: .1;
    transform: translate(184px,120px);
}


/*-------------------refresh button---------------*/
.refresh-button {
    position: absolute;
    transform: translate(-160px, 70px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%; 
}

.reloadSingle {
    height: 2em;
    padding: 0.25em;
    width: 2em;
    position: relative;
}

.reloadSingle-text {
    color: rgb(255, 255, 255);
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-48%, -10%);
    z-index: 1; 
}

.reloadSingle::before {
    content: "";
    border-color: transparent white white white;
    border-radius: 50%;
    border-style: solid;
    border-width: 0.125em; 
    height: 2em; 
    width: 2em; 
    transform: rotate(90deg);
    position: absolute;
    top: 0;
    left: 0;
}

.reloadSingle::after {
    content: "";
    border-color: transparent transparent transparent white;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.55em;
    height: 0;
    position: absolute;
    top: .25em;
    left: 50%;
    width: 0;
    transform: translateX(85%) rotate(65deg);
}

.reloadSingle:hover {
    cursor: pointer;
}

.refresh-button:hover {
cursor: pointer;
}



/*-----------------PageThree-----------------*/

.status-indicator-background{
    background-color: orange;
}

.page-three-img{
    width:280px;
    transform: translateX(10px);
}

.max-width{
    max-width: 80%;
}

.transformToRight{
    margin-top: 15%;
}


.pagethree-p{
    color: #515151;
}

.pagethree-div{
    margin-top: 15%;
}

.select-options-pageThree {
    margin-top: 5%;
    width: 250px;
    height: 40px;
    padding: 5px 20px;
    border: 1px solid black;
    border-radius: 20px;
    background-color: white;
    color: #6a6a6a;
    font-size: 15px;
    box-shadow: none;
    outline: none;
    appearance: none;
  }

  .select-options-pageThree option {
    background-color: white;
  }

code {
    font-family: 'Vazir', Arial, sans-serif;

}



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



.option-container {
    display: flex; 
    align-items: center; 
    margin-bottom: 12px;
    width: 100%;
}

.option-container5 {
    display: flex; 
    align-items: center; 
    margin-bottom: 11px;
    width: 100%;
}



.square {
    width: 12px; 
    height: 12px; 
    background-color: #ffffff; 
    margin-left: 10px;
    border: 1px solid #d76b23; 
    border-radius: 2px;
    cursor: pointer;
}


.square.selected {
    background-color: gray; 
}

.quiz-form .square{
    width: 12px; 
    height: 12px; 
    background-color: #ffffff; 
    margin-left: 10px;
    border: 1px solid #d76b23; 
    border-radius: 2px;
    cursor: pointer;
}

.quiz-form .square.selected {
    background-color: gray; 
}

.quiz-form3-1 .square{
    width: 12px; 
    height: 12px; 
    background-color: #ffffff; 
    margin-left: 10px;
    border: 1px solid #d76b23; 
    border-radius: 2px;
    cursor: pointer;
}

.quiz-form3-1 .square.selected{
    background-color: gray; 
}



/*----------------worlOut page------------------*/



.workout-img{
    width: 360px;
}

.workout-page-buttons{
    justify-content: center;
    text-align: center;
    align-items: center;
    display: flex;
    gap: 10%;
    padding-bottom: 50px;
    width: 90%;
}

.workout-page-button{
    margin-top: 2%;
    border: 1px solid black;
    box-shadow:6px 6px 6px #ccc;
    background-color: #fff;
    border-radius: 13px;
    width: 40%;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
}


.option-container-page1 {
    display: flex; 
    align-items: center; 
    margin-bottom: 15px;
    width: 110%;
}

.options-radio-page1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    direction: rtl;
    display: none; 
    text-align: right;
    font-size: 20px;
}

.square.selected {
    background-color: gray;
}

.option-container-page10 {
    display: flex; 
    align-items: center; 
    margin-bottom: 15px;
    width: 110%;
}

.options-radio-page10 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    direction: rtl;
    display: none; 
    text-align: right;
    font-size: 20px;
}



/*----------------panel page------------------*/


.content-panel {
    direction: rtl;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    margin: 1% auto;
    border: 4px solid rgb(1, 69, 10);
    border-radius: 20px;
    height: 843px; 
    background-color: rgba(25, 87, 34, 0.123);
}


.header-panel{
    background-color: #3C5D50;
    width: 400px;
    height: 50px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    padding-left: 12px;
    border-radius: 15px 15px 0 0 ;
}

.exel-download-div{
    position: absolute;
    width:250px;
    padding: 0 25px 20px 25px;
    border: 2px solid black;
    border-radius: 20px;
    text-align: center;
    margin-right: 57px;
    margin-top: 150px;
}



.exel_download-btn:link, .exel_download-btn:visited {
    text-decoration: none;
    color: rgb(255, 255, 255); 
    background-color: #3C5D50; 
    padding: 5px 45px;
    border: 1px solid rgb(0, 0, 0); 
    border-radius: 15px; 
}

.exel_download-btn:hover {
    background-color: #263a32;
    color: rgb(252, 252, 252);
}

.exel_download-btn:active {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}

.developerTeam_div{
    font-family: sans-serif;
    transform: translate(0px, 560px);
}

.developerTeam_div h4{
    margin-bottom: 30px;
}

hr{
    border: .5px solid #263a32;
    height: 1px;
    width:80%;
    text-decoration: none;
}

h5{
    margin-top: -10px;
}