html, body {
            height: 100%;
            margin: 0;
            overflow-y: auto; /* Enables vertical scrolling */
            overflow-x: hidden; /* Prevents horizontal scrolling */
        }
       body {
      -webkit-user-select: none; /* Disable selection in WebKit/Blink */
      -moz-user-select: none; /* Disable selection in Firefox */
      -ms-user-select: none; /* Disable selection in IE 10 and IE 11 */
      user-select: none; /* Disable selection in standard browsers */
      -khtml-user-select: none; /* Disable selection in Konqueror */
      -o-user-select: none; /* Disable selection in Opera */
    }
             
       body, h1, p, button {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Tahoma, sans-serif;
            background-color: #f1f1f1;
        }

        #quiz-container {
            background-color: #FFF;
            max-width: 90%;
            margin: -15px auto;
            padding: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            text-align: left;
            border: 1px solid #ccc;
            max-height: 400px; /* Set the max-height for the container */
            overflow-y: auto; /* Enable vertical scrolling */
        }
 .styled-container {
    background-color: #1A1A1A;
    color: #F0F0F0;
    font-weight: bold;
    padding: 5px 10%; /* Use percentage-based padding */
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 0px;
    text-align: center;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    font-size: 25px;
    font-family: Verdana, Tahoma, sans-serif;
}

      /* Optional: Add media queries for finer control */
@media (max-width: 768px) {
    .styled-container {
        padding: 5px 5%; /* Adjust padding for smaller screens */
    }
}

@media (max-width: 480px) {
    .styled-container {
        padding: 5px 2%; /* Adjust padding for very small screens */
    }
}


        #question-container {
            margin-bottom: 0px;
          	margin-top: 7px;
        }

        p#question-text {
            font-size: 18px;
            color: #555;
          	font-family: Tahoma, sans-serif;
        }

        #options-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding: 0px;
        }
    
      
        button {
            font-size: 14px;
            padding: 5px 10px;
            margin: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            width: auto; /* Ensures buttons take full width of the container */
            box-sizing: border-box; /* Ensures padding is included in the width */
           text-align: center;
           word-wrap: break-word; /* Ensures long text wraps to next line */
        }

     /* Background color for all option buttons */
button.option-a,
button.option-b,
button.option-c,
button.option-d {
    background-color: #003366; /* Royal Blue for all options */
    color: #FFFFFF; /* White for text */
    font-weight: bold;
}



        button:hover {
            background-color: none;
        }

        #result-container {
            background-color: #fff;
            max-width: 90%;
            margin: 20px auto;
            padding: 20px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            text-align: left;
            display: none;
            border: 1px solid #ccc;
            max-height: 400px; /* Set the max-height for the container */
            overflow-y: auto; /* Enable vertical scrolling */
            margin-bottom: 20px;
        }
      /* Media queries for different screen sizes */
@media (max-width: 600px) {
  #result-container {
    max-height: 60vh;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  #result-container {
    max-height: 65vh;
  }
}

        h2 {
            font-size: 19px;
            color: #333;
            margin-bottom: 5px;
        }

        /* Add this CSS rule to set the font size for the "Result" text */
        #result-container h2 {
            font-size: 27px;
          	 margin-top: -10px;
             margin-bottom: 15px;
            font-family: Verdana, sans-serif; /* Adjust the font size as needed */
            /* Add any other styles you want for this text here */
        }

        p#score-text {
            font-size: 23px;
            font-weight: bold;
            color: #e74c3c;
            margin-bottom: 7px;
          	font-family: Arial, sans-serif;
        }

        p#remarks {
            font-size: 19px;
            font-weight: none;
            margin-bottom: 20px;
          	font-family: Arial, sans-serif;
        }

        /* Add this CSS rule to set the font size for the "Wrongly Answered Questions:" text */
        p#wrong-answers-text {
            font-size: 17px; /* Adjust the font size as needed */
            font-family: Tahoma, sans-serif;
            
        }

        p#congratulations {
            font-size: 22px;
            font-weight: bold;
            color:  #00A86B;
          	margin-bottom: 20px;
          	margin-top: 30px;
        }

        p#correct-answers-text {
            font-size: 16px;
            font-weight: bold;
            margin-top: 10px;
        }

        div#correct-answers-list {
            font-size: 16px;
            margin-top: 10px;
        }

        /* Bold question numbers */
        .question-number {
            font-weight: bold;
        }

        /* Bold question numbers for wrongly answered questions */
        .wrong-question-number {
            font-weight: bold;
        }

        /* Responsive styles */
        @media screen and (max-width: 600px) {
            body {
                font-size: 16px;
            }

            #quiz-container {
                max-width: 90%;
            }

            h1 {
                font-size: 18px;
            }

            #options-container button {
                font-size: 14px;
            }

            #result-container {
                max-width: 90%;
            }
        }


        /* Styles for the "Submit" button */
        button#submit-quiz-button {
            background-color: #4CAF50;
            color: #FFFFFF;
            display: none; /* Ensure the button is displayed for testing */
            margin-top: 30px !important; /* Top margin */
            margin-bottom: 30px !important; /* Bottom margin */
            margin-left: auto; /* Center horizontally */
            margin-right: auto; /* Center horizontally */
            font-weight: bold;
            font-size: 20px;
            font-family: Roboto, sans-serif;
        }

        /* Add this CSS rule to set the font size for the wrongly answered questions list */
        .wrong-answers-list {
            font-size: 17px; /* Adjust the font size as needed */
            margin-bottom: 10px;
            font-family: Tahoma, sans-serif;
        }

        /* Add styles for feedback indicators */
        .feedback-icon {
            font-size: 30px;
            margin-top: 0px;
            text-align: right;
            margin-bottom: 0px;
          	
        }

      #correct-feedback {
    color: #228B22; /* Forest Green color for correct feedback */
}

       #incorrect-feedback {
    color: #8B0000; /* Dark Red color for incorrect feedback */
}


        /* Add a style for the disabled answer buttons */
        button[disabled] {
            opacity: 0.9;
            cursor: not-allowed;
        }
      
    /* Add a style for the selected answer option */
		button.selected-option {
    background-color: #000000; /* Change to black */
    color: #FFFFFF; /* Change text color to white */
    font-weight: bold;      
	}
      
     /* Center the "Try Again" button */
#try-again-container {
    text-align: center;
    margin: 20px auto; /* Center horizontally and provide top margin */
}

/* Adjust the styling for the "Try Again" button */
a.custom-button {
    background-color: #FFA726; /* Match the color of your "Submit" button */
    color: #1E2A4A;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none; /* Remove underlines for links */
    font-size: 18px; /* Adjust font size as needed */
}

/* Explicitly remove hover styles */
a.custom-button:hover {
    background-color: #FFA500; /* Maintain button color on hover */
    color: #1E2A4A;
    text-decoration: none; /* Remove underlines on hover */
}
      /* Style for the "Quick Revision" button container */
#quick-revision-container {
    text-align: center;
    margin-top: 27px; /* Adjust the top margin as needed */
}

/* Style for the "Quick Revision" button */
#quick-revision-container a.custom-button {
    background-color: #3F51B5; /* Button background color */
    color: #E0E0E0; /* Text color */
    padding: 5px 30px; /* Padding for the button */
    border: none;
    border-radius: 70px;
    cursor: pointer;
    text-decoration: none; /* Remove underlines for links */
    font-size: 18px; /* Font size */
    font-weight: bold;
}

/* Hover style for the button */
#quick-revision-container a.custom-button:hover {
    background-color: none; /* Change color on hover */
}
      /* Centered message style */
        #message-container {
             background-color: #FFFFFF;
            max-width: 90%;
            margin: 30px auto;
            padding: 5px 30px;;
          	border-radius: 10px;
            text-align: center;
          	margin-top: 30px;
          	margin-bottom: 20px;
                  
        }
      #quiz-title {
    text-decoration: underline;
    color: #333;
    margin-top: 2px; /* Adjust as needed to move the title upwards */
}
/* Style for the "Next" button */
      button#next-button {
            background-color: #FF7F50; /* Medium Sea Green for background */
            color: #2F4F4F; /* White text */
            font-weight: bold; /* Bold text */
            padding: 1px 0px; /* Padding */
            border: none;/* No border */
            border-radius: 5px; /* Rounded corners */
            cursor: pointer; /* Cursor style */
            font-size: 27px; /* Font size */
            margin-top: 0px; /* Adjust top margin as needed */
            margin-bottom: 17px;
            font-family: Verdana, sans-serif;
        }
         @keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Base styles for the button */
div.text-center.mt-3 button#mute-toggle {
    background-color: #00796B !important; /* DodgerBlue background color for high contrast */
    color: #FFFFFF !important; /* White text color for readability */
    border: none !important; /* Remove default border */
    border-radius: 8px !important; /* Rounded corners for a modern look */
    padding: 3px 5px !important; /* Adequate padding for better touch interaction */
    font-size: 1rem !important; /* Reasonable font size for readability */
    font-family: 'Roboto', sans-serif !important; /* Consistent font family */
    font-weight: bold !important; /* Bold text for emphasis */
    cursor: pointer !important; /* Pointer cursor on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; /* Light shadow for depth */
    transition: background-color 0.3s, box-shadow 0.3s !important; /* Smooth transitions for hover effects */
    margin-bottom: 25px;
    margin-left: 15px;
}

/* Hover State */
div.text-center.mt-3 button#mute-toggle:hover {
    background-color: #00695C !important; /* Slightly darker blue on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important; /* Deeper shadow on hover */
}

/* Active State */
div.text-center.mt-3 button#mute-toggle:active {
    background-color: #00796B !important; /* Darker blue on active */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; /* Reduced shadow on active */
}

/* Focus State for Accessibility */
div.text-center.mt-3 button#mute-toggle:focus {
    outline: 3px solid #FFD700 !important; /* Gold outline for better visibility */
    outline-offset: 2px !important; /* Slight offset for the outline */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    div.text-center.mt-3 button#mute-toggle {
        padding: 10px 20px !important; /* Adjust padding for smaller screens */
        font-size: 0.9rem !important; /* Slightly smaller font size for smaller screens */
    }
}

@media (max-width: 576px) {
    div.text-center.mt-3 button#mute-toggle {
        padding: 8px 16px !important; /* Further adjust padding for very small screens */
        font-size: 0.8rem !important; /* Further reduce font size for very small screens */
    }
}
   #mute-toggle-button {
    background-color: #1E90FF; /* Deep purple for high contrast */
    color: #FFFFFF; /* White text for high contrast */
    border: none; /* Remove default border */
    padding: 3px 5px; /* Padding for a larger, more tappable button */
    font-size: 1rem !important; /* Reasonable font size for readability */
    font-weight: bold; /* Bold text for emphasis */
    border-radius: 8px !important; /* Rounded corners for a modern look */
    cursor: pointer; /* Pointer cursor on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transitions for hover effects */
    font-family: 'Roboto', sans-serif; /* Consistent with Android design guidelines */
    text-align: center; /* Center the text inside the button */
    margin-bottom: auto;
    margin-right: 15px;
}
   
   
   

#mute-toggle-button:hover {
    background-color: #1C86EE; /* Darker purple on hover */
    transform: translateY(-2px); /* Slight lift effect on hover */
}

#mute-toggle-button:active {
    background-color: #1E90FF; /* Darker purple on active */
    transform: translateY(0); /* Reset lift effect on click */
}

#mute-toggle-button:focus {
    outline: 3px solid #FFD700 !important; /* Gold outline for better visibility */
    box-shadow: 0 0 0 3px rgba(98, 0, 238, 0.5); /* Custom focus outline for accessibility */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #mute-toggle-button {
      padding: 10px 20px !important; /* Adjust padding for smaller screens */
        font-size: 0.9rem !important; /* Slightly smaller font size for smaller screens */
    }
}

@media (max-width: 576px) {
    #mute-toggle-button {
       padding: 8px 16px !important; /* Further adjust padding for very small screens */
        font-size: 0.8rem !important; /* Further reduce font size for very small screens */
    }
/* Container for the image */
#question-image {
    width: 100%; /* Ensures the image container spans the full width */
    display: flex;
    justify-content: center; /* Center-align the image */
    align-items: center; /* Center the image vertically */
}

/* Ensure images are small and clear */
#question-image img {
    max-width: 100%; /* Prevent the image from overflowing */
    height: auto; /* Maintain aspect ratio */
    max-height: 400px; /* Prevents images from growing too tall */
    object-fit: contain; /* Ensure the image fits within the container */
    margin-bottom: 5px; /* Space between the image and the question text */
}

/* You can use media queries to adjust the size further for different screen sizes */
@media screen and (max-width: 768px) {
    #question-image img {
        max-height: 200px; /* Smaller images on smaller screens */
    }
}