@font-face {
    font-family: EXAM_BE;
    src: url('./Vazir.woff');
}
.quiz_be * {
    font-family: "EXAM_BE";
    transition: all 0.3s;
}

.quiz_be {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 40px;
    background: #efefef;
    padding: 14px;
    border-radius: 8px;
    flex-wrap: wrap;
    margin: 8% 4%;
    overflow: hidden;
}

.quiz_be .quiz_meta{
    display: flex;
    flex-direction: row-reverse;
    column-gap: 35px;
}

.quiz_be #exam_title{
    background: #cacaca;
    color: #515151;
    padding: 3px 5px;
    border-radius: 8px;
    font-size: 13px;
}

.quiz_be #quiz_page{
    background: #82cfb93b;
    color: #44c29e;
    padding: 3px 5px;
    border-radius: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: center;
    column-gap: 7px;
}

.quiz_be #quiz_page p{
    margin: unset;
}

.quiz_be #quiz_title{
    /* font-size: 2em; */
    margin: 18px 13px;
    font-size: 1.5em;
    line-height: 2em;
}

.quiz_be .quiz_title{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    direction: rtl;
}
.quiz_be .quiz_meta{
    width: 100%;
}

.quiz_be .quiz_choices, .questions_list, .buttons {
    margin: 20px 0;
}
.quiz_be .quiz_choices{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    direction: rtl;
}
.quiz_be .quiz_choice {
    margin: 10px 0;
    border: 1px solid gray;
    padding: 14px 10px;
    border-radius: 10px;
    margin: 12px;
    border-right: solid 3px;
    background: #fff;
}
.quiz_be .questions_list {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}
.quiz_be .question_number {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
}
.quiz_be .question_number.answered {
    background-color: #44c29e29;
    color: #44c29e;
}
.quiz_be .question_number.answered:hover {
    background-color: #44c29e;
    color: #fff;
}
.quiz_be .question_number:hover {
    background-color: #44c29e;
    color: #fff;
}
.quiz_be .buttons {
    display: flex;
    justify-content: space-between;
}
.quiz_be .buttons button {
    padding: 10px 20px;
    cursor: pointer;
}
.quiz_be .end_exam {
    margin-top: 20px;
    text-align: center;
    width: 100%;
    display: flex;
}
.quiz_be .delete_button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: red;
    color: white;
    cursor: pointer;
    /* width: 100%; */
    padding: 10px;
    border-radius: 9px;
    border: none;
    grid-column: 1 / -1;
}
.quiz_be .delete_button:hover{
    background-color: #ff3b3b83;
}

/* استایل دادن به رادیو باتن */
.quiz_choice {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    transition: transform 0.2s ease, color 0.2s ease;
}

.quiz_choice:hover {
    transform: scale(1.05); /* انیمیشن بزرگ‌تر شدن */
}

/* استایل رادیو باتن */
.quiz_choice input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ddd;
    background-color: #fff;
    margin-right: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* زمانی که رادیو انتخاب شده باشد */
.quiz_choice input[type="radio"]:checked {
    border-color: #44c29e; /* رنگ مرز هنگام انتخاب */
    background-color: #8cccba; /* رنگ پس‌زمینه هنگام انتخاب */
}

.quiz_choice input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* استایل متن گزینه */
.quiz_choice label {
    cursor: pointer;
    font-size: 16px;
    color: #333;
    user-select: none;
    transition: color 0.2s ease;
}

/* تغییر رنگ متن هنگام انتخاب */
.quiz_choice input[type="radio"]:checked + label {
    color: #44c29e; /* رنگ متن هنگام انتخاب */
}

.quiz_be  .quiz_meta    .time{
        background: #ffcdcd;
        color: #c00000;
        padding: 3px 5px;
        border-radius: 8px;
        font-size: 13px;
        display: flex;
        align-items: center;
        column-gap: 6px;
}

.quiz_be  .quiz_meta    .time::before{
    content: '';
    width: 13px;
    height: 13px;
    background: url(./clock-svgrepo-com.svg);
    display: block;
}


button {
    font-size: 16px;
    position: relative;
    margin: auto;
    padding: 1em 2.5em 1em 2.5em;
    border: none;
    background: #fff;
    transition: all 0.1s linear;
    box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.1);
   }
   
   button:active {
    transform: scale(0.95);
   }
   
   button span {
    color: #464646;
   }
   
   button .border {
    position: absolute;
    border: 0.15em solid #fff;
    transition: all 0.3s 0.08s linear;
    top: 50%;
    left: 50%;
    width: 9em;
    height: 3em;
    transform: translate(-50%, -50%);
   }
   
   button:hover .border {
    display: block;
    width: 9.9em;
    height: 3.7em;
   }
   
   .full-rounded {
    border-radius: 2em;
   }

   /* تنظیمات ریسپانسیو */
@media (max-width: 1200px) {
    .quiz_be {
        padding: 12px; /* کاهش فاصله‌ها در صفحات کوچک */
    }

    .quiz_be .quiz_title {
        font-size: 1em; /* کاهش اندازه عنوان */
    }

    .quiz_be .quiz_choices {
        grid-template-columns: 1fr 1fr; /* دو ستونه شدن انتخاب‌ها در صفحات بزرگتر */
    }

    .quiz_be .quiz_choice {
        font-size: 14px; /* کاهش سایز فونت برای صفحه‌های کوچکتر */
    }

    .quiz_be .buttons {
        flex-direction: column;
        gap: 10px;
    }

    .quiz_be .question_number {
        width: 30px;
        height: 30px;
        font-size: 12px; /* کاهش اندازه دکمه‌های شماره سوال */
    }
}

@media (max-width: 768px) {
    .quiz_be .quiz_choices {
        grid-template-columns: 1fr; /* تک ستونه شدن انتخاب‌ها در صفحات کوچک */
    }

    .quiz_be .quiz_title {
        font-size: 0.7em !important; /* تنظیم سایز فونت برای صفحات کوچک */
    }

    .quiz_be .question_number {
        width: 25px;
        height: 25px;
        font-size: 12px; /* کاهش سایز دکمه‌ها */
    }

    .quiz_be .buttons {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .quiz_be .buttons button {
        width: 100%; /* دکمه‌ها را به صورت تمام عرض در بیاورید */
    }
    .quiz_be .end_exam{
        flex-direction: column !important;
    }

    .quiz_be .start-text {
        font-size: 1rem !important;
        line-height: 30px;
    }
    .quiz_be .start-text a{
        font-size: 0.7rem !important;
        padding: 5px 10px !important;
    }
}


.question-transition {
    animation: slideIn 0.5s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.quiz_choice {
    margin-bottom: 10px;
}

.answered {
    background-color: #d1ffd1;
}

.delete_button {
    margin-top: 10px;
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.delete_button:hover {
    background-color: #c13333;
}

.quiz_title, .quiz_meta {
    text-align: center;
}

.finish-button {
background-color: #2bac93;
color: white;
padding: 10px;
border: none;
cursor: pointer;
border-radius: 6px;
}

.finish-button:disabled {
    background-color: gray;
}

#school-class-form{
    display: grid
;
    flex-direction: row;
    align-items: center;
    direction: rtl;
    row-gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    grid-template-columns: 1fr 1fr;
    justify-items: start;
    margin: auto;
}

#school-class-form input[type="text"]{
    text-align: center;
    padding: 7px 10px;
    border-radius: 10px;
    font-weight: bold;
    border: 1px solid gray;
}

#school-class-form button{
    margin: 15px;
    border-radius: 9px;
    background: blue;
    color: #fff;
    cursor: pointer;
    width: 70%;
    grid-column: span 2;
    margin: auto;
    margin-top: 21px;
}

#school-class-form button:hover{
    background: rgba(0, 0, 255, 0.516);
}

.quiz_be{
    position: relative;
}
.quiz_be .start-text{
    position: absolute;
    display: flex
;
    flex-direction: column;
    text-align: center;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    background: transparent;
    backdrop-filter: blur(6px);
    z-index: 10;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    direction: rtl;
    line-height: 2em;
}
.quiz_be .start-text a{
    background: #000000eb;
    padding: 18px;
    border-radius: 12px;
    margin: 20px;
    border: 1px solid;
    color: white;
    font-size: 0.8em;
    cursor: pointer;
    line-height: normal;
}

.quiz_be form select{
    text-align: center;
    padding: 7px 10px;
    border-radius: 10px;
    font-weight: bold;
    border: 1px solid gray;
    outline: none;
}