/*Modal*/

.success-message {
    background: #e0ffe0;
    color: #006600;
    padding: 10px 20px;
    border: 1px solid #00aa00;
    border-radius: 4px;
    font-size: 14px;
}

.small-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

.modal-content-small {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 300px;
    text-align: center;
    position: relative;
}

.close-small {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 20px;
    cursor: pointer;
}
/* you already have .small-modal and .modal-content-small */
/* no changes needed here unless you want different colors */

.modal-content-small p {
    color: #006600;
    /* green text for success */
    font-weight: bold;
}
.custom-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.custom-modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 24px;
    cursor: pointer;
}
/*about us*/
*, *:before, *:after {
    box-sizing: inherit;
  }
  
  .column {
    float: left;
    width: 33.3%;
    margin-bottom: 16px;
    padding: 0 8px;
  }
  
  .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 8px;
    width: 100%;
    min-height: 450px; /* Adjust as needed */
}
.card img {
    width: 100%;
    height: 200px; /* Adjust height to keep consistency */
    object-fit: cover; /* Ensures images have the same size */
}
  .about-section {
    padding: 50px;
    text-align: center;
    background-color: #474e5d;
    color: white;
    border-radius: 20px;
  }
  
  .container {
    padding: 0 16px;
  }
  
  .container::after, .row::after {
    content: "";
    clear: both;
    display: table;
  }
  
  .title {
    color: grey;
  }
  
  .button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
  }
  
  .button:hover {
    background-color: #555;
  }
  
  @media screen and (max-width: 650px) {
    .column {
      width: 100%;
      display: block;
    }
  }
/*admin add*//* Modal Background */
/* The Modal (background) */
/* Center the modal properly */
.modal {
    display: none; /* Initially hidden */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    position: fixed; 
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.4); /* Black with opacity */
}

/* Modal Content */
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: white;
    width: 50%;
    max-width: 600px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    
    /* Make spacing uniform using flexbox */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Adjust spacing between elements */
}

/* Ensure input fields and buttons are spaced evenly */
.modal-content input,
.modal-content button {
    width: 80%; /* Keeps elements aligned */
    padding: 10px;
    margin: 0; /* Removes any extra margins */
    font-size: 16px;
}

/* Improve button styles */
.modal-content button {
    background-color: #444; /* Dark background */
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.modal-content button:hover {
    background-color: #333; /* Darker on hover */
}

/* Close button */
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    color: #333;
    cursor: pointer;
}



/* Category Control Popup Styles */
#categoryControlPopup .popup-content {
    width: 400px; /* Adjust the width to make it smaller */
    max-width: 90%; /* Optional: ensures it doesn't overflow on smaller screens */
    height: auto; /* Adjusts height to content */
    padding: 20px; /* Reduces padding inside the popup */
    border-radius: 8px; /* Optional: rounded corners for a cleaner look */
    background-color: white; /* Ensures background is white */
    overflow: auto; /* Ensures the content scrolls if too much content */
}

#categoryControlPopup table {
    width: 100%; /* Ensures the table takes up full width of the popup */
    margin-top: 20px;
}

#categoryControlPopup .popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    color: #333;
}

#categoryControlPopup h3 {
    font-size: 18px;
    text-align: center;
    margin-bottom: 15px;
}

/* Reduce size of buttons in category control */
#categoryControlPopup .btn {
    font-size: 14px;
    padding: 6px 12px;
}

/* Table styling for smaller popup */
#categoryControlPopup table th,
#categoryControlPopup table td {
    font-size: 14px; /* Smaller text for table cells */
    padding: 8px; /* Less padding for table cells */
}

#categoryControlPopup table th {
    text-align: left;
}

/* Style for sorting buttons */
.sorting a {
    margin-right: 15px; /* Add space between the buttons */
}

.sorting a:last-child {
    margin-right: 0; /* Remove margin for the last button */
}

.button-group .sorting {
    display: flex; /* Align the buttons horizontally */
    gap: 15px; /* Alternatively, use the gap property for spacing */
}


/* Style for pagination buttons */
.pagination .button-group .btn {
    background-color: #ccc; /* Default button color */
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 5px;
    color: #000;
    margin: 0 5px;
}

.pagination .button-group .btn:hover {
    background-color: #aaa; /* Hover effect */
}

.pagination .button-group .btn.active {
    background-color: #777; /* Active page button color */
    color: white; /* Text color for active button */
}

.pagination .button-group .btn:disabled {
    background-color: #ddd; /* Disabled button color */
    color: #aaa;
}
/*total question container*/
.question-count-container {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #333; /* Background color for the box (can be customized) */
    color: white; /* White text color */
    font-weight: bold; /* Bold text for emphasis */
    border-radius: 10px; /* Rounded corners */
    display: inline-block; /* Make the box inline with other content */
    text-transform: uppercase; /* Uppercase text */
    font-size: 16px; /* Set a font size */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover transitions */
    user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -moz-user-select: none;    padding: 5px 10px;
    border-radius: 5px;
}
/*Password Indicators*/
/* Add some basic styles to hide the indicators by default */
#passwordIndicators, #confirmPasswordIndicator {
    display: none;
    margin-top: 10px;
    font-size: 12px;
}

/* When the password input is focused or hovered, show the indicators */
input[name="password"]:focus ~ #passwordIndicators,
input[name="confirm_password"]:focus ~ #confirmPasswordIndicator,
input[name="confirm_password"]:hover ~ #confirmPasswordIndicator {
    display: block;
}

/*category table style*/
#categoryTable {
    margin-top: 20px;
    border: 1px solid #ddd;
    border-collapse: collapse;
}

#categoryTable th, #categoryTable td {
    padding: 10px;
    text-align: left;
}

#categoryTable th {
    background-color: #f4f4f4;
}

#categoryTable tr:nth-child(even) {
    background-color: #f9f9f9;
}

#categoryTable tr:hover {
    background-color: #f1f1f1;
}

/* Password hide and show */
/* Style the container for the checkbox and label */
.password-toggle {
    display: flex;
    align-items: center; /* Align items vertically */
    gap: 8px; /* Space between checkbox and label */
}
  
/* Style the checkbox itself (optional) */
.password-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    /* Add any additional styling for the checkbox */
}

/* Style the label */
.password-toggle label {
    display: flex;
    align-items: center;  /* Center the label vertically with the checkbox */
    cursor: pointer;
    /* You can style the label text as needed */
}

  
/* Style for the indicator list */
#passwordIndicators li,
#confirmPasswordIndicator {
    color: red;
    margin: 5px 0;
}

#confirmPasswordIndicator {
    color: red;
    font-size: 12px;
}

/* Green color when password confirmation matches */
#confirmPasswordMatch {
    color: green;
}


/* Input field styles */
input[type="text"], input[type="email"], input[type="password"] {
    width: 200px;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Add some space between input fields and labels */
.input-container {
    width: 225px;
    margin-bottom: 20px;
}

/* Terms and Conditions Styling */
.terms-conditions-container {
    max-width: 800px;          /* Max width of the container */
    margin: 20px auto;         /* Center the container horizontally */
    padding: 20px;             /* Padding around the content */
    background-color: #f9f9f9;/* Background color of the container */
    border-radius: 8px;        /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    overflow-y: auto;          /* Enable vertical scrolling if content is too long */
    height: 500px;             /* Fixed height for scrolling */
}
.toggle-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-size: 18px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.toggle-button:hover {
    background-color: #45a049;
}
 
.container {
    height:350px;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.terms-title {
    font-size: 32px;           /* Font size for the title */
    color: #333;               /* Dark color for the title */
    margin-bottom: 10px;       /* Space below the title */
}

.last-updated {
    font-size: 14px;           /* Smaller font size for the last updated text */
    color: #888;               /* Lighter color */
    margin-bottom: 20px;       /* Space below the last updated text */
}

.intro-text {
    font-size: 16px;           /* Regular text size */
    color: #555;               /* Slightly lighter color */
    line-height: 1.6;          /* Line height for better readability */
    margin-bottom: 15px;       /* Space between paragraphs */
}

.section-heading {
    font-size: 24px;           /* Larger font size for section headings */
    color: #333;               /* Dark color */
    margin-top: 20px;          /* Space above the heading */
    margin-bottom: 10px;       /* Space below the heading */
}

.subsection-heading {
    font-size: 20px;           /* Font size for subsection headings */
    color: #333;               /* Dark color */
    margin-top: 15px;          /* Space above the subsection heading */
    margin-bottom: 8px;        /* Space below the subsection heading */
}

.definition-text {
    font-size: 16px;           /* Regular text size for definitions */
    color: #555;               /* Slightly lighter color */
    line-height: 1.6;          /* Line height for better readability */
    margin-bottom: 15px;       /* Space between paragraphs */
}
.content {
    display: none;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin-top: 10px;
}

.content p {
    line-height: 1.6;
}

/* Additional Styling for Links */
a {
    color: #007bff;            /* Blue color for links */
    text-decoration: none;     /* Remove underline from links */
}

a:hover {
    text-decoration: underline; /* Underline on hover */
}
/*LeaderBoard*/
.top-users {
    text-align: center; /* Center the title and table */
    margin: 20px; /* Add some margin */
}

/*Table*/

h2 {
    color: #333; /* Darker text color for the heading */
    margin-bottom: 20px; /* Space below heading */
}

table {
    width: 80%; /* Width of the table */
    margin: 0 auto; /* Center the table */
    border-collapse: collapse; /* Remove gaps between borders */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    background-color: #fff; /* White background for the table */
}

thead {
    background-color: #007BFF; /* Blue header background */
    color: rgb(2, 136, 58); /* White text color */
}

th, td {
    padding: 15px; /* Padding inside table cells */
    border: 1px solid #ddd; /* Light grey border */
}

th {
    text-align: left; /* Align header text to the left */
}

tr:hover {
    background-color: #f1f1f1; /* Light grey background on hover */
}

tr:nth-child(even) {
    background-color: #f9f9f9; /* Slightly different background for even rows */
}

.information {
    text-align: center; /* Center information text */
    margin: 20px 0; /* Vertical margin for spacing */
}
/*Result Css*/
.title-box h2 {
            margin: 0;
            font-size: 24px;
        }
        .body-results {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
        }
        h3, h4 {
            
            color: #007bff;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            background-color: #f1f1f1;
        }
        strong {
            display: block;
            margin-bottom: 5px;
        }
        em {
            color: #6c757d;
        }

/* Course Outline */
.course-outline-document {
    padding: 20px;
    max-width: 800px; /* Maximum width for the content */
    margin: 0 auto; /* Center the document */
    background-color: #fff; /* White background for contrast */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.course-section {
    margin-bottom: 20px;
    padding: 15px; /* Add some padding around each section */
    border: 1px solid #ddd; /* Light border around each section */
    border-radius: 4px; /* Rounded corners for sections */
    background-color: #f9f9f9; /* Light grey background for sections */
}

.course-section h3 {
    color: #333;
    font-size: 1.5em;
    margin-bottom: 5px;
}

.course-section p {
    margin: 5px 0;
    color: #555;
}

hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 20px 0;
}

/* General Popup Styling */
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.popup-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    padding: 20px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    text-align: left;
}

.popup h3 {
    margin-top: 0;
    font-size: 1.5em;
    color: #333;
}

.popup label {
    display: block;
    margin: 10px 0 5px;
    font-weight: bold;
}

.popup input[type="text"],
.popup textarea {
    width: calc(100% - 20px);
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-size: 1em;
}

.popup textarea {
    resize: vertical;
}

.popup-close {
    float: right;
    font-size: 1.2em;
    cursor: pointer;
}

.popup-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Button Styles */
.btn-primary {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-primary:hover {
    background: #0056b3;
}
.delete-button {
    background: #ff0000;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}
.delete-button:hover {
    background: #b30000;
}
.btn-secondary {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ccc;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-secondary:hover {
    background: #e2e2e2;
}

/*Dashboard*/
.statistics-graphs-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Space between the two items */
    height:fit-content;
}

.dashboard-box {
    flex: 1; /* Ensure both items take equal width */
    flex-direction: column; /* Align items vertically */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Align items vertically */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Use the parent element's text color */
    width: 200px; /* Ensure box width is consistent */
    height: 200px; /* Ensure box height is consistent */
    background-color: #f9f9f9;
    margin: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 10px;
}

.statistics-graphs, .statistics-item {
    text-align: center;
}

canvas {
    max-width: 100%;
    height: auto;
}


.dashboard-box img {
    width: 80px;
    height: 80px;
    margin-top: 40px;
}

.dashboard-box p {
    font-size: 18px;
    font-weight: bold;
    margin: 15px 0;
    color: #333;
}

.dashboard-box:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Ensure no underline on anchor tags within dashboard boxes */
.dashboard-box a {
    text-decoration: none; /* Remove underline from anchor tags */
    color: inherit; /* Maintain the color from parent */
    width: 100%; /* Make the anchor fill the box */
    height: 100%; /* Make the anchor fill the box */
    display: flex; /* Use flexbox for centering content */
    flex-direction: column; /* Align items vertically */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
}


/* Global Styles */
header {
    width: 100%;
}
html, body {
    overflow-x: hidden;  /* Disable horizontal scrolling */
    width: 100%;  /* Ensure the body and html elements take up the full viewport width */
    margin: 0;    /* Remove default margin that might cause unwanted overflow */
    padding: 0;   /* Remove default padding that might cause unwanted overflow */
}

/* Optional: Make sure elements with large content inside don't push the body horizontally */
* {
    box-sizing: border-box;  /* Prevent elements from going beyond their boundaries */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Full viewport height */
    width: 100%;
}

/* Main Body */
main {
    flex-grow: 1; /* Ensures main content takes up available space */
}

.body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9; /* Light background for the body */
    padding: 2rem; /* Using rem for flexibility */
    margin: auto; /* Center content */
    overflow-x: auto; /* Enable horizontal scrolling */
    width: 100%;
}

/* Admin Container */
.admin-container {
    position: relative;
    background-color: #f4f4f4;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 1rem; /* Relative spacing */
    overflow-x: auto; /* Enable horizontal scrolling for the container */
}


/* Top Bar */
.top-bar {
    display: flex;
    align-items: center;
    background-color: #333;
    color: white;
    padding: 1rem;
}
#admin-top-bar {
    width: calc(100% - var(--navbar-width-top));
    display: flex;
    align-items: center;
    background-color: #333;
    color: white;
    padding: 1rem;
    border-bottom-left-radius: 50px;
    margin-left: var(--navbar-width-top);
    transition: all 0.3s ease;
            /* animate only margin-left */
    /* optional if you’re using absolute or flex layouts */
}

#nav-toggle:checked~#admin-top-bar {
    width: calc(100% - var(--navbar-width-min));
    margin-left: var(--navbar-width-min);
            /* animate only margin-left */
}

/* If you want to reduce the space between main content and sidebar */
#nav-toggle:checked~#admin-top-bar .main-dashboard .admin-container {
    width: calc(100% - var(--navbar-width-top));
    padding-left: 5px;
    /* Adjust padding for minimized sidebar */
}

.logo-img, .logo {
    width: 70px; /* Set a fixed width for the logo to make the circle */
    height: 70px; /* Same as width to create a perfect circle */
    border-radius: 50%; /* Make the logo container a circle */
    object-fit: cover; /* Ensure the image fills the circle without distortion */
    background-color: #f0f0f0; /* Example background color (optional) */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensure the image is contained within the circle */
}

.top-bar .title-box {
    flex-grow: 1;
    text-align: center;
}
/* User Info */
.user-info {
    display: flex;
    align-items: center;
}

.username {
    margin-right: 1rem; /* Spacing to the right */
    padding: 0.5rem 1rem; /* Padding inside the box for spacing around the text */
    background-color: #17c400; /* Background color for the box (can be customized) */
    color: white; /* White text color */
    font-weight: bold; /* Bold text for emphasis */
    border-radius: 10px; /* Rounded corners */
    display: inline-block; /* Make the box inline with other content */
    text-transform: uppercase; /* Uppercase text */
    font-size: 16px; /* Set a font size */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover transitions */
    user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -moz-user-select: none;
}

.username:hover {
    background-color: #45a049; /* Darker green when hovered */
    transform: scale(1.05); /* Slightly enlarge the box on hover */
}


.level-exp {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the left */
    padding: 0.5rem 1rem; /* Padding inside the container */
    border-radius: 10px; /* Rounded corners for a smooth look */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

.level, .exp {
    margin-right: 1rem; /* Space between level and exp */
    font-size: 16px; /* Set font size */
    font-weight: 600; /* Make the text a bit bolder */
    color: #333; /* Dark text color for readability */
}

.level {
    background-color: #7a370a; /* Green background for the level */
    color: white; /* White text inside the level */
    padding: 0.3rem 0.6rem; /* Padding for the level box */
    border-radius: 5px; /* Rounded corners for the level box */
}

.exp {
    width: fit-content;
    background-color: #FF9800;
    color: white;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.8rem;
    /* optional: makes the text smaller too */
}

/* Optional: Hover effect to highlight level/exp boxes */
.level:hover, .exp:hover {
    opacity: 0.8;
    cursor: pointer; /* Add pointer cursor on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
    transition: all 0.3s ease;
}

/*button group*/
.button-group {
    display: flex;
    align-items: center;
}

/* Login Container */
.login-container {
    background-color: #046362;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Login Box */
.login-box {
    width: 300px;
    background-color: white;
    border: 1px solid #ccc;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.login-box input {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.login-box button {
    width: 100%;
    padding: 1rem;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 5px;
}

.login-box button:hover {
    background-color: #555; /* Darker shade on hover */
}

.logo-right img {
    height: 100%; /* Adjust the size as needed */
    margin-left: 1rem; /* Space from the login box */
}

/* Buttons */
.btn, .edit-btn {
    background-color: #555;
    color: #fff;
    margin-left: 1rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn:hover, .edit-btn:hover {
    background-color: #777;
}


/* Information Box */
.information {
    background-color: #f4f4f4;
    padding: 2rem;
    border-radius: 5px;
}

/* Dashboard Quiz */
.info-box-container {
    display: flex;
    justify-content: space-between;
    gap: 2rem; /* Responsive gap */
    padding: 2rem;
}

.info-box {
    background-color: #f4f4f4;
    padding: 1.5rem;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    flex: 1;
    margin: 0 0.5rem;
}

.info-box h3 {
    margin-top: 0;
}

.info-box p {
    margin: 1rem 0;
}

.info-btn {
    padding: 0.5rem 1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.info-btn:hover {
    background-color: #0056b3;
}

.info-box img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 1rem 0;
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 0.85rem;
}

th, td {
    border: 1px solid #ddd;
    padding: 4px 8px;
    text-align: left;
    word-wrap: break-word;
}

th {
    background-color: #f2f2f2; /* Header background color */
}

/* Pagination */
.pagination {
    margin: 2rem 0; /* Margin for pagination */
}

/* Footer */
footer {
    background-color: #333;
    text-align: center;
    padding: 1rem; /* Flexible padding */
    color: white;
    width: 100%;
    position: relative; /* Change from absolute to relative */
    margin-top: auto; /* Pushes the footer to the bottom when content is small */
    border-radius: 20px;

}

.bottom-bar {
    background-color: #333;
    color: white;
    padding: 1rem 2rem;
    text-align: center;
}

.contact-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-info div {
    margin: 0; /* Space between lines */
}

/* Question Containers */
.title-box {
    flex-grow: 1;
    text-align: center;
}

.body-question {
    padding: 2rem;
    max-width: 100%; /* Allows the container to shrink */
    margin: 0 auto;
    overflow-x: auto; /* Enables horizontal scrolling if needed */
}

.questions-container {
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;

    /* Set fixed size for the container */
    width: 800px;
    /* Adjust to the width you want */
    height: 300px;
    /* Adjust to the height you want */

    /* Add overflow property to handle excess content */
    overflow-y: auto;
    /* This will allow vertical scrolling if the content overflows */

    /* Optional: Add border, padding, and background for better visibility */
    border: 2px solid #ccc;
    padding: 20px;
    background-color: #f9f9f9;
}

.question {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 1.5rem;
    margin: 1rem 0;
    background-color: #f9f9f9;
    overflow-wrap: break-word; /* Ensures long questions break into the next line */
    user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -moz-user-select: none;
}

.btn {
    background-color: #555;
    color: white;
    border: none;
    padding: 1rem; /* Responsive padding */
    border-radius: 5px;
    cursor: pointer;
    margin-top: 2rem;
}

.btn:hover {
    background-color: #777;
}
/* Add hover effect for both buttons */
.btn:hover, .edit-btn:hover {
    background-color: #777;
}



/* Admin Pages */
.admin-container {
    margin-left: 35px;
    background-color: #f4f4f4;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.admin-container h3 {
    margin-top: 0;
}

.admin-container ul {
    list-style-type: none;
    padding: 0;
}

.admin-container li {
    padding: 0.5rem;
    border-bottom: 1px solid #ccc;
}

.admin-container li:last-child {
    border-bottom: none;
}

/* Logout button */
.logout-button {
    background-color: #ff0000; /* Red background */
    color: white;
    border: none;
    padding: 1rem; /* Responsive padding */
    border-radius: 5px;
    cursor: pointer;
    margin-top: 2rem; /* Space from the top */
    margin-left: 20px; /* Space between the logout button and other buttons */
}

/* Hover effect */
.logout-button:hover {
    background-color: #d32f2f; /* Darker red on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Focus effect (when the button is clicked or focused by keyboard) */
.logout-button:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 2px #ff4081; /* Custom focus shadow */
}

/* User Profile */
.account-details-container {
    margin: 20px auto;
    padding: 25px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.account-details-container:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    background-color: #f1f1f1;
}

.account-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.account-details p {
    font-size: 1.1em;
    margin: 5px 0;
    color: #555;
    line-height: 1.6;
}

.account-details p strong {
    font-weight: 600;
    color: #333;
}

.account-details p span {
    color: #777;
}

/* Add styling for the username, as it's a key piece of information */
.account-details p.username {
    font-size: 1.2em;
    font-weight: 700;
    color: #007bff;
    text-transform: uppercase;
}

.main-dashboard {
    margin-left: 20px;
    transition: margin-left 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

#nav-toggle:checked~.main-dashboard {
    margin-left: var(--navbar-width-min);
}


/* Adjust the main content when sidebar is minimized */
#nav-toggle:checked~#main-content {
    margin-left: var(--navbar-width-min);
    transition: margin-left 0.3s ease;
}

#main-content {
    transition: margin-left 0.3s ease;
    margin-left: var(--navbar-width);
    /* Default to full width */
}

/* If you want to reduce the space between main content and sidebar */
#nav-toggle:checked~#main-content .main-dashboard .admin-container {
    padding-left: 5px;
    /* Adjust padding for minimized sidebar */
}

/*SideBar*/
:root {
    --background: #ffffff;
    --navbar-width: 256px;
    --navbar-width-top: 300px;
    --navbar-width-min: 80px;
    --navbar-dark-primary: #333;
    --navbar-dark-secondary: #444;
    --navbar-light-primary: #f5f6fa;
    --navbar-light-secondary: #8392a5;
}

html,
body {
    margin: 0;
    background: var(--background);
}

#nav-toggle:checked~#nav-header {
    width: calc(var(--navbar-width-min) - 16px);
}

#nav-toggle:checked~#nav-content,
#nav-toggle:checked~#nav-footer {
    width: var(--navbar-width-min);
}

#nav-toggle:checked~#nav-header #nav-title {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s;
}

#nav-toggle:checked~#nav-header label[for=nav-toggle] {
    left: calc(50% - 8px);
    transform: translate(-50%);
}

#nav-toggle:checked~#nav-header #nav-toggle-burger {
    background: var(--navbar-light-primary);
}

#nav-toggle:checked~#nav-header #nav-toggle-burger:before,
#nav-toggle:checked~#nav-header #nav-toggle-burger::after {
    width: 16px;
    background: var(--navbar-light-secondary);
    transform: translate(0, 0) rotate(0deg);
}

#nav-toggle:checked~#nav-content .nav-button span {
    opacity: 0;
    transition: opacity 0.1s;
}

#nav-toggle:checked~#nav-content .nav-button .fas {
    min-width: calc(100% - 16px);
}

#nav-toggle:checked~#nav-footer #nav-footer-avatar {
    margin-left: 0;
    left: 50%;
    transform: translate(-50%);
}

#nav-toggle:checked~#nav-footer #nav-footer-titlebox,
#nav-toggle:checked~#nav-footer label[for=nav-footer-toggle] {
    opacity: 0;
    transition: opacity 0.1s;
    pointer-events: none;
}

#nav-bar {
    position: fixed;
    left: 1vw;
    top: 1vw;
    height: calc(100% - 2vw);
    background: var(--navbar-dark-primary);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    color: var(--navbar-light-primary);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    overflow: hidden;
    user-select: none;
}

#nav-bar hr {
    margin: 0;
    position: relative;
    left: 16px;
    width: calc(100% - 32px);
    border: none;
    border-top: solid 1px var(--navbar-dark-secondary);
}

#nav-bar a {
    color: inherit;
    text-decoration: inherit;
}

#nav-bar input[type=checkbox] {
    display: none;
}

#nav-header {
    position: relative;
    width: var(--navbar-width);
    left: 16px;
    width: calc(var(--navbar-width) - 16px);
    min-height: 80px;
    background: var(--navbar-dark-primary);
    border-radius: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    transition: width 0.2s;
}

#nav-header hr {
    position: absolute;
    bottom: 0;
}

#nav-title {
    font-size: 1.5rem;
    transition: opacity 1s;
}

label[for=nav-toggle] {
    position: absolute;
    right: 0;
    width: 3rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#nav-toggle-burger {
    position: relative;
    width: 16px;
    height: 2px;
    background: var(--navbar-dark-primary);
    border-radius: 99px;
    transition: background 0.2s;
}

#nav-toggle-burger:before,
#nav-toggle-burger:after {
    content: "";
    position: absolute;
    top: -6px;
    width: 10px;
    height: 2px;
    background: var(--navbar-light-primary);
    border-radius: 99px;
    transform: translate(2px, 8px) rotate(30deg);
    transition: 0.2s;
}

#nav-toggle-burger:after {
    top: 6px;
    transform: translate(2px, -8px) rotate(-30deg);
}

#nav-content {
    margin: -16px 0;
    padding: 16px 0;
    position: relative;
    flex: 1;
    width: var(--navbar-width);
    background: var(--navbar-dark-primary);
    box-shadow: 0 0 0 16px var(--navbar-dark-primary);
    direction: rtl;
    overflow-x: hidden;
    transition: width 0.2s;
}

#nav-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#nav-content::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background-color: #D62929;
}

#nav-content-highlight {
    position: absolute;
    left: 16px;
    top: -70px;
    width: calc(100% - 16px);
    height: 54px;
    background: var(--background);
    background-attachment: fixed;
    border-radius: 16px 0 0 16px;
    transition: top 0.2s;
}

#nav-content-highlight:before,
#nav-content-highlight:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 16px 16px var(--background);
}

#nav-content-highlight:after {
    top: 100%;
    box-shadow: 16px -16px var(--background);
}

.nav-button {
    position: relative;
    margin-left: 16px;
    height: 54px;
    display: flex;
    align-items: center;
    color: var(--navbar-light-secondary);
    direction: ltr;
    cursor: pointer;
    z-index: 1;
    transition: color 0.2s;
}

.nav-button span {
    transition: opacity 1s;
}

.nav-button .fas {
    transition: min-width 0.2s;
}

.nav-button:nth-of-type(1):hover {
    color: var(--navbar-dark-primary);
}

.nav-button:nth-of-type(1):hover~#nav-content-highlight {
    top: 16px;
}

.nav-button:nth-of-type(2):hover {
    color: var(--navbar-dark-primary);
}

.nav-button:nth-of-type(2):hover~#nav-content-highlight {
    top: 70px;
}

.nav-button:nth-of-type(3):hover {
    color: var(--navbar-dark-primary);
}

.nav-button:nth-of-type(3):hover~#nav-content-highlight {
    top: 124px;
}

.nav-button:nth-of-type(4):hover {
    color: var(--navbar-dark-primary);
}

.nav-button:nth-of-type(4):hover~#nav-content-highlight {
    top: 178px;
}

.nav-button:nth-of-type(5):hover {
    color: var(--navbar-dark-primary);
}

.nav-button:nth-of-type(5):hover~#nav-content-highlight {
    top: 232px;
}

.nav-button:nth-of-type(6):hover {
    color: var(--navbar-dark-primary);
}

.nav-button:nth-of-type(6):hover~#nav-content-highlight {
    top: 286px;
}

.nav-button:nth-of-type(7):hover {
    color: var(--navbar-dark-primary);
}

.nav-button:nth-of-type(7):hover~#nav-content-highlight {
    top: 340px;
}

.nav-button:nth-of-type(8):hover {
    color: var(--navbar-dark-primary);
}

.nav-button:nth-of-type(8):hover~#nav-content-highlight {
    top: 394px;
}
.nav-button:nth-of-type(9):hover {
    color: var(--navbar-dark-primary);
}

.nav-button:nth-of-type(9):hover~#nav-content-highlight {
    top: 448px;
}

#nav-bar .fas {
    min-width: 3rem;
    text-align: center;
}

#nav-footer {
    position: relative;
    width: var(--navbar-width);
    height: 54px;
    background: var(--navbar-dark-secondary);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    z-index: 2;
    transition: width 0.2s, height 0.2s;
}

#nav-footer-heading {
    position: relative;
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
}

#nav-footer-avatar {
    position: relative;
    margin: 11px 0 11px 16px;
    left: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    transform: translate(0);
    transition: 0.2s;
}

#nav-footer-avatar img {
    height: 100%;
}

#nav-footer-titlebox {
    position: relative;
    margin-left: 16px;
    width: 10px;
    display: flex;
    flex-direction: column;
    transition: opacity 1s;
}

#nav-footer-subtitle {
    color: var(--navbar-light-secondary);
    font-size: 0.6rem;
}

#nav-footer-toggle:checked+#nav-footer {
    height: 30%;
    min-height: 54px;
}

#nav-footer-toggle:checked+#nav-footer label[for=nav-footer-toggle] {
    transform: rotate(180deg);
}

label[for=nav-footer-toggle] {
    position: absolute;
    right: 0;
    width: 3rem;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

#nav-footer-content {
    margin: 0 16px 16px 16px;
    border-top: solid 1px var(--navbar-light-secondary);
    padding: 16px 0;
    color: var(--navbar-light-secondary);
    font-size: 0.8rem;
    overflow: auto;
}

#nav-footer-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#nav-footer-content::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background-color: #D62929;
}



/* Media Queries */
@media (max-width: 768px) {
    .card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin-right: 8px;
            width: 100%;
            min-height: 450px;
        }
/* Optional: Make sure elements with large content inside don't push the body horizontally */
    * {
        box-sizing: content-box;
        /* Prevent elements from going beyond their boundaries */
    }
    /* Adjust select element width for mobile */
        select {
            width: 100%;
                font-size: 13px;
                margin: 5px;
        }
    
        /* Option styles within select */
        option {
            font-size: 1.1rem;
            /* Larger font size for options */
            padding: 12px;
            /* Increase padding for touch targets */
        }
    
        /* You can also add other styles like background colors or borders */
        select:focus {
            border: 2px solid #007BFF;
            /* Change border color when focused */
            outline: none;
            /* Remove default outline */
        }
    
        /* Styling the dropdown for better user experience */
        option:selected {
            background-color: #007BFF;
            /* Highlight selected option */
            color: #ffffff;
            /* White text for selected option */
        }
    input[type="text"],
        input[type="email"],
        input[type="password"] {
            width: auto;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    .about-section {
            padding: 35px;
            text-align: center;
            background-color: #474e5d;
            color: white;
            border-radius: 20px;
        }
    h1 {
            color: #1c8300;
            margin-bottom: 20px;
            background-color: white;
            padding: 10px;
            border-radius: 10px;
            font-size: 20px;
            /* Smaller font size */
        }
    .container h2 {
            color: #333;
            margin-bottom: 20px;
            background-color: white;
            padding: 10px;
            border-radius: 10px;
            font-size: 23px;
                    /* Smaller font size */
        }
    .container {
            height: 400px;
            width: 200px;
            margin: 10px auto;
            padding: 10px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    .admin-container {
        padding: 1rem;
        margin: 0.5rem;
        border-radius: 0;
        /* Optional: remove rounded corners for mobile */
        box-shadow: none;
        /* Optional: simplify for performance */
        overflow-x: auto;
    }
    .top-bar {
        width: 93%;
        flex-direction: column; /* Stack on small screens */
    }

    .button-group {
        height: 70px;
        display: grid; /* Use grid layout instead of flex */
        grid-template-columns: repeat(3, 1fr); /* Create 3 columns, evenly distributed */
        gap: 15px; /* Space between the buttons */
        justify-items: center; /* Center the buttons horizontally within each grid cell */
    }

    .button-group .btn {
        width: 100%; /* Make buttons full width inside grid columns */
        max-width: 200px; /* Limit the width of each button */
        text-align: center; /* Center text inside the buttons */
    }
    .btn, .edit-btn {
        width: 80px; /* Set a fixed width for buttons */
        margin: 0.5rem 0.5rem; /* Space between buttons */
        /* You can add padding here if needed, for example: */
        padding: 0.5rem; /* Add padding for better button appearance */
    }
    table {
        font-size: 0.875rem; /* Smaller font size for tables */
    }

        .info-box {
            background-color: #f1f1f1;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            flex: 1;
            margin: 0 0.5rem;
            padding: 0%;
        }

    .login-box {
        padding: 1.5rem; /* Less padding on mobile */
        width: 75%; /* Slightly wider on mobile */
    }

        .body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f9f9f9;
            padding: 1rem;
            margin: auto;
            overflow-x: auto;
            width: 100%;
        }
        .info-box-container {
            display: flex;
            justify-content: space-between;
                padding: 0rem;
        }

    .btn, .edit-btn {
        padding: 0.5rem; /* Smaller padding for smaller devices */
        font-size: 0.8rem; /* Smaller font size */
        margin-left: 0.5rem; /* Reduce margin to fit better */
    }
    html, body {
        overflow-x: hidden; /* Prevent horizontal scrolling */
      }



    h3 {
        font-size: 1.1rem; /* Smaller heading */
    }

    .info-box-container {
        flex-direction: column; /* Stack boxes vertically */
    }

    .btn {
        padding: 0.75rem;
        margin-top: 1rem;
    }

    .logo {
        
        max-height: 100px; /* Smaller logo for mobile */
    }
    .logo-img {
        display: block; /* Make sure the image is block-level */
        margin-left: auto;
        margin-right: auto;
        text-align: center; /* Ensure it aligns within its parent */
      }

    /* Adjust other elements as needed */
    .admin-container,
    .login-box {
        width: 300px;
        padding: 1rem; /* Further reduce padding */
    }
    .login-box input {
        display: block;
        width: 200px;
        margin-bottom: 1rem;
        padding: 1rem;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .login-box button {
        width: 200px;
        padding: 1rem;
        background-color: #333;
        color: white;
        border: none;
        border-radius: 5px;
    }

    .question {
        padding: 1rem; /* Reduce padding for questions */
        margin: 0.5rem 0; /* Adjust margin */
    }

    .login-box {
        padding: 1.5rem; /* Less padding on mobile */
        width: 90%; /* Use a percentage for better responsiveness */
        max-width: 400px; /* Limit the width on larger screens */
        margin: auto; /* Center the login box */
    }

    .login-container {
        width: 500px; /* Use full width for mobile */
        margin: auto; /* Center horizontally */
        display: flex;
        justify-content: center; /* Horizontally center content */
        align-items: center; /* Vertically center content */
        height: 100%; /* Take up full viewport height */
        padding: 2rem; /* Add some padding around the container */
    }

    .logo-right img {
        display: none;
    }
    /* User Info */
    .user-info {
        flex-direction: column; /* Stack vertically */
        align-items: flex-start; /* Align items to the left */
        gap: 10px; /* Add some space between the items */
    }

    .username {
        font-size: 14px; /* Smaller font size for username */
        margin-bottom: 0.5rem; /* Add margin below the username */
        align-items: center;

    }


    .level, .exp {
        margin-right: 0; /* Remove right margin */
        margin-bottom: 0.5rem; /* Add margin below each item */
        font-size: 14px; /* Smaller font size for level and exp */
    }

    .level, .exp {
        width: 85%; /* Make the level/exp containers full-width */
        text-align: center; /* Center text in the level/exp boxes */
    }

    /* Optional: Reduce shadow and transition effects on smaller screens */
    .username:hover, .level:hover, .exp:hover {
        transform: none; /* Remove hover scaling on small screens */
        box-shadow: none; /* Remove box-shadow for simplicity */
    }
    .top-bar {
        width: 100%;
        display: flex;
        justify-content: space-between; /* Space out the user-info and button group */
        align-items: center;
        position: relative; /* To allow positioning of the logout button */
    }

    /* Position the logout button at the top-right corner of the top bar */
    .logout-button {
        position: absolute; /* Absolute positioning relative to the top-bar */
        top: 10px; /* 10px from the top */
        right: 10px; /* 10px from the right */
        background-color: #f44336; /* Red background for the button (can change) */
        color: white;
        border: none;
        padding: 0.75rem;
        margin-top: 1rem;
        cursor: pointer;
        z-index: 10; /* Ensure the button is on top of other elements */
    }

    /* Optional: Button hover effect */
    .logout-button:hover {
        background-color: #d32f2f; /* Darker red for hover effect */
    }
    .account-details-container {
        padding: 15px;
    }

    .account-details p {
        font-size: 1em;
    }
        .questions-container {
            width: 100%;
            /* Full width on small screens */
            padding: 10px;
            /* Reduced padding */
        }
    
        .question {
            padding: 1rem;
            /* Reduced padding inside each question */
            margin: 0.5rem 0;
            /* Reduced margin between questions */
        }
        
}