#suggestPromptButtonCommander, #suggestPromptButtonGeneral {
    border: none; /* Remove border */
    color: white; /* White text */
    padding: 10px 20px; /* Some padding */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Make the button inline */
    font-size: 16px; /* Increase font size */
    margin: 10px 2px; /* Some margin */
    cursor: pointer; /* Pointer/hand icon on hover */
    border-radius: 8px; /* Rounded corners */
    transition-duration: 0.4s; /* Smooth transition effect for hover */
    min-width: 250px; /* Minimum width */
    background-image: linear-gradient(135deg, #66bb6a 0%, #4caf50 50%, #388e3c 100%); /* Cool green gradient */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

#suggestPromptButtonCommander:hover, #suggestPromptButtonGeneral:hover {
    background-image: linear-gradient(135deg, #77cc7a 0%, #5cbf60 50%, #3c9e43 100%); /* Lighter green gradient on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover for a lifting effect */
    color: white; /* Maintain white text color */
}

#quiz-description-section {
    margin-bottom: 10px;
 font-size: 15px; 
}
.tooltip-icon {
 display: inline-block;
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 25px;
 height: 25px;
 text-align: center;
 line-height: 24px;
 cursor: pointer;
 vertical-align: middle;
 margin-left: 5px;
 position: absolute;
 top: 0;
 right: 0;
}

.tooltip-text {
 display: none;
 position: absolute;
 bottom: 50%; 
 left: auto; 
 right: 100%; /* Align it to the left of the tooltip icon */
 transform: translateY(-50%); /* Center align vertically to the icon */
 background-color: #333;
 color: #fff;
 padding: 7px 10px;
 border-radius: 5px;
 white-space: nowrap;
 font-size: 12px;
 z-index: 1;
 margin-right: 10px; /* Give a little space between the tooltip text and the icon */
 opacity: 0;
 transition: opacity 0.2s; /* Transition effect */
 pointer-events: none;  /* Ensures that the tooltip does not interfere with other elements */
}

/* Video Section - Overall Container */
.video-section {
 width: 100%;
 text-align: center;
 margin: 20px 0;
 display: flex;
 flex-direction: column;
 align-items: center;
}

/* Video Title and Note Styling */
.video-header h2 {
 font-size: 24px;
 font-weight: bold;
 margin-bottom: 8px;
}

.video-header p {
 font-size: 16px;
 color: #777;
}

/* Flex container for centering the video */
.video-wrapper {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
}

/* Styles for the video's container */
.video-container {
 position: relative;
 overflow: hidden;
 width: 100%;
 max-width: 560px;
 padding-bottom: 56.25%; /* 16:9 aspect ratio */
 border-radius: 15px;
}

/* Styles for the video (iframe) itself */
.video-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 15px;
}





.tooltip-icon::before {
 content: "";
 position: absolute;
 top: 50%;
 right: -8px; /* Adjust based on triangle size */
 border-width: 5px 5px 5px 0;
 border-style: solid;
 border-color: transparent #333 transparent transparent;
 transform: translateY(-50%);
}

.tooltip-icon:hover .tooltip-text {
 display: block;
 opacity: 1;
}

#button-dashboard, #select-all-button, #assign-quiz-button, .hide-qr-btn {
background-color: #333;
color: #fff;
padding: 0.4rem 1.2rem;
border: none;
border-radius: 4px;
cursor: pointer;
}

#button-dashboard:hover, #select-all-button:hover , #assign-quiz-button:hover {
background-color: #555;
}

.show-qr-btn, .delete-code-btn {
background-color: #1E90FF;
color: #fff;
padding: 0.4rem 1.2rem;
border: none;
border-radius: 4px;
cursor: pointer;    
}
.show-qr-btn:hover, .delete-code-btn:hover {
 background-color: #339CFF;
}

.show-qr-btn {
 display: none;
}


.classroom-template h2 {
 margin-bottom: 0px;
    text-align: center;
}

h3.student-count {
 text-align: center;
}

#create-assignment-button {
background: #32CD32;
 border: none;
 color: white;
 padding: 10px 24px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 margin: 2px 2px;
 cursor: pointer;
 transition: all 0.3s ease;
     border-radius: 5px;
}

#create-assignment-button:hover {
background-color: #4ADF4A;
}

#create-assignment-button {
 width: 100%;
}

.student-list-item button {
display: flex;
 align-items: center;
 justify-content: center;
 background-color: #333;
 border: none;
 color: #ffffff;
 padding: 10px;
 cursor: pointer;
 border-radius: 50%;
 font-size: 20px;
 font-weight: bold;
 width: 30px;
 height: 30px;
 margin-left: 10px;
}

.student-list-item button:hover {
background-color: #555;
}

.student-item-wrapper {
display: flex;
justify-content: space-between;
width: 100%;
}


.loading-spinner {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}

.spinner {
border: 8px solid #f3f3f3;
border-top: 8px solid #32CD32;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% {
 transform: rotate(0deg);
}
100% {
 transform: rotate(360deg);
}
}





/* Wordlist assignment section */
#signed-in-message {
display: flex;
justify-content: space-between;
align-items: center;
}

#wordlist-select-form {
 display: initial;
 max-width: 400px;
 background-color: #fff;
}


/* Manage classrooms section */
#classrooms ul {
list-style: none;
padding: 0;
}

#classrooms li {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}


.overview-container {
 display: flex;
}

.overview-left {
width: 50%;
border-right: 1px solid #ddd;
}

.overview-right {
 width: 100%;
 position: relative;
}



/* Assign quiz section */
.assignment-left, .assignment-right {
 width: 50%;
 padding: 20px;
}

.assignment-left {
border-right: 1px solid #ddd;
}

.assignment-card {
 color: #32CD32;
 text-decoration: none;
 padding: 10px;
 border-radius: 10px;
 border: 1px solid #32CD32;
 font-size: 16px;
 position: relative;
 margin-bottom: 10px;
}

.assignment-card:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


.delete-button {
position: absolute;
top: 10px;
right: 10px;
color: #ff0000;
background-color: #f9f9f9;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 14px;
font-weight: 900;
line-height: 18px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}

.view-details-button {
background: #32CD32;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 2px 2px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 5px;
}

.view-details-button:hover {
background-color: #4ADF4A;
}

.assignment-name {
font-size: 20px;
margin-bottom: 10px;
}

.assignment-due-date {
color: #333;
}

/* Section for each assignment type */
.assignment-section {
 border-radius: 5px;
 margin-bottom: 20px;
 width: 100%;
}

#student-list {
list-style: none;
padding: 0;
}

.profile-dashboard {
    width: 85%;
    margin: auto;
}

.delete-btn-create, .delete-btn-ui {
    background-color: #ff4d4d;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 8px;
}

.delete-btn-create:hover, .delete-btn-ui:hover {
    background-color: #cc0000; /* Darker red on hover */
}


/* Responsive styles */
@media (max-width: 768px) {
.container {
 width: 100%;
}
}


#admin-dashboard-main {
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s, visibility 0.3s;
 position: relative;
 width: 85%;
 margin: auto;
 margin-bottom: 200px;
 min-height: 60vh;
}


#admin-dashboard-main.loaded {
opacity: 1;
visibility: visible;
}



.tab-nav {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #ddd;
}

#tab-1.active, #tab-1:hover {
    color: #4196E0; 
}

#tab-2.active, #tab-2:hover {
    color: #4196E0; 
}

#tab-3.active, #tab-3:hover {
    color: #4196E0;
}

#tab-4.active, #tab-4:hover {
    color: #4196E0; 
}


#tab-5.active, #tab-5:hover {
    color: #4196E0; 
}

.tab-container {
padding: 16px;
   position: relative;
 background-color: #f9f9f9;
 box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.8);
 border-radius: 0 0 10px 10px;
}

.tab-content {
display: none;
}

.tab-content.active {
display: block;
}

#classrooms-container {
max-width: 800px;
margin: 20px auto;
}

.classroom {
padding: 20px;
border-radius: 5px;
background-color: #f9f9f9;
margin-bottom: 20px;
}

.classroom h3 {
margin-top: 0;
text-align: center;
}

.classroom h2 {
margin-bottom: 0;
}

.classroom ul {
padding: 0;
}

.student-list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
position: relative;
border-bottom: 1px solid #ddd;
}

.student-list-item:last-child::after {
display: none;
}

/* Classrooms list styles */
#classrooms {
margin: 0 auto;
padding: 0 15px;
border-radius: 5px;
 display: flex;
 align-items: center; /* vertically aligns the content in the center */
 flex-wrap: wrap; /* allows wrapping to the next line if container width is exceeded */
margin-bottom: 25px;
}

#classrooms > * { /* targets all direct children of #classrooms */
 margin-right: 10px; /* adds some spacing between each element */
}

#classroom1-qr {
position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 z-index: 500;
}


#classrooms ul li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #eee;
}

#classrooms ul li:last-child {
   border-bottom: none;
 color: #1E90FF;
 font-weight: bold;

}

.classroom-code {
font-weight: bold;
 color: #333;
 font-style: italic;
 text-decoration: underline;
}

.generate-code-btn {
font-size: 14px;
padding: 5px 10px;
border: none;
border-radius: 3px;
background-color: #1E90FF;
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease;
}

.generate-code-btn:hover {
background-color: #339CFF;
}


@media screen and (max-width: 800px) {
 
 .overview-container {
     display: block;
 }
 .overview-left {
     width: 100%;
   border-right: none;
 }
 .overview-right {
     width: 100%;
 }
 
.tab-nav {
 white-space: nowrap;
}

.tab-button {
 flex-grow: initial;
 padding: 12px 8px;
 font-size: .8rem;
}
}

#classrooms-container {
 width: 100%;
 margin-top: 0;
}

.classroom {
 box-shadow: none;
}


/* Container for assignments */
.assignments-container-main {
 display: flex;
 justify-content: space-between;
}

.scrollable {
 overflow-y: scroll;
 max-height: 500px;
 padding: 15px;
}

.assignments-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 max-width: 1200px;
 margin: 0 auto;
 padding: 20px;
}

/* Responsive media queries */
@media screen and (max-width: 1024px) {
 .scrollable {
 padding: 0px;
}
.tooltip-text {
     position: fixed; /* or 'absolute' if you want it relative to the parent but centered in viewport */
     top: 50%;
     left: 50%;
     right: auto;
     bottom: auto;
     transform: translate(-50%, -50%);
     z-index: 1000; /* Keep it above other elements */
     width: 80%; /* Use a reasonable width like 80% of the viewport */
     text-align: center;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Optional: to give it a bit of depth */
 }

 .tooltip-icon::before {
     display: none; /* Hide the triangle on mobile as it won't align correctly with a centered tooltip */
 }   
 
 
 
 .assignment-container,
 .assignments-container {
     flex-basis: 100%;
     margin-bottom: 20px;
 }
#classrooms li {
 display: block;
 margin-bottom: 10px;
}

#classrooms ul li {
 display: block;
   
}

.assignment-name {
 font-size: 100%;
 margin-bottom: 10px;
}


 .assignments-container-main {
     flex-direction: column;
 }

 .assignment-left, 
 .assignment-right, 
 .assignment-middle {
     width: 100%;
     padding: 0px;
 }
 
 .assignment-left {
 border-bottom: 1px solid #ddd;
 border-right: 0px;
 margin-bottom: 30px;
 padding-bottom: 30px;
 }

 #admin-dashboard-main {
     width: 98%;
     margin-bottom: 50px;
 }
}

@media screen and (min-width: 1025px) {
 .assignment-container,
 .assignments-container {
     flex-basis: calc(33% - 20px);
 }
}

#student-list li {
 list-style: none;
 margin-bottom: 5px;
 display: flex;
 align-items: center;
}

#student-list input[type="checkbox"] {
 margin-right: 5px;
}

#student-list label {
 font-size: 16px;
}

/* Unordered lists for assignment items */
ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

/* Media query for larger screens */
@media screen and (min-width: 768px) {
 .assignments-container {
     flex-direction: row;
 }

 .assignment-section {
     flex: 1;
     margin: 0 10px;
     margin-bottom: 20px;
 }
}