.testbox {
      font-family: Arial, sans-serif;
      padding: 5px;
      width:100%;
      background: #f9f9f9;
      color: #333;
      display: flex;
      flex-direction: column;
      min-height: 500px;
     
    }

    #instructions, #testInterface, #resultContainer {
      max-width: 700px;
      margin: auto;
      background: white;
      padding: 5px;
      border-radius: 8px;
      box-shadow: 0 0 12px rgba(0,0,0,0.1);
    }
    #testInterface{
    width:100%;
    }

   .testbox h2, h3 {
      margin-top: 0;
    }

    .options label {
      display: block;
      padding: 12px;
      margin-bottom: 10px;
      border-radius: 6px;
      border: 1px solid #ccc;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .options label:hover {
      background-color: #e6f7ff;
    }

    .options input[type="radio"] {
      margin-right: 10px;
      cursor: pointer;
    }

    .testbox button {
      padding: 10px 20px;
      margin: 8px 5px 0 0;
      border: none;
      border-radius: 5px;
      background-color: #4caf50;
      color: white;
      cursor: pointer;
      font-size: 1rem;
      transition: background-color 0.3s ease;
    }
   
    .testbox button:disabled {
      background-color: #a5d6a7;
      cursor: not-allowed;
    }

    .testbox button:hover:not(:disabled) {
      background-color: #45a049;
    }

    #timer {
      font-weight: bold;
      color: #d32f2f;
      font-size: 1.2rem;
      margin-right: 15px;
    }

    #langSelect {
      padding: 5px;
      font-size: 1rem;
    }

    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 15px;
    }

    /* Question navigation panel at the top */
    .question-nav {
      display: flex;
      overflow-x: auto;
      padding: 5px 0 10px 0;
      gap: 8px;
      margin-bottom: 15px;
    }

    .nav-button {
      flex: 0 0 auto;
      width: 40px;
      height: 40px;
      border: 1.5px solid #ccc;
      border-radius: 4px;
      background-color: white;
      cursor: pointer;
      font-weight: bold;
      color: #333;
      user-select: none;
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .nav-button.answered {
      background-color: #90ee90; /* Green */
      border-color: #4caf50;
      color: #004d00;
    }

    .nav-button.skipped {
      background-color: #ccc; /* Grey */
      border-color: #999;
      color: #666;
    }

    .nav-button.active-question {
      background-color: #004d00; /* Dark Green */
      border-color: #1b5e20;
      color: white;
    }

    /* Correct answer in green, wrong in red on results */
    .correct {
      color: green;
      font-weight: bold;
    }

    .incorrect {
      color: red;
      font-weight: bold;
    }

    .remark {
      font-weight: bold;
      margin-top: 5px;
      font-size: 1rem;
    }

    .remark.correct {
      color: green;
    }

    .remark.incorrect {
      color: red;
    }

    /* Skipped remark style */
    .remark.skipped {
      color: gray;
      font-style: italic;
    }

    /* Centered score */
    #resultScore {
      text-align: center;
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 20px;
    }

    /* Loader */
    #loader {
      text-align: center;
      font-size: 1.2rem;
      padding: 20px;
      color: #4caf50;
      font-weight: bold;
    }

    /* Buttons container for responsive layout */
    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .button-row button {
      flex: 1 1 45%; /* two buttons per row if space tight */
      min-width: 120px;
    }

    @media (max-width: 600px) {
      .button-row button {
        flex: 1 1 45%;
        min-width: 45%;
      }
    }

    @media (max-width: 400px) {
      .button-row button {
        flex: 1 1 45%;
        min-width: 45%;
      }
    }