body {
   /* font-family: 'Cairo', Arial, sans-serif; */
	font-family: Segoe UI, Segoe UI Midlevel, sans-serif;
    direction: rtl; /* Right-to-left for Arabic */
    margin: 0px !important;
	padding:0px;
	background:#e3ebf1;
}





.disabled-option {
    position: relative;
    opacity: 0.6;
}

.disabled-option .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    pointer-events: none;
}









        .subscription-container {
            background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    max-width: 400px;
    text-align: center;
    color: #333;
    margin: 0 auto;
	display:grid;
        }

        .subscription-container p {
            font-size: 16px;
            color: #555;
            margin: 10px 0;
        }

        .subscription-container a {
                padding: 10px 20px;
    margin: 5px auto;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    max-width: 84px;
        }

        .subscription-container a:hover {
            background-color: #0056b3;
        }

        .subscription-container .whatsapp-button {
            background-color: #25D366;
        }

        .subscription-container .whatsapp-button:hover {
            background-color: #1da655;
        }
		
#clarification p{
  /*  margin: 0 auto; */
}

        .subscription-banner {
            padding: 20px;
            background-color: #f4f4f4;
            border: 2px solid #ddd;
            text-align: center;
            margin: 20px 0;
			    display: none;
        }
        @media screen and (max-width: 480px) {
.subscription-banner {
    margin: 20px 10px;
}
}
        .subscription-banner h2 {
            color: #333;
            font-size: 24px;
        }
        .subscription-banner p {
            color: #666;
            font-size: 18px;
        }
        .explore-button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
            font-size: 18px;
        }
        .explore-button:hover {
            background-color: #0056b3;
        }

		
		
		
		
		
		
		
 /* Basic styles for the status table */
        #statusTable {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }

        #statusTable th, #statusTable td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }

        .correct {
            background-color: #c8e6c9; /* Light green */
        }

        .incorrect {
            background-color: #ffccbc; /* Light red */
        }

        .skipped {
            background-color: #fff; /* Default white */
        }

        #header {
            margin-bottom: 20px;
			font-size: 12px;
        }
h1 {
    color: #333;
}

label {
    font-weight: 400;
}

/* Question Container Styles */
.question-container {
    min-height: 200px;
    padding: 15px 0;
    margin-top: 20px;
    background: #fff;
    box-shadow: rgb(153, 153, 153) 1px 2px 3px 0px;
    border-right: 5px solid #00467F !important;
}

table {
  border: 1px solid #1C6EA4;
  width: 95%;
  text-align: right;
  border-collapse: collapse;
      margin: 20px 10px;
}
table td, table th {
  border: 2px solid #AAAAAA;
  padding: 5px 5px;
}
table tbody td {
  font-size: 13px;
}
table tfoot td {
  font-size: 14px;
}
table tfoot .links {
  text-align: right;
}
table tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
/* Question Text Styles */
#question {
    font-size: 18px;
    margin-bottom: 10px;
    max-width: 100%;
    padding: 10px;
    background: #fff;
    /* border-radius: 5px; */
    /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
    text-align: justify;
}
#question:empty, #clarification:empty, #answers:empty{
  background-color: transparent; /* Transparent background when empty */
  box-shadow: unset;
}
#question p {
    line-height: 1.5;
}
#clarification {
    font-size: 15px;
    margin-bottom: 10px;
    max-width: 100%;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    line-height: 1.5;
    text-align: justify;
    box-shadow: rgb(153, 153, 153) 1px 2px 3px 0px;
    border-right: 5px solid #00467F !important;
}
#knowledge-center{
    font-size: 15px;
    margin-bottom: 10px;
    max-width: 100%;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	line-height: 1.5;
	text-align: justify;
}
footer {
    background-color: #00467F !important;
    color: #fff;
    padding: 20px;
}
.rtl-label {
    display: flex;
    justify-content: right; /* Aligns items to the right */
    direction: rtl; /* Right-to-left text direction */
    margin-bottom: 5px;
    font-size: 16px;
}

.rtl-label input[type="radio"] {
    margin-left: 8px; /* Adds space between the radio button and the answer text */
}

.label-letter {
    
    margin-left: 5px; /* Adds space between the answer text and the label */
    direction: rtl; /* Ensures Arabic letters are right-to-left */
}

.main-cont {
        padding-bottom: 50px;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 50px;
	min-height: 100vh;
}
@media screen and (max-width: 480px) {
 .main-cont {
   
    margin: 0 10px;
   
}   
}
td {
    border: solid 1px #bababa;
}
/* Answers Styles */
#answers {
    margin-top: 10px;
    font-size: 18px;
    margin-bottom: 10px;
    max-width: 100%;
    padding: 10px;
    background: #fff;
    /* border-radius: 5px; */
    /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
    text-align: justify;
}


/* Show Answer Button Styles */
#showAnswerButton {
    margin-top: 10px; /* Space above the button */
    padding: 10px 15px; /* Padding for the button */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    background-color: #0056b3; /* Official blue background */
    color: white; /* Text color */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Cursor on hover */
    transition: background-color 0.3s ease; /* Transition effect */
}

#showAnswerButton:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

#showAnswerButton:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blue shadow effect on focus */
}






.correct {
    background-color: #c8e6c9; /* Light green for correct answers */
}

.incorrect {
    background-color: #ffccbc; /* Light red for incorrect answers */
}

.skipped {
    background-color: #f5f5f5; /* Light gray for skipped or unanswered questions */
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Black with transparency */
    z-index: 1000;
    overflow: hidden;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 80%;
    max-width: 600px; /* Set a max-width */
    height: auto; /* Automatic height based on content */
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/* Style for select elements */
.select-container {
    position: relative;
    width: 100%;
    max-width: 300px; /* Adjust this as needed */
    margin-bottom: 15px;
	  display: inline-block; /* Allow elements to stack */
}

select {
      
    width: 100%; /* Full width of container */
    padding: 5px 10px; /* Add some padding */
    border: 1px solid #b7b7b7; /* Dark gray border for a serious look */
    border-radius: 5px; /* Rounded corners */
    background-color: #fff; /* Light gray background */
    font-size: 16px; /* Increase font size */
    transition: all 0.3s ease; /* Smooth transition for focus effects */
    appearance: none; /* Remove default styling for select */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
   
    
    color: #333;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>'), 
                      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>');
    background-repeat: no-repeat, no-repeat;
    background-position: left 10px top, left 10px bottom; /* Adjust arrow positions */
    background-size: 16px, 16px; 
	margin-top:5px;
}

/* Style for select when focused */
select:focus {
    border-color: #007BFF; /* Change border color to a standard blue on focus */
    outline: none; /* Remove outline */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blue shadow effect */
}

/* Style for button */
button {
    padding: 10px 20px; /* Add padding */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    background-color: #007BFF; /* Official blue */
    color: white; /* Text color */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Cursor on hover */
    transition: background-color 0.3s ease; /* Transition effect */
    width: 150px; /* Fixed width for buttons */
}

button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

button:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blue shadow effect */
}


/* Navigation Menu Styles */
.navbar {
    background-color: #00467F; /* Official blue background */
  /*  padding: 10px;  Padding around the navbar */
    display: flex; /* Flexbox for horizontal alignment */
    justify-content: space-between; /* Space between items */
    align-items: center; /* Center items vertically */
    /* border-radius: 5px;  Rounded corners */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    margin-bottom: 20px; /* Space below the navbar */
	position: fixed;
    width: 100%;
	z-index: 1;
}
#answers div {
    margin: 5px;
    /* background: #eeeeee; */
    border-radius: 5px;
    padding: 5px;
}
.nav-container {
    display: flex; /* Flexbox for the container */
    gap: 10px; /* Space between buttons */
    flex-grow: 1; /* Allow this container to grow */
	max-width: 800px;
    margin: 0 auto;
}

/* Style for the header inside the nav */
.header {
    font-size: 16px; /* Font size for the header */
    color: #fff; /* White text color for contrast */
    margin-left: auto; /* Push the header to the right */
}

/* Button styles */
.nav-item button {
    padding: 1px;
    border: none;
    border-radius: 5px;
background-color: #00467F; 
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: fit-content;
}
@media screen and (max-width: 480px) {
.nav-item button {
    padding: 5px;
    border: none;
    border-radius: 5px;
    background-color: #f1f1f1;
    color: #333;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: fit-content;
}
.header {
    font-size: 12px;
    color: #fff;
    margin-left: auto;
	margin: 0 !important;
}
}
.nav-item button:hover {
  /*   background-color: #48adff; */ /* Darker gray on hover */
	color:#48adff;
}

.nav-item button:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blue shadow effect */
}