label.itf-option-label {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
}
/* Basic layout */
#itf-user-form, #itf-quiz-form {
    background:#f8f9fa;
    border:1px solid #ddd;
    border-radius:10px;
    padding:20px;
    margin-bottom:20px;

}
#itf-user-form input{
    width:100%;
    padding:10px;
    margin-bottom: 10px;
    border-radius:6px;
    border:1px solid #ccc;
    box-sizing:border-box;
}
#itf-quiz-form input {
   width:4%;
    padding:10px;
    border-radius:6px;
    border:1px solid #ccc;
    box-sizing:border-box;
}
#itf-user-form button, #itf-quiz-form button {
    background:#007bff;
    color:#fff;
    border:none;
    padding:10px 20px;
    border-radius:6px;
    cursor:pointer;
    width: 20%;
}
#itf-user-form button:hover, #itf-quiz-form button:hover {
    background:#0069d9;
}
#itf-start-quiz{
    width: 20%;
}

/* Question box */
.itf-question {
    margin-bottom:20px;
    padding:15px;
    border-radius:8px;
    background:#f8f9fa;
    position:relative;
}

/* Navigation + Review bar */
.itf-nav-bar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:20px;
    padding-top:15px;
    border-top:1px solid #ddd;
}

.itf-nav-buttons {
    display:flex;
    gap:10px;
    width: 50%;
}

.itf-review-box {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    width: 50%;
    justify-content: right;
}

/* Review highlight */
.itf-question[data-marked="true"] {
    border-color:#ffc107 !important;
}

/* Progress bar */
#quiz-progress { display:none; }

/* Sticky timer */
#quiz-timer-container {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 10px 0;
    
    z-index: 9999;
    text-align: center;
}
#quiz-timer {
    font-weight: bold;
    font-size: 20px;
    color: #dc3545;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 10px;
    background:#f8f9fa;
}
#itf-quiz-report{
    border: 1px solid #ddd;
    padding: 20px 25px;
    border-radius: 10px;
    background:#f8f9fa;
}
#itf-quiz-report h3{
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
}  
/* Submit button */
#itf-submit-quiz {
    background: #28a745;
    padding: 10px 22px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 10px;
}
#itf-submit-quiz:hover {
    background:#218838;
}

.itf-error {
    color:red;
    font-size:13px;
}
/* Question box */
.itf-question {
    margin-bottom:20px;
    padding:15px;
    background:#f8f9fa;
    position:relative;
}

/* Navigation + Review bar */
.itf-nav-bar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:20px;
    padding-top:15px;
    border-top:1px solid #ddd;
}

.itf-nav-buttons {
    display:flex;
    gap:10px;
    width: 100%;
}

.itf-review-box {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
}

/* Highlight marked questions */
.itf-question[data-marked="true"] {
    border-color:#ffc107 !important;
}

/* Submit button */
#itf-submit-quiz {
    background: #28a745;
    padding: 10px 22px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 10px;
}
#itf-submit-quiz:hover {
    background:#218838;
}

/* Errors */
.itf-error {
    color:red;
    font-size:13px;
}

/* Progress bar */
#quiz-progress { display:none; }

/* Responsive */
@media(max-width:600px){
    .itf-nav-bar { flex-direction:column; align-items:flex-start; gap:12px; }
}


/* Responsive */
@media(max-width:600px){
    .itf-nav-bar { flex-direction:column; align-items:flex-start; gap:12px; }
}