body {
     font-family: 'Arial Narrow', Arial, sans-serif;
     background-color: #EEE2DC;
     margin: 0;
     padding: 0;
 }
 .table-container {
     max-height: 2000px; /* Set the maximum height for the container */
     overflow-y: auto; /* Add a vertical scroll for overflow content */
     border: 1px solid #ddd; /* Add a border for better visibility */
 }

 .container {
     display: flex;
     justify-content: space-between;
     flex-direction: column;
 }

 .container1 {
     width: 100%;
     margin: 10px;
     max-height: 2000px; /* Set the maximum height for the container */
     overflow-y: auto; /* Add a vertical scroll for overflow content */
     border: 1px solid #ddd; /* Add a border for better visibility */
     padding:20px;
     }
 

 .container2 {
     width: 100%; /* Adjust the width as needed */
     margin: 10px;
     padding:20px;
 }

 h1{
     color: #123C69;
 }

/*#student_allocation*/
 h2 {
     color: #AC3B61;
     
 }
 label {
     color: #123C69;
     
 }
 h3{
    color: #123C69;
    
}
 input{
     color: #000000;
     font-family: 'Book-Antiqua', Times-New-Roman, sans-serif;
     border: 1px solid #AC3B61;
     max-width: 12cm;
     width: 98%;
     box-sizing: border-box; /* Includes padding and border in the width */
 }

 select{
    color: #000000;
    font-family: 'Book-Antiqua', Times-New-Roman, sans-serif;
    border: 1px solid #AC3B61;
    max-width: 10cm;
    width: 98%;
    box-sizing: border-box; /* Includes padding and border in the width */
 }
 table { 
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;

}

 form {
     width: 98%; /* Adjust the width as needed */
     padding: 20px;
     background-color: #EEE2DC;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 20px;
     border: 3px solid #AC3B61;
     padding: 0px;
     text-align: left;

 }

 th, td {
     padding: 2px;
     text-align: left;
     border: 1px solid #ddd;
     font-size: 16px;
 }

 th {
     background-color: #123C69;
     color: #fff;
 }

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

 .edit-link {
     display: inline-block;
     text-decoration: none;
     color: #fff;
     padding: 1px 3px;
     border-radius:4px;
     background-color: #AC3B61;
     transition: background-color 0.3s;
 }

 .edit-link:hover {
     background-color: #123C69;
 }

 .edit-icon {
     width: 20px;
     height: 20px;
     margin-right: 3px;
     /* Adjust the path to your IconsFolder and the specific icon file */
     background: url('IconsFolder/EditIcon5.png') center/cover;
     display: inline-block;
     vertical-align: middle;
 }
section{
    margin-left :5%;
}
/* .student_detail_section */
 input.search-box {
     padding: 8px;
     border: 1px solid #AC3B61;
     border-radius: 4px;
     margin-bottom: 5px;
     font-family: 'Arial Narrow', Arial, sans-serif;
     font-size: 16px;
     width: 40%;
 }

    /* Responsive Styles */

form section {
 grid-column: span 1; 
 margin-bottom: 10px;
 padding: 2px;
}

section{
    margin :2%;
}


 label {
 display: block;
 margin-bottom: 5px;
 font-weight: bold;
}

form input,
form select,
form textarea {
 width: 100%;
 padding: 8px;
 margin-bottom: 8px;
 border: 1px solid #ddd;
 border-radius: 4px;
 width: 100%;

}

form input[type="submit"] {
 background-color: #3498db;
 color: #fff;
 padding: 12px;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 font-size: 16px;
 transition: background-color 0.3s ease;
 width: 80%;
}

.submit-btn:hover {
    background-color: #AC3B61;
    color:#FFFFFF;
   }
   .submit-btn {
    /* Add any other styles you want for the button */
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFFFFF;
    color: #123C69;
    padding: 12px;
    border:solid #123C69; ;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    width: 110px;
    height: auto;
           
   }
   
.icon {
 width: 50px; /* Adjust the width as needed */
 height: 50px; /* Adjust the height as needed */
 margin-bottom: 5px; /* Optional: Add some spacing between the icon and text */



}
h1 {
     text-align: center; /* Center the text horizontally */
     margin-top: 2px; /* Adjust the top margin as needed */
     font-size: 2em; /* Adjust the font size as needed */
     padding: 2px; /* Padding for better visibility */
     font-size: 2em; /* Adjust the font size as needed */
    color:#123C69; /* Text color */
     font-family: 'Arial Black', Arial, sans-serif;
 }


h3 {
    display: block;
    margin-right: 2px;
    padding: 1px; 
}

br + * {
    margin-top: 10px; /* Adjust the value as needed */
}






.info-field {
    margin-bottom: 5px;
}


.search-options {
    border: 3px solid #123C69;
    padding:0px;
    border-radius: 0px;
    background-color: #EEE2DC;
    text-align: center;
    width: 25%;
    height: auto; 
    font-size:14px;  
}

.radio-group {
    display: block;
    flex-direction: row;
    align-items: center;
}

.radio-option {
    margin-bottom: 2px;
  
    align-items: center;
}

.testline {
    display: flex;
}
.searchdiv{
    width: 100%;
}
.button-container {
    display: flex;
    gap: 20px;/* Adjust this property to change the spacing */
  }
  .sameline-container {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    
}
.table-container {
    width: 95%; /* Adjust the width as needed */
    margin: 1px;
    max-height: 1000px; /* Set the maximum height for the container */
    overflow-y: auto; /* Add a vertical scroll for overflow content */
}

.studenttable-container {
    width: 100%; /* Adjust the width as needed */
    margin: 1px;
   
}
.bigger-width{
    width: 80%; 
}
    
@media (max-width: 768px) {
    .search-options {
        border: 3px solid#123C69;
        padding: 0px;
        border-radius: 0px;
        background-color: #EEE2DC;
        text-align: center;
        width: 20%;
        height: auto; 
        font-size:11px;  
    }

    .print-icon {
        width: 50%;
        height: 50%;
         }

         .receipt-icon {
            width: 50%;
            height: 50%;
             }

    .receipt-link {
        font-size: 11px;
        width: 20%;       
    }

    .print-link{
        font-size: 11px;
        width: 20%;       
    }

    .receipt-link2 {
        font-size: 11px;
        width: 20%;       
    }

    .icon {
        width: 50%; /* Adjust the width as needed */
        height: 50%; /* Adjust the height as needed */
        margin-bottom: 5px; /* Optional: Add some spacing between the icon and text */
       }

       .submit-btn {
        /* Add any other styles you want for the button */
    
        width: 10%;
        height:auto;
       font-size: 11px;
               
       }
       .delete-btn {
        /* Add any other styles you want for the button */
    
        width: 10%;
        height:auto;
       font-size: 11px;
               
       }


 table {
     font-size: 11px;
 }
.container {
 flex-direction: column; /* Change to a one-column layout for narrow devices */
}

.container2,
.container1,.container3,.container4
  {
 width: 100%; /* Adjust the width for full-width on narrow devices */
}


.make-space{
    padding: 5px;
    width: 100%;
}
.parent-sections {
 grid-template-columns: 1fr; /* Change to a one-column grid layout for narrow devices */
}

table th,
table td {
font-size: 12px;
}


 table {
     font-size: 12px;
 }
 .studentdetails
 {
     background-color: #123C69;
     padding: 10px;
     width:100%;
     
 }

 .student-info{
    width: 100%;
 }
 
 h1 {
    text-align: center; /* Center the text horizontally */
    margin-top: 2px; /* Adjust the top margin as needed */
    font-size: 0.5em; /* Adjust the font size as needed */
    padding: 2px; /* Padding for better visibility */
    color:#123C69; /* Text color */
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 20px;
}

 h2 {

    font-size: 18px;  
 }

 input.search-box {
    padding: 10px;
    border: 1px solid #AC3B61;
    border-radius: 2px;
    margin-bottom: 2px;
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-size: 14px;
    width: 90%;
}
.searchdiv{
    flex-direction: column;
}

.studenttable-container {
    width: 100%; /* Adjust the width as needed */ 
}

.statement-date {
    width: 100%;
    padding: 5px;
    height: 20%;
}

.statement-date2 {
    width: 100%;
    padding: 5px;
    height: 20%;
}
.formpad{
    padding: 10px;
    width: 90%;

}
.formpad2{
    padding: 10px;
      width: 90%;

}
.table-container{
    width: 100%;
}

section{
    margin :1%;
}
}


/*Extra CSS after change in how students data is fetched in the tables*/
/* Styling for DataTables Pagination Buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color:#123C69;/* Bootstrap primary color */
    color: #FFFFFF;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    margin: 2px;
    cursor: pointer;
    text-decoration: none; /* Ensure no text decoration */
}

/* Remove underline from anchor links within pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button a {
    text-decoration: none; /* Remove underline */
    color:#FFFFFF;
}





/* Make table responsive on small screens */
@media screen and (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    /* Make pagination buttons stack on smaller screens */
    .dataTables_wrapper .dataTables_paginate {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 15px;
    }
}






@media screen and (max-width: 768px) {


   
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        font-size: 12px; /* Smaller font size */
        padding: 6px 12px; /* Smaller padding */
    }

    /* Reduce size of the pagination buttons for smaller screens */
    .dataTables_wrapper .dataTables_paginate {
        font-size: 12px; /* Make the whole pagination section more compact */
    }

    /* Make sure buttons stay within the page by handling overflow */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        white-space: nowrap; /* Prevent text from wrapping */
    }
    
    /* Adjust button sizes on small screens */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 5px 10px; /* Smaller padding for smaller buttons */
    }

    /* Stack pagination controls if necessary */
    .dataTables_wrapper .dataTables_paginate {
        display: flex;
        flex-direction: row; /* Arrange buttons in a row for larger screens */
        justify-content: center; /* Center pagination buttons */
        margin-top: 10px; /* Add some spacing from the table */
    }
}

/* ADDING ADJUSTMENT TO VIEW AND HIDE STUDENT LIST FOR SMALL SCREENS */
/* Student List container */
/* For small screens */

#showStudentsList {
    display: none;
}
#hideStudentsList{
    display: none;
}
    
#studentList {
    display: block;  
}


@media (max-width: 768px) {
    #showStudentsList {
        display: flex;
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 10px;
        margin: 10px;
        z-index: 8;
    }

    #viewListBtn {
        display: inline-flex; /* Use inline-flex for potential icon alignment */
        align-items: center; /* Align icon and text vertically */
        justify-content: center; /* Center content horizontally */
        background: linear-gradient(135deg, #194A7C, #123C69); /* Gradient background */
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
        padding: 12px 20px; /* Slightly increased padding */
        font-size: 15px; /* Slightly increased font size */
        font-weight: 500; /* Slightly bolder font */
        border-radius: 8px; /* Slightly softer corners */
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15); /* Softer shadow */
    }
    
    #viewListBtn:hover {
        background: linear-gradient(135deg, #143B63, #0F2A4D); /* Slightly darker gradient */
        transform: translateY(-2px); /* Slightly reduced lift */
        box-shadow: 0px 5px 10px rgba(18, 60, 105, 0.4); /* Refined hover shadow */
    }
    
    #viewListBtn:active {
        transform: translateY(1px);
        background: linear-gradient(135deg, #0F2A4D, #0C1F3A); /* Darker active gradient */
        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
    }
    
    #viewListBtn:focus {
        outline: none;
        box-shadow: 0px 0px 6px rgba(18, 60, 105, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.3); /* Added a subtle white outline to the focus style */
    }
    
    /* Optional: Add an icon */
    #viewListBtn i { /* If using Font Awesome or similar */
        margin-right: 8px; /* Space between icon and text */
    }
    
#studentList {
    display: none;  /* Initially hidden */
    position: fixed;
    top: 20;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:  #EEE2DC;
     z-index: 10;
    overflow: auto;
    padding: 20px;
    width: 100%;
    height: 87%;
}


.close-btn2 {
    position: absolute;
    top: 15px; /* Adjusted for better visual placement */
    right: 15px; /* Adjusted for better visual placement */
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent white background */
    color: #d32f2f; /* Darker red for better contrast */
    border: none;
    font-size: 30px; /* Reduced font size if using an icon */
    cursor: pointer;
    z-index: 15;
    transition: color 0.3s ease, transform 0.2s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 50%; /* Circular button */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.close-btn2:hover {
    color: #b71c1c; /* Darker red on hover */
    transform: scale(1.1) rotate(90deg); /* Slight scale and rotation */
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.close-btn2:focus {
    outline: 2px solid #b71c1c;
    outline-offset: 3px;
}

.close-btn2:active {
    transform: scale(0.95); /* Slight shrink on click */
    background-color: rgba(255, 255, 255, 0.6);
}


#hideStudentsList {
    display: block;
    padding: 10px;
    margin: 10px;
    }

}

#student_list {
padding-left: 20px;
}

.studenttable-container {
    overflow-x: auto; /* Enable horizontal scrolling */
    margin:0px;
    padding:0px;
}



/* Control the breakpoint where columns start to hide */
.hidden-column {
    display: none;
}
/*
.adm_no-column {
    width: 20%; 
}

.name-column {
    width: 30%;
}

.class-column {
    width: 10%;
}

.stream-column {
    width: 10%;
}

.house-column {
    width: 10%;
}

.select-column {
    width: 10%; 
}


.adm_no-column3 {
    width: 20%; 
}

.name-column3 {
    width: 25%;
}

.class-column3 {
    width: 20%;
}

.stream-column3 {
    width: 10%;
}

.house-column3 {
    width: 20%;
}

.select-column3 {
    width: 10%; 
}
hidePresetList    
*/

@media (max-width: 768px) { 
    /* Adjust the max-width value as needed */
    #student_list {
        padding-left: 10px;
        width : 100%;
        }

        #studentTable {
            width: 100%;
        }

        #topicsTable {
            width: 100%;
        }
        .studenttable-container {
            width : 100%;
        }
/* Set column widths 
#studentTable th:nth-child(1),

#studentTable td:nth-child(1) {
  width: 10%; 
}

#studentTable th:nth-child(2), 
#studentTable td:nth-child(2) {
  width: 30%; 
}

#studentTable th:nth-child(3), 
#studentTable td:nth-child(3) {
  width: 15%; 
}

#studentTable th:nth-child(4), 
#studentTable td:nth-child(4) {
  width: 15%; 
}

#studentTable th:nth-child(5), 
#studentTable td:nth-child(5) {
  width: 10%; 
}

#studentTable th:nth-child(6), 
#studentTable td:nth-child(6) {
  width: 10%; 
}
  hidePresetList
*/


  }
  



  #student_allocation {
    display: none;
    position: fixed;
    top: 90px;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for the element's width */
    background-color: #FFFFFF;
    z-index: 15;
    overflow: auto;
    padding: 20px;
    width: 90%; /* Cover 80% of the screen horizontally */
    max-width: 1200px; /* Limit width for better readability */
    height: 95%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

  #student_list2 {
    display: none;
    position: fixed;
    top: 90px;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for the element's width */
    background-color: #FFFFFF;
    z-index: 10;
    overflow: auto;
    padding: 10px;
    width: 90%; /* Cover 80% of the screen horizontally */
    max-width: 1300px; /* Limit width for better readability hover */
    height: 95%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


#preset_topic_allocation {
    display: none;
    position: fixed;
    top: 0px;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for the element's width */
    background-color: #FFFFFF;
    z-index: 1001;
    overflow: auto;
    padding: 20px;
    width: 98%; /* Cover 80% of the screen horizontally */
   /* max-width: 2000px;*/ /* Limit width for better readability */
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


#scores_allocation1 {
    display: none;
    position: fixed;
    top: 0px;
    left: 50%; /* Center horizontally container2 */
    transform: translateX(-50%); /* Adjust for the element's width */
    background-color: #FFFFFF;
    z-index: 1001;
    overflow: auto;
    padding: 20px;
    width: 98%; /* Cover 80% of the screen horizontally */
   /* max-width: 2000px;*/ /* Limit width for better readability  inner-form2 */
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


#scores_allocation2 {
    display: none;
    position: fixed;
    top: 0px;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for the element's width inner-form2 */
    background-color: #FFFFFF;
    z-index: 1010;
    overflow: auto;
    padding: 20px;
    width: 98%; /* Cover 80% of the screen horizontally */
   /* max-width: 2000px;*/ /* Limit width for better readability */
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


#scores_allocation3 {
    display: none;
    position: fixed;
    top: 0px;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for the element's width */
    background-color: #FFFFFF;
    z-index: 1020;
    overflow: auto;
    padding: 20px;
    width: 98%; /* Cover 80% of the screen horizontally */
   /* max-width: 2000px;*/ /* Limit width for better readability */
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


#student_add_allocation {
    display: none;
    position: fixed;
    top: 0px;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for the element's width */
    background-color: #FFFFFF;
    z-index: 1003;
    overflow: auto;
    padding: 20px;
    width: 98%; /* Cover 80% of the screen horizontally */
   /* max-width: 2000px;*/ /* Limit width for better readability */
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


#student_delete_allocation {
    display: none;
    position: fixed;
    top: 0px;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for the element's width */
    background-color: #FFFFFF;
    z-index: 1003;
    overflow: auto;
    padding: 20px;
    width: 98%; /* Cover 80% of the screen horizontally */
   /* max-width: 2000px;*/ /* Limit width for better readability */
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.inner-form {
    background-color: #EEE2DC;
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin: 10px;
}

.inner-form2 {
    background-color: #EEE2DC;
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin: 10px;
}
#student_allocation form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center form elements horizontally */
    width:100%;
}

#center-info{
display: flex;
align-items: center;
width:100%;
justify-content: center;

}
.student-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    width: 80%;
    justify-content: center;
}

.studentdetails
{
    background-color: #123C69;
    padding: 10px;
    width:100%;
}


#photoPreview {
    border-radius: 20%; /* Make photo circular */
    border: 2px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#photoPreview2 {
    border-radius: 20%; /* Make photo circular */
    border: 2px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}



#student_detail_section {
    width :90%;
    justify-content:center;
}
#hideStudentsList{
    display: block;
    padding: 10px;
    margin: 10px;
    }

.close-btn2 {
    position: absolute;
    top: 30px; /* Adjusted for better visual placement */
    right: 30px; /* Adjusted for better visual placement */
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent white background */
    color: #d32f2f; /* Darker red for better contrast */
    border: none;
    font-size: 40px; /* Reduced font size if using an icon */
    cursor: pointer;
    z-index: 15;
    transition: color 0.3s ease, transform 0.2s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 50%; /* Circular button */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-align: center;
    margin:10px;
}

.close-btn2:hover {
    color: #b71c1c; /* Darker red on hover */
    transform: scale(1.1) rotate(90deg); /* Slight scale and rotation */
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.close-btn2:focus {
    outline: 2px solid #b71c1c;
    outline-offset: 3px;
}

.close-btn2:active {
    transform: scale(0.95); /* Slight shrink on click */
    background-color: rgba(255, 255, 255, 0.6);
}


.close-btn3 {
    position: absolute;
    top: 30px; /* Adjusted for better visual placement */
    right: 30px; /* Adjusted for better visual placement */
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent white background */
    color: #d32f2f; /* Darker red for better contrast */
    border: none;
    font-size: 40px; /* Reduced font size if using an icon */
    cursor: pointer;
    z-index: 15;
    transition: color 0.3s ease, transform 0.2s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    border-radius: 50%; /* Circular button */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-align: center;
    margin:10px;
}

.close-btn3:hover {
    color: #b71c1c; /* Darker red on hover */
    transform: scale(1.1) rotate(90deg); /* Slight scale and rotation */
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.close-btn3:focus {
    outline: 2px solid #b71c1c;
    outline-offset: 3px;
}


.close-btn3:active {
    transform: scale(0.95); /* Slight shrink on click */
    background-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) { 

    #student_allocation {
        position: fixed;
        top: 0; /* Changed to 0 to take full screen */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Adjust for the element's width */   
        background-color: #EEE2DC;
        overflow: auto;
        padding: 1px;
        width: 100%;
        margin: 0px; /* changed margin to 0 */
        height: 100%; /* Changed to 100% to take full screen */
        border-radius: 0;
        z-index: 1050;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;    
    }
        #student_list2 {
        position: fixed;
        top: 0; /* Changed to 0 to take full screen */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Adjust for the element's width */   
        background-color: #EEE2DC;
        overflow: auto;
        padding: 1px;
        width: 100%;
        margin: 0px; /* changed margin to 0 */
        height: 100%; /* Changed to 100% to take full screen */
        border-radius: 0;
        z-index: 1048;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;    
    }



    #preset_topic_allocation {
        padding: 5px;
        width: 100%; /* Cover 80% of the screen horizontally */
        border-radius: 3px;      
    }

        #scores_allocation1 {
        padding: 5px;
        width: 100%; /* Cover 80% of the screen horizontally */
        border-radius: 3px;      
    }

    #scores_allocation2 {
        padding: 5px;
        width: 100%; /* Cover 80% of the screen horizontally */
        border-radius: 3px;      
    }

    #scores_allocation3 {
        padding: 5px;
        width: 100%; /* Cover 80% of the screen horizontally */
        border-radius: 3px;      
    }



    #student_add_allocation {
        padding: 5px;
        width: 100%; /* Cover 80% of the screen horizontally */
        border-radius: 3px;      
    }


        #student_delete_allocation {
        padding: 5px;
        width: 100%; /* Cover 80% of the screen horizontally */
        border-radius: 3px;      
    }
    .inner-form {
        background-color: #EEE2DC;
        padding: 5px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
       margin:10px;
        margin-top: 40px;
        
        overflow-y:auto;
    }

    .inner-form2 {
        background-color: #EEE2DC;
        padding: 5px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
       margin:5px;
        margin-top: 40px;
        overflow-y:auto; /* inner-form2  scores_allocation1 */
        width: 100%;
    }

    #student_allocation form {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
        padding-top: 20px;
    }
    
    #center-info{
    display: flex;
    align-items: center;
    width:100%;
    justify-content: center;
    
    }
    .student-info {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        width: 100%;
        justify-content: center;
    }
    
    .studentdetails
    {
        background-color: #123C69;
        padding: 10px;
        width:80%;
    }
    
    
    #photoPreview {
        border-radius: 20%; /* Make photo circular  student_detail_section */
        border: 2px solid #ddd;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

        #photoPreview2 {
        border-radius: 20%; /* Make photo circular */
        border: 2px solid #ddd;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    #promoteStudents {
        width:50%;
    }
    #student_detail_section {
        width :90%;
        justify-content:center;
    }
    #hideStudentsList{
        display: block;
        padding: 10px;
        margin: 10px;
        }
    
        .hidePresetList{
            display: block;
            padding: 20px;
            margin: 20px;
            }

                 .hidePresetList3{
            display: block;
            padding: 20px;
            margin: 20px;
            }

    .close-btn2 {
        position: absolute;
        top: 0px; /* Adjusted for better visual placement */
        right: 0px; /* Adjusted for better visual placement */
        background: rgba(255, 255, 255, 0.2); /* Semi-transparent white background */
        color: #d32f2f; /* Darker red for better contrast */
        border: none;
        font-size: 40px; /* Reduced font size if using an icon */
        cursor: pointer;
        z-index: 15;
        transition: color 0.3s ease, transform 0.2s ease, background-color 0.3s ease, box-shadow 0.3s ease;
        border-radius: 50%; /* Circular button */
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        text-align: center;
        margin:2px;

    }
    .close-btn3 {
        position: absolute;
        top: 5px; /* Adjusted for better visual placement */
        right: 20px; /* Adjusted for better visual placement */
        background: rgba(255, 255, 255, 0.2); /* Semi-transparent white background */
        color: #d32f2f; /* Darker red for better contrast */
        border: none;
        font-size: 40px; /* Reduced font size if using an icon */
        cursor: pointer;
        z-index: 15;
        transition: color 0.3s ease, transform 0.2s ease, background-color 0.3s ease, box-shadow 0.3s ease;
        border-radius: 50%; /* Circular button */
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        text-align: center;
        margin:2px;

    }

}

/* Clear Page Button Styling */
.clear-btn {
    background-color: #ff5f57; /* Red background */
    color: white;
    border: none;
    display: flex; /* Flexbox for centering */
    align-items: center;
    justify-content: center; /* Center content */
    gap: 8px; 
    padding: 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    width: 110px;
    cursor: pointer;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.clear-btn:hover {
    background-color: #e54c4c;
    transform: scale(1.05); /* Slight zoom on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Icon Styling */
.clear-btn .icon {
    font-size: 50px; /* Adjust size */
}
.icon2{
    font-size: 50px; /* Adjust size */
}
@media (max-width: 768px) {
    .clear-btn .icon {
        font-size: 30px; /* Adjust size */
    }
    .icon2 {
        font-size: 30px; /* Adjust size */
    }
    .clear-btn {

    width: 20%;   
       font-size: 11px;
height:auto;
padding: 1px;
gap: 2px; 
               
       }

}
.edit-link {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 1px 3px;
    border-radius:4px;
    background-color: #AC3B61;
    transition: background-color 0.3s;
}

.delete-link {
   display: inline-block;
   text-decoration: none;
   color: #fff;
   padding: 1px 3px;
   border-radius:4px;
   background-color: #FF0000;
   transition: background-color 0.3s;
}

.edit-link:hover {
    background-color: #123C69;
}

.delete-link:hover {
   background-color: #123C69;
}

.edit-icon {
    width: 20px;
    height: 20px;
    margin-right: 3px;
    /* Adjust the path to your IconsFolder and the specific icon file */
    background: url('IconsFolder/EditIcon5.png') center/cover;
    display: inline-block;
    vertical-align: middle;
}


.delete-icon {
   width: 20px;
   height: 20px;
   margin-right: 3px;
   /* Adjust the path to your IconsFolder and the specific icon file */
   background: url('IconsFolder/DeleteIcon3.png') center/cover;
   display: inline-block;
   vertical-align: middle;
}

.delete-btn:hover {
    background-color: #123C69;
   }
.delete-btn {
    /* Add any other styles you want for the button */
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FF0000;
    color: #FFFFFF;
    padding: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    width: 110px;
    height: auto;
   }
   
   @media (max-width: 768px) {
       .delete-btn { 
         width: 20%;
        height:auto;
       font-size: 11px;
               
       }
    }


    .name-column4 {
        width: 12%;
    }
    .competency-column4{
        width: 50%;
    }
   /*
    .select-column4 {
        width: 10%; 
    }
        z-index
    .adm_no-column5 {
        width: 20%; 
    }
    
    .name-column5 {
        width: 30%;
    }
    
    .class-column5 {
        width: 20%;
    }
    
    .stream-column5 {
        width: 20%;
    }
    
    .select-column5 {
        width: 10%; 
    }
*/
    .student-info {
        margin-top:10px;
    }
    .center-info {
        margin-top: 10px;
        padding-top:10px;
    }
   /* .name-column6 {
        width:15%;
        padding:2px;
    }

    .date-column6{
        width:20%; inner-form
    }*/
    #student_detail_section {
    padding-top:2px;
    }


    .balance-container {
        display: flex;
        justify-content: space-evenly;
    }

    .sameline-container{
        width:100%;
    }

    .sameline-container-div {
        width:45%;
    }
    .sameline-container2 {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        
    }


#textClassFilter {
    font-size:16px;
    margin-bottom:20px;

}

.selectdiv2 {
    width:90%;
}

    @media (max-width: 768px) {
        .balance-container {
      flex-direction:column;
        }

        .sameline-container{
            flex-direction: column;
            
        }

        .sameline-container-div {
            width:100%;
        }
        .selectdiv2{
            width:100%;
        }
        #textClassFilter {
            font-size:12px;
            margin-bottom:10px;
        
        }
     }


    h2, #center-info, .student-info {
        margin: 0;
    }
    .long-text {
        width:100%;
    }
    .selectdiv2{
        width:50%;
    }

    table.dataTable thead th {
        background-color: #123C69;
        color: white;
        padding: 2px;
        text-align: left;
        font-size:16px;
    }
    
    table.dataTable tbody td {
        padding: 2px;
        vertical-align: middle;
        font-size:16px;
    }
    
    table.dataTable {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
    }
    
    table.dataTable tbody tr:nth-child(even) {
        background-color: #DFECFF;
    }
    
    table.dataTable tbody tr:hover {
        background-color: #ADD8E6;
    }
    
    div.dataTables_filter input {
        width: 300px;
        padding: 10px 15px;
        border: 1px solid #000000;
        border-radius: 5px;
        font-size: 16px;
        color: #000000;
        background-color: #FFFFFF;
    }
    
    div.dataTables_filter input:focus {
        outline: none;
        border-color: #123C69;
        box-shadow: 0 0 5px rgba(0, 128, 0, 0.5);
    }
    
    div.dataTables_filter input::placeholder {
        color: #000000;
    }

    .payment-list-region{
        width: 90%; /* Adjust the width as needed */
        background-color: #DFECFF;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 20px;
       border: 2px solid #123C69;
       padding:10px;
        text-align: left;
        }
    
        .receipt-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #FFFFFF;
            color: #123C69;
            padding: 12px;
            border:solid #123C69; ;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
            width: 15%;
            text-decoration: none;
            font-weight: bold;
        }
        
        
        .receipt-link:hover {
            background-color: #AC3B61;
             color:#FFFFFF;
        }
        
         .receipt-icon {
             width: 70%;
             height: 70%;
                 /* Adjust the path to your IconsFolder and the specific icon file */
             background: url('IconsFolder/PrintIcon.png') center/cover;
             display: inline-block;
             vertical-align: middle;
         }
         .receipt-icon2 {
            /* Adjust the path to your IconsFolder and the specific icon file */
            background: url('IconsFolder/PrintIcon.png') center/cover;
            display: inline-block;
            width: 50px; /* Adjust the width according to your icon size */
            height: 50px; /* Adjust the height according to your icon size */
            vertical-align: middle;
          }
        
        
          .receipt-link2 {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #FFFFFF;
            color: #123C69;
            padding: 12px;
            border:solid #123C69; ;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
            width: 18%;
            text-decoration: none;
            font-weight: bold;
        }
        
        
        
        .receipt-link2:hover {
            background-color: #AC3B61;
             color:#FFFFFF;
        }
        
    @media (max-width: 768px) {


        .payment-list-region{
            width: 100%; 
       
        }
        
        table.dataTable thead th {
            background-color: #123C69;
            color: white;
            padding: 2px;
            text-align: left;
            font-size:12px;
        }
        
        table.dataTable tbody td {
            padding: 2px;
            vertical-align: middle;
            font-size:12px;
        }
        
        div.dataTables_filter input {
            width: 200px;
            padding: 5px 5px;
            border: 1px solid #000000;
            border-radius: 5px;
            font-size: 14px;
            color: #000000;
            background-color: #FFFFFF;
        }

        .print-icon {
            width: 50%;
            height: 50%;
             }
    
             .receipt-icon {
                width: 50%;
                height: 50%;
                 }
    
        .receipt-link {
            font-size: 11px;
            width: 20%;       
        }
    
        .print-link{
            font-size: 11px;
            width: 20%;       
        }
    
        .receipt-link2 {
            font-size: 11px;
            width: 10%;       
        }
    
        .icon {
            width: 50%; /* Adjust the width as needed */
            height: 50%; /* Adjust the height as needed */
            margin-bottom: 5px; /* Optional: Add some spacing between the icon and text */
           }
    
           .submit-btn {
            /* Add any other styles you want for the button */
        
            width: 20%;
            height:auto;
           font-size: 11px;
                   
           }
           .delete-btn {
            /* Add any other styles you want for the button */
        
            width: 20%;
            height:auto;
           font-size: 11px;
                   
           }
    
    
     table {
         font-size: 11px;
     }
    .container {
     flex-direction: column; /* Change to a one-column layout for narrow devices */
    }
    
    .container2,
    .container1,.container3,.container4
      {
    width: 100%; /* Adjust the width for full-width on narrow devices */
    padding:2px;
    margin: 1px;
    }
    
    
    .make-space{
        padding: 5px;
        width: 100%;
    }

    }

    .print-link {
        display: inline-block;
        text-decoration: none;
        color: #fff;
        padding: 1px 3px;
        border-radius:4px;
        background-color: #AC3B61;
        transition: background-color 0.3s;
    }
    
    
    
    .print-link:hover {
       background-color: #123C69;
    }
    
    .print-icon {
        width: 20px;
        height: 20px;
        margin-right: 3px;
        /* Adjust the path to your IconsFolder and the specific icon file */
        background: url('../Procurement/IconsFolder/PrintIcon5.png') center/cover;
        display: inline-block;
        vertical-align: middle;
    }
       

    #viewListBtn2 {
        display: inline-flex; /* Use inline-flex for potential icon alignment */
        align-items: center; /* Align icon and text vertically */
        justify-content: center; /* Center content horizontally */
        background: linear-gradient(135deg, #194A7C, #123C69); /* Gradient background */
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
        padding: 12px 20px; /* Slightly increased padding */
        font-size: 15px; /* Slightly increased font size */
        font-weight: 500; /* Slightly bolder font */
        border-radius: 8px; /* Slightly softer corners */
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15); /* Softer shadow */
    }
    
    #viewListBtn2:hover {
        background: linear-gradient(135deg, #143B63, #0F2A4D); /* Slightly darker gradient */
        transform: translateY(-2px); /* Slightly reduced lift */
        box-shadow: 0px 5px 10px rgba(18, 60, 105, 0.4); /* Refined hover shadow */
    }
    
    #viewListBtn2:active {
        transform: translateY(1px);
        background: linear-gradient(135deg, #0F2A4D, #0C1F3A); /* Darker active gradient */
        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
    }
    
    #viewListBtn2:focus {
        outline: none;
        box-shadow: 0px 0px 6px rgba(18, 60, 105, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.3); /* Added a subtle white outline to the focus style */
    }
    
    /* Optional: Add an icon */
    #viewListBtn2 i { /* If using Font Awesome or similar */
        margin-right: 8px; /* Space between icon and text */
    }

    #topicsTable {
        width: 100% !important; /* Use !important to override any inline styles or other more specific rules */
      }

      .table-container {
        width: 100%;
      }
      
      .addLessonPlanDiv{
        width: 100%;
        padding: 10px;
        margin: 10px;
        justify-content: center;
        text-align: center;
        align-items: center;
    }
    
    .add-lesson-button {
        display: inline-flex;
        align-items: center;
        gap: 8px; /* Space between icon and text */
        background-color: #123C69; /* Primary green color */
        color: white; /* Text and icon color */
        border: none; /* Remove default border */
        border-radius: 8px; /* Rounded corners */
        padding: 12px 20px; /* Padding for button size */
        font-size: 16px; /* Text size */
        font-weight: bold; /* Bold text */
        cursor: pointer; /* Pointer cursor on hover */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        transition: all 0.3s ease; /* Smooth hover effect */
        width: 100%;
        justify-content: center;
    }
    
    .add-lesson-button i {
        font-size: 20px; /* Icon size */
        transition: transform 0.3s ease;
    }
    
    .add-lesson-button:hover {
        background-color: #AC3B61; /* Primary green color */
        transform: translateY(-2px); /* Slight lift effect */
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Enhance shadow on hover */
    }
    
    .add-lesson-button:hover i {
        transform: scale(1.2); /* Slightly enlarge icon on hover */
    }
    
    .add-lesson-button:active {
        background-color: #3e8e41; /* Even darker green on click */
        transform: translateY(0); /* Reset lift effect */
        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2); /* Pressed button shadow */
    }
    div > label[for="textTopic"] {
        display: block; /* Make label take full width */
        margin-bottom: 5px; /* Add some space below the label */
        font-weight: bold; /* Make the label text bold */
        color: #333; /* Darker text color */
      }
      
      textarea#textTopic {
        width: 100%; /* Make the textarea take full width */
        padding: 10px; /* Add some padding inside the textarea */
        margin-bottom: 15px; /* Add space below the textarea */
        border: 1px solid #ccc; /* Light gray border */
        border-radius: 5px; /* Slightly rounded corners */
        box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
        font-size: 16px; /* Slightly larger font size for better readability */
      }
      
      textarea#textTopic:focus {
        border-color: #007bff; /* Highlight border on focus (Bootstrap primary color) */
        outline: none; /* Remove default focus outline */
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Add a subtle focus shadow */
      }
      
      /* Style for the competency input area (similar to topic) */
      div > label[for="textCompetency"] {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
        color: #333;
      }
      
      textarea#textCompetency {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 16px;
      }
      
      textarea#textCompetency:focus {
        border-color: #007bff;
        outline: none;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
      }
      
      /* Style for the "Marked Out Of" input */
      div > label[for="textMarkedOutOf"] {
        display: inline-block; /* Keep label and input on the same line */
        margin-right: 10px;
        font-weight: bold;
        color: #333;
      }
      
      input#textMarkedOutOf {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
        width: 100px; /* Adjust width as needed */
        font-size: 16px;
      }
      
      input#textMarkedOutOf:focus {
        border-color: #007bff;
        outline: none;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
      }
      .row1 {
        display: flex;
        gap: 20px; /* Space between buttons */
        margin-top: 20px;
        align-items: center; /* Vertically align items */
        width: 100%;
      }
      
      .scoreclass1 {
        width: 15%; 
    }

    .scoreclass2 {
        width: 15%; 
    }

    .scoreclass3 {
        width: 10%; 
    }

    .scoreclass4 {
        width: 10%; 
    }

    .scoreclass5 {
        width: 20%; 
    }

    .scoreclass6 {
        width: 30%; 
    }

/* NEW CSS FOR MARKS ENTRY */
/* Force the section containing the table to cover the entire viewport width */
.studenttable-container section {
    width: 100vw !important;
    height: auto !important; /* Adjust height based on content */
    display: block !important;
    overflow-x: auto !important; /* Enable horizontal scrolling if content overflows */
}
/* scores_allocation1 */
/* Force the table to cover the entire viewport width */
#scoresTable1 {
    width: 100% !important;
    border-collapse: collapse;
    display: block !important;
}

/* Style for the table header to ensure it spans the full width */
#scoresTable1 thead {
    display: block !important;
    width: 100% !important;
    flex-shrink: 0; /* Prevent shrinking */
}

#scoresTable1 thead tr {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box;
}

#scoresTable1 th {
    font-weight: bold;
    padding: 8px 12px;
    text-align: left;
   /* flex: 1; /* Distribute available space equally among headers */
    box-sizing: border-box; /* Include padding and border in width */
}

/* Style for the table body to scroll vertically */
#scoresTable1 tbody {
    display: block !important;
    width: 100% !important;
    overflow-y: auto;
    /* Set a reasonable max-height to prevent it from taking over the entire viewport if there's a lot of data */
    max-height: 300vh; /* Adjust as needed */
}

#scoresTable1 tbody tr {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Style for table data cells */
#scoresTable1 td {
    padding: 2px 5px;
    text-align: left;
    /*flex: 1; /* Distribute available space equally among data cells */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box; /* Include padding and border in width */
}


/* Hide specific columns */
.hidden-column {
    display: none !important;
}

/*z-index*/


/* Specific column widths (adjust these percentages as needed) */
#scoresTable1 th.scoreclass1, #scoresTable1 td.scoreclass1 { width: 13vw !important; } /* Admission Number */
#scoresTable1 th.scoreclass2, #scoresTable1 td.scoreclass2 { width: 20vw !important; } /* Student Name */
#scoresTable1 th.scoreclass3, #scoresTable1 td.scoreclass3 { width: 10vw !important; } /* Class */
#scoresTable1 th.scoreclass4, #scoresTable1 td.scoreclass4 { width: 10vw !important; } /* Stream */
#scoresTable1 th.scoreclass5, #scoresTable1 td.scoreclass5 { width: 10vw !important; } /* Score */
#scoresTable1 th.scoreclass6, #scoresTable1 td.scoreclass6 { width: 10vw !important; } /* Score */
#scoresTable1 th.scoreclass7, #scoresTable1 td.scoreclass7 { width: 10vw !important; } /* Score */

#scoresTable2 th.scoreclass1, #scoresTable2 td.scoreclass1 { width: 13vw !important; } /* Admission Number */
#scoresTable2 th.scoreclass2, #scoresTable2 td.scoreclass2 { width: 20vw !important; } /* Student Name */
#scoresTable2 th.scoreclass3, #scoresTable2 td.scoreclass3 { width: 10vw !important; } /* Class */
#scoresTable2 th.scoreclass4, #scoresTable2 td.scoreclass4 { width: 10vw !important; } /* Stream */
#scoresTable2 th.scoreclass5, #scoresTable2 td.scoreclass5 { width: 10vw !important; } /* Score */
#scoresTable2 th.scoreclass6, #scoresTable2 td.scoreclass6 { width: 10vw !important; } /* Stream */
#scoresTable2 th.scoreclass7, #scoresTable2 td.scoreclass7 { width: 10vw !important; } 

#scoresTable2 th.scoreclass6, #scoresTable2 td.scoreclass6 { text-align: center !important; } /* Score */
#scoresTable2 th.scoreclass8, #scoresTable2 td.scoreclass8 { width: 10vw !important; } /* Comment */




/* Ensure hidden columns still take up space in the flex layout (even if not visible) */
#scoresTable1 th.hidden-column, #scoresTable1 td.hidden-column {
    flex: 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
}

/* Base styles for score input score_div */
.score-input {
    width: 100%; /* Make input fill the cell */
    padding: 10px; /* Slightly more padding for a softer look */
    border: 1px solid #c0c0c0; /* A softer, light gray border */
    border-radius: 6px; /* Slightly more rounded corners */
    box-sizing: border-box; /* Include padding in width */
    font-size: 1.2em; 
    margin: 0; /* Reset default margins */
    transition: all 0.3s ease-in-out; /* Smooth transitions for effects */
    outline: none; /* Remove default outline for custom focus */

    /* --- New properties for bold and right alignment --- */
    font-weight: bold; /* Makes the text bold */
    text-align: center; /* Aligns the text to the right side of the input field */
}

/* Hover effect for score input */
.score-input:hover {
   border: 2px solid #999999; /* A softer, light gray border */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

/* Focus effect for score input */
.score-input:focus {
         border: 2px solid  #007bff; /* A softer, light gray border */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Glow effect on focus */
}

/* --- */

/* Base styles for comment textarea */
.comment-textarea {
    width: 100%; /* Make textarea fill the cell */
    /*max-height: 40px; /* Give it some initial height */
    padding: 10px; /* Slightly more padding for a softer look */
    border: 1px solid #c0c0c0; /* A softer, light gray border */
    border-radius: 6px; /* Slightly more rounded corners */
    box-sizing: border-box; /* Include padding in width */
    font-size: 1em;
    resize: vertical; /* Allow vertical resizing */
    margin: 0; /* Reset default margins */
    transition: all 0.3s ease-in-out; /* Smooth transitions for effects */
    outline: none; /* Remove default outline for custom focus */
}
/*#student_add_allocation
/* Hover effect for comment textarea */
.comment-textarea:hover {

    border: 2px solid #999999; /* A softer, light gray border */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

/* Focus effect for comment textarea */
.comment-textarea:focus {

       border: 2px solid #007bff; /* A softer, light gray border */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Glow effect on focus */
}
/* Responsive adjustments (you might need to adjust these based on vw units) */
@media (max-width: 768px) {
    #scoresTable1 th, #scoresTable1 td {
        font-size: 1em;
        padding: 6px 8px;
    }
#scoresTable1 th.scoreclass1, #scoresTable1 td.scoreclass1 { display: none; } /* Admission Number */
#scoresTable1 th.scoreclass2, #scoresTable1 td.scoreclass2 { width: 70vw !important; } /* Student Name */
#scoresTable1 th.scoreclass4, #scoresTable1 td.scoreclass4 {display: none; } /* Class */
#scoresTable1 th.scoreclass5, #scoresTable1 td.scoreclass5 {display: none; } /* Class */
#scoresTable1 th.scoreclass6, #scoresTable1 td.scoreclass6 {display: none; } /* Class */
#scoresTable1 th.scoreclass3, #scoresTable1 td.scoreclass3 { width: 20vw !important; } /* Stream */
#scoresTable1 th.scoreclass7, #scoresTable1 td.scoreclass7 { width: 40vw !important; } /* Score */



    #scoresTable2 th, #scoresTable2 td {
        font-size: 1em;
        padding: 6px 8px;
    }
#scoresTable2 th.scoreclass1, #scoresTable2 td.scoreclass1 { display: none; } /* Admission Number */
#scoresTable2 th.scoreclass2, #scoresTable2 td.scoreclass2 { width: 50vw !important; } /* Student Name */
#scoresTable2 th.scoreclass3, #scoresTable2 td.scoreclass3 { width: 20vw !important; }  /* Class */
#scoresTable2 th.scoreclass4, #scoresTable2 td.scoreclass4 { display: none; }  /* Stream */
#scoresTable2 th.scoreclass5, #scoresTable2 td.scoreclass5 { width: 20vw !important; } /* Score */
#scoresTable2 th.scoreclass6, #scoresTable2 td.scoreclass6 {display: none; } /* Comment */
#scoresTable2 th.scoreclass7, #scoresTable2 td.scoreclass7 { width: 20vw !important; } /* Comment */
#scoresTable2 th.scoreclass8, #scoresTable2 td.scoreclass8 { width: 20vw !important; } 
}

/* In your CSS file (e.g., style.css) or within a <style> block in your HTML student_comment_class */
#scoresTable1 tbody tr.hover {
    border: 2px solid #007bff; /* Add a distinct border for more emphasis */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.3); /* Subtle glow effect */
    transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth transition */
     background-color: #90EE90;

}

/* Optional: Improve focus visibility for the inputs themselves */
#scoresTable1 .score-input:focus,
#scoresTable1 .comment-textarea:focus {
    border-color: #007bff; /* Match the row highlight color */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
/* Custom CSS for the info display section */
.info-display {
    background-color: #f8f9fa; /* Light background */
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
    /* Removed display: flex; from here as the internal nav-items manage flex */
    /* Adjust as needed if you want this outer container to be a flex container for other elements */
}

.detail-item {
    font-size: 0.95rem; /* Slightly smaller font */
    color: #343a40; /* Darker text for contrast */
    display: flex; /* Ensures icon and text are inline */
    align-items: center; /* Vertically aligns icon with text */
}

.detail-item .bi {
    color: #007bff; /* A primary color for icons */
    font-size: 1.1rem; /* Slightly larger icon size */
}


/* Optional: Adjust for smaller screens if needed  multiselect*/
@media (max-width: 768px) {
    .info-display .nav-item.d-flex {
        flex-direction: column; /* Stack class/term/subject vertically on small screens */
        align-items: flex-start;
        gap: 8px; /* Reduce gap when stacked */
    }
}
/* --- Overall Container Styling --- */
.info-display {
    background-color: #e9f5ff; /* A soft, light blue background for a clean look */
    border: 1px solid #cce7ff; /* A subtle border that matches the background */
    border-radius: 10px; /* More rounded corners for a modern feel */
    padding: 15px 20px; /* Generous padding inside the container */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* A softer, more pronounced shadow */
    margin-bottom: 20px; /* Space below the entire info block */
    display: flex; /* Ensure the container is a flex container */
    flex-direction: column; /* Stack the main nav-item rows vertically */
    gap: 10px; /* Space between the main rows (e.g., between the Class/Term/Subject line and Topic line) */
}

/* --- Styling for Individual Detail Items (Class, Term, Subject, Topic, etc.) --- */
.detail-item {
    font-size: 0.9rem; /* Slightly smaller and more compact font size */
    color: #495057; /* A professional, dark gray text color */
    display: flex; /* Ensures the icon and text are aligned */
    align-items: center; /* Vertically centers icon and text */
    padding: 5px 10px; /* Padding within each detail item (makes it clickable/hoverable area) */
    border-radius: 5px; /* Slightly rounded corners for each item */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition for hover effects */
    cursor: default; /* Indicate it's not clickable for now, can change if you add click functionality */
}

/* --- Hover Effect for Individual Detail Items --- */
.detail-item:hover {
    background-color: #dbeeff; /* A slightly darker blue on hover */
    transform: translateY(-2px); /* A subtle lift effect */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Small shadow on hover */
}

/* --- Icon Styling --- */
.detail-item .bi {
    color: #007bff; /* A vibrant primary blue for the icons */
    font-size: 1.2rem; /* Slightly larger icon size for prominence */
    margin-right: 8px; /* Consistent spacing between icon and text */
}

/* --- Styling for the Bold Values --- */
.detail-item .fw-bold {
    color: #212529; /* A darker, more prominent color for the actual values */
    font-weight: 600; /* Ensure it's bold */
    margin-left: 5px; /* Small space after the label like "Class:" and before the value */
}

/* --- CUSTOM CLASS FOR INLINE LAYOUT --- */
.inline-details-group {
    display: flex; /* Makes the group a flex container */
    align-items: center; /* Vertically aligns items within the group */
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
    gap: 20px; /* Generous spacing between Class, Term, and Subject */
    padding-bottom: 5px; /* Extra padding at the bottom of the first line */
    border-bottom: 1px dashed #e0e0e0; /* A light dashed line to separate from other details */
}

/* --- Responsive Adjustments (for smaller screens) --- */
@media (max-width: 768px) {
    .info-display {
        padding: 10px 15px; /* Reduce padding on smaller screens */
        gap: 8px; /* Reduce gap between rows */
    }

    .inline-details-group {
        flex-direction: column; /* Stack Class/Term/Subject vertically on small screens */
        align-items: flex-start; /* Align stacked items to the left */
        gap: 5px; /* Reduce gap when stacked */
    }

    .detail-item {
        font-size: 0.85rem; /* Even smaller font on mobile */
        padding: 3px 8px;
    }

    .detail-item .bi {
        font-size: 1rem; /* Smaller icons on mobile */
        margin-right: 6px;
    }
}

.save-reminder {
  font-size: 1.2rem; /* Make the text larger */
  font-weight: bold; /* Make the text bold */
  color: #28a745; /* Use a bright green color (Bootstrap's success green) */
  background-color: #f0fdf4;  /* Very light green background */
  padding: 10px 15px; /* Add padding for visual emphasis */
  border-radius: 8px; /* Slightly rounded corners */
  text-align: center; /* Center the text */
  margin-top: 20px; /* Add space above the reminder */
  border: 1px solid #c3e6cb; /* Add a border */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for emphasis */
  animation: pulse 2s infinite alternate; /* Add a subtle pulse animation */
}
/* Hover effects ONLY for the .save-reminder class */
.save-reminder:hover {
    background-color: #e0f2f7; /* Change to a slightly different light background on hover (e.g., light blueish-green) */
    color: #1e7e34; /* Darken the text color slightly on hover */
    transform: translateY(-2px); /* Lift the element slightly upwards */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Enhance the shadow on hover for more depth */
    cursor: pointer; /* Change cursor to a pointer to indicate interactivity (even if not clickable) */
    animation: none; /* Stop the pulse animation on hover for a stable state */
}

.save-reminder-btn {
    /* Basic Button Styling */
    display: flex; /* Use flexbox to align content (icons and text) */
    align-items: center; /* Vertically center items */
    justify-content: center; /* Horizontally center content */
    width: fit-content; /* Make the button only as wide as its content */
    margin: 20px auto; /* Center the button horizontally on the page and add top margin */
    padding: 12px 25px; /* Generous padding for a clear message */
    border: none; /* Remove default button border */
    border-radius: 8px; /* Slightly rounded corners */
    cursor: pointer; /* Indicate it's clickable */
    text-transform: uppercase; /* Ensure text is always uppercase */
    font-size: 1.1rem; /* Clear, readable font size */
    font-weight: bold; /* Make the text bold */
    white-space: nowrap; /* Prevent text from wrapping to multiple lines */

    /* Coloring and Appearance */
    background-color: #28a745; /* A strong, clear green background */
    color: #ffffff; /* White text for high contrast */
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2); /* Subtle green shadow */

    /* Transitions for Hover/Active effects */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    width: 100%;

    gap: 20px; /* Adjust as needed */
    display: flex; /* Ensure this is present for gap to work correctly */
    align-items: center;  /* Keep vertical alignment */
    justify-content: center; /* Keep horizontal centering */
}

/* Icon Styling within the Button */
.save-reminder-btn .bi {
    font-size: 1.4rem; /* Make the icons slightly larger than the text */
    line-height: 1; /* Helps with vertical alignment */
    /* me-2 (margin-right) and ms-2 (margin-left) from Bootstrap handle spacing */
    color: #ffffff; /* Ensure icons are white */
}

/* Hover Effect */
.save-reminder-btn:hover {
    background-color: #218838; /* A darker shade of green on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 6px 12px rgba(40, 167, 69, 0.3); /* More pronounced shadow on hover */
}

/* Active (Click) Effect */
.save-reminder-btn:active {
    background-color: #1e7e34; /* Even darker green when clicked */
    transform: translateY(0); /* Press-down effect */
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2); /* Reduced shadow on active */
}

@keyframes pulse {
  from { opacity: 0.9; }
  to { opacity: 1; }
}

/* --- Styling for the Save Scores Button --- */
.save-scores-btn {
    /* Positioning (remains fixed) */
    position: fixed;
    top: 0.9cm;
    right: 2.8cm;
    z-index: 1001;

    /* Appearance */
    background-color: #28a745; /* Bootstrap's success green */
    color: #ffffff; /* White text for contrast */
    border: none;
    border-radius: 5px;
    padding: 5px 10px; /* Adjust padding for the new internal layout */
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase; /* Ensure text is always uppercase as per your requirement */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2);

    /* --- FLEXBOX FOR STACKED ICON AND TEXT --- */
    display: flex;             /* Make the button a flex container */
    flex-direction: column;    /* Stack items vertically */
    align-items: center;       /* Horizontally center items (icon and text) */
    justify-content: center;   /* Vertically center content if button height allows */
    gap: 1px; /* Small gap between the icon and the text */
}

/* --- Styling for the Icon within the Button --- */
.save-scores-btn .bi {
    font-size: 1.5rem; /* Make the icon significantly bigger */
    margin-right: 0 !important; /* Remove any previous right margin from me-2 */
    margin-bottom: 2px; /* Small margin below the icon */
    line-height: 1; /* Ensure icon doesn't add extra vertical space */
}

/* --- Hover Effects --- */
.save-scores-btn:hover {
    background-color: #123C69; /* A darker shade of green on hover */
    transform: translateY(-1px); /* Slight lift effect */
    box-shadow: 0 6px 12px rgba(40, 167, 69, 0.3); /* More pronounced shadow on hover */
}

.save-scores-btn:active {
    background-color: #1e7e34; /* Even darker green when clicked */
    transform: translateY(0); /* Press-down effect */
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2); /* Reduced shadow on active */
}
/* --- Container for Search Boxes (Default for larger screens) --- */
.searchdiv {
    display: flex; /* Arrange search boxes side-by-side */
    gap: 10px; /* Space between the two search boxes */
    margin-left: auto; /* Pushes the search div to the extreme right on larger screens */
    padding: 10px; /* Add some padding around the search boxes */
    /* Optional: If you want a background for the search box container */
    /* background-color: #f8f9fa; */
    /* border-radius: 8px; */
}

/* --- Styling for Individual Search Boxes --- */
.search-box {
    width: 180px; /* Set a fixed width for the search boxes */
    padding: 10px 15px; /* Comfortable padding inside the input */
    border: 1px solid #ced4da; /* Light gray border */
    border-radius: 20px; /* Highly rounded corners for a modern, 'pill' shape */
    font-size: 0.95rem; /* Readable font size */
    color: #495057; /* Darker text color */
    outline: none; /* Remove default outline on focus */
    transition: all 0.3s ease-in-out; /* Smooth transitions for all effects */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle initial shadow */
}

/* --- Placeholder Text Styling --- */
.search-box::placeholder {
    color: #6c757d; /* Slightly darker placeholder text */
    opacity: 0.8; /* Make it a bit translucent */
}

/* --- Hover Effect --- */
.search-box:hover {
    border-color: #80bdff; /* Light blue border on hover */
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.1); /* More pronounced blue shadow on hover */
    transform: translateY(-1px); /* Slight lift effect */
}

/* --- Focus Effect (when the user clicks into the box) --- */
.search-box:focus {
    border-color: #007bff; /* Primary blue border on focus */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Bootstrap-like focus glow */
    background-color: #ffffff; /* Ensure white background on focus */
    transform: translateY(0); /* Remove lift if coming from hover, keep stable on focus */
}

/* --- Responsive adjustment for screens smaller than 768px --- */
@media (max-width: 767.98px) {

.save-scores-btn {
    /* Positioning (remains fixed) */
    position: fixed;
    top: 0.1cm;
    right: 2.2cm;
    z-index: 1001;
   padding: 2px 2px; /* Adjust padding for the new internal layout */
    font-size: 0.4rem;
}


.save-reminder-btn {
    /* Basic Button Styling */
    margin: 5px auto; /* Center the button horizontally on the page and add top margin */
    padding: 5px 5px; /* Generous padding for a clear message */
    font-size: 0.5rem; /* Clear, readable font size */
   gap: 5px; /* Adjust as needed */
}

    .searchdiv {
        flex-direction: column; /* Stack search boxes vertically */
        align-items: center; /* <-- THIS IS THE KEY CHANGE: Horizontally centers items when flex-direction is column */
        gap: 8px; /* Slightly reduced gap between stacked boxes */
        margin: 5px; /* <-- THIS CENTERS THE ENTIRE .searchdiv BLOCK ON THE PAGE */
        padding: 10px; /* Keep padding */
    }

    .search-box {
        width: 100%; /* Make search boxes full width within the .searchdiv on small screens */
        max-width: 250px; /* Optional: set a max-width to prevent them from becoming too wide */
    }
}

/* NEW CSS FOR THE TOPICS TABLE LOOK AND SPREAD ON SCREEN*/
/* Section Container Styling */
/* Section Container Styling */
.student_detail_section {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Adjusted width to cover almost 100% of the screen with some margin */
    width: calc(100% - 200px); /* 100% viewport width minus 20px on each side */
    margin: 30px auto; /* Center the section on the page */
    border: 1px solid #e0e0e0;
    box-sizing: border-box; /* Ensures padding is included in the width calculation */
    max-width: 1200px;
    overflow-x: auto;
}

.student_detail_section2 {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Adjusted width to cover almost 100% of the screen with some margin */
    width: calc(100% - 40px); /* 100% viewport width minus 20px on each side */
    margin: 30px auto; /* Center the section on the page */
    border: 1px solid #e0e0e0;
    box-sizing: border-box; /* Ensures padding is included in the width calculation */
    max-width: 900px;
}


.student_detail_section3 {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Adjusted width to cover almost 100% of the screen with some margin */
    width: calc(100% - 10px); /* 100% viewport width minus 20px on each side */
    margin: 10px auto; /* Center the section on the page */
    border: 1px solid #e0e0e0;
    box-sizing: border-box; /* Ensures padding is included in the width calculation */
    max-width: 1400px;
    overflow-x: auto;
    gap: 10px;
}

.container-center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 10vh;
    background-color: #EEE2DC; /* bg-gray-100 */
    padding: 1rem; /* p-4 */
  }

  .form-card {
    width: 100%; /* w-full */
    max-width: 42rem; /* max-w-2xl */
    background-color: #ffffff; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
  }

  .form-row {
    display: flex;
    flex-direction: column; /* flex-col  student_detail_section */
    gap: 1rem; /* space-y-4 */
  }

  @media (min-width: 768px) { /* md breakpoint */
    .form-row {
      flex-direction: row; /* md:flex-row */
      gap: 1rem; /* md:space-x-4 */
    }
  }

  .form-col {
    width: 100%; /* w-full */
  }

  /* Added custom class for spacing on small screens */
  .form-col-spacing {
    margin-bottom: 1rem; /* Equivalent to mb-4 */
  }

  @media (min-width: 768px) { /* md breakpoint */
    .form-col {
      width: 50%; /* md:w-1/2 */
    }
    .form-col-spacing {
      margin-bottom: 0; /* Equivalent to md:mb-0 */
    }

  }

  .form-label {
    display: block;
    color: #374151; /* text-gray-700 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 700; /* font-bold */
    margin-bottom: 0.5rem; /* mb-2 */
  }

  .custom-select {
    display: block;
    -webkit-appearance: none; /* For Safari/Chrome */
    -moz-appearance: none; /* For Firefox */
    appearance: none;
    width: 100%; /* w-full */
    background-color: #ffffff; /* bg-white */
    border: 1px solid #d1d5db; /* border border-gray-300 */
    color: #374151; /* text-gray-700 */
    padding: 0.75rem 1rem; /* py-3 px-4 */
    padding-right: 2rem; /* pr-8 */
    border-radius: 0.375rem; /* rounded-md */
    line-height: 1.25; /* leading-tight */
    outline: none; /* focus:outline-none */
    transition: all 0.3s ease-in-out; /* transition duration-300 ease-in-out */
  }

  .custom-select:focus {
    background-color: #ffffff; /* focus:bg-white */
    border-color: #3b82f6; /* focus:border-blue-500 */
  }

  .custom-select:hover {
    border-color: #3b82f6; /* hover:border-blue-500 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* hover:shadow-md */
  }

  .select-arrow {
    pointer-events: none;
    position: absolute;
    top: 50%; /* Center vertically */
    right: 0.5rem; /* Adjust as needed */
    transform: translateY(-50%); /* Center vertically */
    display: flex;
    align-items: center;
    padding-left: 0.5rem; /* px-2 */
    padding-right: 0.5rem; /* px-2 */
    color: #374151; /* text-gray-700 */
  }
  .form-group-select {
    display: flex; /* Enables flexbox for horizontal alignment */
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
    align-items: center; /* Vertically aligns items in the middle */
    margin-bottom: 15px; /* Adds some space below the group */
}

.form-group-select label {
    flex: 0 0 auto; /* Label takes only as much space as it needs, doesn't grow or shrink */
    margin-right: 15px; /* Space between label and select input */
    margin-bottom: 0; /* Remove bottom margin to align horizontally */
    font-weight: bold;
    color: #333;
    font-size: 1rem;
}

.form-group-select select {
    flex: 1 1 auto; /* Allows the select to grow and shrink, taking up available space */
    min-width: 150px; /* Ensures the select doesn't get too narrow on small screens */
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    font-size: 1rem;
    color: #555;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%20viewBox%3D%220%200%20292.4%20292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%20163.5L147.5%20292.4%208%20163.5%2031%20140.5%20147.5%20245.5%20264%20140.5z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 12px top 50%;
    background-size: 12px auto;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group-select select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Style for disabled option */
.form-group-select select option[disabled] {
    color: #999;
}

@media (max-width: 768px) {
    .form-group-select {
        flex-direction: column; /* Stacks items vertically on smaller screens */
        align-items: flex-start; /* Aligns stacked items to the left */
    }

    .form-group-select label {
        margin-right: 0; /* Remove right margin when stacked */
        margin-bottom: 8px; /* Add bottom margin back for stacking */
        font-size: 0.95rem;
    }

    .form-group-select select {
        width: 100%; /* Ensures full width when stacked  container1 */
        padding: 9px 10px;
        font-size: 0.95rem;
    }

    .student_detail_section {
        width: 95%;
        padding: 5px;
    }

    .student_detail_section2 {
        width: 95%;
        padding: 5px;
    }

    .student_detail_section3 {
        width: 95%;
        padding: 5px;
    }
}

@media (max-width: 480px) {
    .form-group-select label {
        font-size: 0.9rem;
    }

    .form-group-select select {
        padding: 8px 10px;
        font-size: 0.9rem;
        background-position: right 8px top 50%;
        background-size: 10px auto;
    }
}
/* Container for responsive table behavior */
.table-responsive-container {
    width: 100%;
    overflow-x: auto; /* Enables horizontal scrolling for the table if content overflows */
    -webkit-overflow-scrolling: touch; /* Improves scrolling on iOS */
    margin-bottom: 20px; /* Space below the table */
}

#topicsFrameWorkTable {
    width: 100%; /* Ensures the table tries to take full width */
    border-collapse: collapse; /* For clean borders between cells */
    table-layout: fixed; /* Crucial: This tells the browser to use our defined column widths */
}

/* Style for hidden columns - ensure they stay hidden and consume no space */
#topicsFrameWorkTable th:nth-child(1), /* TopicCompetencyId */
#topicsFrameWorkTable td:nth-child(1),
#topicsFrameWorkTable th:nth-child(2), /* ClassId */
#topicsFrameWorkTable td:nth-child(2),
#topicsFrameWorkTable th:nth-child(3), /* SubjectId */
#topicsFrameWorkTable td:nth-child(3) {
    display: none; /* Keep these columns completely hidden */
    width: 0; /* Ensures they don't consume any width */
    min-width: 0;
    max-width: 0;
    padding: 0;
    border: none; /* No border for hidden columns */
}

/* Adjusted Column Widths for Visible Columns */
/* Percentages now explicitly dictate the width. */
#topicsFrameWorkTable th:nth-child(4), /* Subject */
#topicsFrameWorkTable td:nth-child(4) {
    width: 15% !important;
}

#topicsFrameWorkTable th:nth-child(5), /* Class */
#topicsFrameWorkTable td:nth-child(5) {
    width: 5% !important;
}

#topicsFrameWorkTable th:nth-child(6), /* Term */
#topicsFrameWorkTable td:nth-child(6) {
    width: 8% !important;
}

#topicsFrameWorkTable th:nth-child(7), /* Theme */
#topicsFrameWorkTable td:nth-child(7) {
    width: 15% !important;
}

#topicsFrameWorkTable th:nth-child(8), /* Topic Number */
#topicsFrameWorkTable td:nth-child(8) {
    width: 7% !important;
}

#topicsFrameWorkTable th:nth-child(9), /* Topic */
#topicsFrameWorkTable td:nth-child(9) {
    width: 15% !important;
}

#topicsFrameWorkTable th:nth-child(10), /* Competency */
#topicsFrameWorkTable td:nth-child(10) {
    width: 25% !important;
}

#topicsFrameWorkTable th:nth-child(11), /* Select */
#topicsFrameWorkTable td:nth-child(11) {
    width: 10% !important;
}

/*ASSIGNING WIDTHS TO THE TOPICS TABLE BY FORCE FOR BETTER VIEW*/
/* This selector seems to target a different table. If this is still relevant, keep it. */
#topicsTable th:nth-child(6),
#topicsTable td:nth-child(6) {
    width: 40% !important;
}

#topicsTable th:nth-child(7),
#topicsTable td:nth-child(7) {
    width: 10% !important;
}

#topicsTable th:nth-child(8),
#topicsTable td:nth-child(8) {
    width: 20% !important;
}

/*.student_detail_section*/

#topicsTable th:nth-child(7),
#topicsTable td:nth-child(7) {
    width: 10% !important;
}

#topicsTable th:nth-child(8),
#topicsTable td:nth-child(8) {
    width: 10% !important;
}

#topicsTable th:nth-child(9),
#topicsTable td:nth-child(9) {
    width: 10% !important;
}


/* --- Responsive Container for Horizontal Scroll --- */
/* This wrapper is still essential for horizontal scrolling if the table becomes too wide */
.table-responsive-scroll {
    overflow-x: auto; /* Enables horizontal scrolling when content overflows */
    -webkit-overflow-scrolling: touch; /* Improves scrolling performance on iOS devices */
}


/* --- Responsive Adjustments for Table Content --- */

@media (max-width: 767px) { /* Changed to 767px for consistency with common mobile breakpoints */
    #topicsFrameWorkTable th,
    #topicsFrameWorkTable td {
        /* white-space: normal; <-- This is the default, so we don't need to explicitly set it unless overridden elsewhere */
        font-size: 0.9em; /* Slightly smaller font */
        padding: 8px 6px; /* Adjust padding for better fit */
        /*
        min-width properties here will encourage wrapping first,
        and then contribute to the overall table's min-width if
        content requires more space than the percentage.
        */
    }

    /* Adjust specific column widths/min-widths for mobile if needed for better wrapping */
    #topicsFrameWorkTable th:nth-child(4), /* Subject */
    #topicsFrameWorkTable td:nth-child(4) {
        width: 15% !important; /* Keep original percentage or adjust to allow wrapping */
        min-width: 80px; /* Example: ensure Subject column is at least 80px wide */
    }
    #topicsFrameWorkTable th:nth-child(7), /* Theme */
    #topicsFrameWorkTable td:nth-child(7) {
        width: 15% !important;
        min-width: 100px; /* Example: ensure Theme column is at least 100px wide */
    }
    #topicsFrameWorkTable th:nth-child(9), /* Topic */
    #topicsFrameWorkTable td:nth-child(9) {
        width: 15% !important;
        min-width: 120px; /* Example: ensure Topic column is at least 120px wide */
    }
    #topicsFrameWorkTable th:nth-child(10), /* Competency */
    #topicsFrameWorkTable td:nth-child(10) {
        width: 25% !important;
        min-width: 150px; /* Example: ensure Competency column is at least 150px wide for readability */
    }
    #topicsFrameWorkTable th:nth-child(11), /* Select */
    #topicsFrameWorkTable td:nth-child(11) {
        width: 10% !important;
        min-width: 60px; /* Ensure select column is visible */
    }


    /* Set a minimum width for the table itself.
       This will cause the table to scroll horizontally ONLY IF
       the total width required by the *wrapped* content in columns
       exceeds the viewport width.
       You might need to experiment with this value.
    */
    #topicsFrameWorkTable {
        min-width: 600px; /* This is an example; adjust based on your actual content and column readability */
        /* If the table still appears too narrow and you want more horizontal space (even with wrapping),
           increase this min-width value. */
    }
}

@media (max-width: 480px) {
    #topicsFrameWorkTable th,
    #topicsFrameWorkTable td {
        padding: 6px 4px; /* Further reduce padding */
        font-size: 0.8em; /* Even smaller font */
    }

    /* Further adjust min-widths for very small screens if necessary */
    #topicsFrameWorkTable {
        min-width: 500px; /* Adjust for very narrow screens */
    }
}
.hidePresetList2 {
    position: fixed; /* Fixes the element relative to the viewport */
    top: 1cm;      /* 0.9 cm from the top of the viewport */
    left: 1cm;         /* Aligned to the left edge of the viewport */
    padding: 2px;   /* Add some padding around the buttons for spacing */
     display: flex;   /* Use flexbox to keep buttons in the same line */
    gap: 15px;       /* Space between the buttons */
    align-items: center; /* Vertically align items in the middle */
    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent background */
    border-radius: 0 8px 8px 0; /* Rounded right corners */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Base button styles  scoresTable1 */
.hidePresetList2 button {
    padding: 5px 5px; /* Ample padding for touch targets */
    border: none;       /* Remove default border */
    border-radius: 5px; /* Slightly rounded corners */
    cursor: pointer;    /* Indicate clickable */
    font-size: 0.7rem; /* Readable font size */
    font-weight: bold;  /* Make text bold */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transitions */
    display: flex;      /* Use flex for icon and text alignment */
    align-items: center; /* Align icon and text vertically */
    margin: 5px;
}

.hidePresetList2 button i {
    font-size: 1rem; /* Slightly larger icon */
}


/* Specific styles for ADD EXTRA STUDENT button */
#addStudents {
    background-color: #28a745; /* Bootstrap success green */
    color: white;
}

#addStudents:hover {
    background-color: #218838; /* Darker green on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* More prominent shadow on hover */
}

#addStudents:active {
    background-color: #1e7e34; /* Even darker on click */
    transform: translateY(0); /* Reset lift */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Smaller shadow on click */
}


#changeMode {
    background-color: #2800FF; /* Bootstrap success green */
    color: white;
}

#changeMode:hover{
    background-color: #2188FF; /* Darker green on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* More prominent shadow on hover */
}

#changeMode:active {
    background-color: #1e7eFF; /* Even darker on click */
    transform: translateY(0); /* Reset lift */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Smaller shadow on click */
}


#changeMode2 {
    background-color: #2800FF; /* Bootstrap success green */
    color: white;
}

#changeMode2:hover{
    background-color: #2188FF; /* Darker green on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* More prominent shadow on hover */
}


#changeMode2:active {
    background-color: #1e7eFF; /* Even darker on click */
    transform: translateY(0); /* Reset lift */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Smaller shadow on click hidePresetList */
}


/* Specific styles for DELETE STUDENT button  photoPreview */
#closeListBtn4 {
    background-color: #dc3545; /* Bootstrap danger red */
    color: white;
}

#closeListBtn4:hover {
    background-color: #c82333; /* Darker red on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#closeListBtn4:active {
    background-color: #bd2130; /* Even darker on click */
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .hidePresetList2 {
        top: 4px; /* Adjust top position for smaller screens */
        left: 4px; /* Adjust left position for smaller screens */
        gap: 5px; /* Reduce space between stacked buttons */
        padding: 2px; /* Slightly less padding */
        border-radius: 8px; /* Uniform rounded corners */
        background-color: rgba(255, 255, 255, 0.95); /* Slightly less transparent */
      }

    .hidePresetList2 button {
        padding: 1px 1px; /* Adjust padding */
        font-size: 0.4rem; /* Slightly smaller font */
        justify-content: center; /* Center content horizontally when stacked */
      font-weight: normal;  /* Make text bold */
    }

}



/* Base styling for the "Add Student" link-button within the table */
.add-student-table-btn {
    /* Make it behave like an inline-block button */
    display: inline-flex; /* Use inline-flex for alignment with text/icon */
    align-items: center; /* Vertically center icon and text */
    justify-content: center; /* Center content if width is greater than text */
    
    padding: 8px 12px; /* Good padding for a compact button */
    border: 1px solid #28a745; /* Green border */
    border-radius: 5px; /* Slightly rounded corners */
    text-decoration: none; /* Remove underline from link */
    font-size: 0.9rem; /* Appropriate font size for a table button */
    font-weight: bold; /* Make text bold */
    cursor: pointer; /* Indicate it's clickable */
    white-space: nowrap; /* Prevent text from wrapping inside the button */

    /* Green color scheme */
    background-color: #28a745; /* Bootstrap success green */
    color: white; /* White text */

    /* Smooth transitions for effects */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease;
}

/* Icon styling within the link-button */
.add-student-table-btn i {
    font-size: 1em; /* Icon size relative to button text */
    margin-right: 5px; /* Space between icon and text */
}

/* Hover effect */
.add-student-table-btn:hover {
    background-color: #218838; /* Darker green on hover */
    border-color: #1e7e34; /* Darker border on hover */
    transform: translateY(-1px); /* Subtle lift */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Soft shadow on hover */
}

/* Active (click) effect */
.add-student-table-btn:active {
    background-color: #1e7e34; /* Even darker green on click */
    border-color: #1c7430; /* Darkest border on click */
    transform: translateY(0); /* Press down effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Smaller shadow on click */
}

/* Optional: Focus style for accessibility */
.add-student-table-btn:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); /* Green focus ring */
}

#addStudentsTable {
    width: 100% !important;
}
#addStudentsTable th:nth-child(2),
#addStudentsTable td:nth-child(2) {
 width: 20% !important;
}

#addStudentsTable th:nth-child(3),
#addStudentsTable td:nth-child(3) {
 width: 40% !important;
}

#addStudentsTable th:nth-child(4), 
#addStudentsTable td:nth-child(4) {
 width: 15% !important;
}

#addStudentsTable th:nth-child(5),
#addStudentsTable td:nth-child(5) {
 width: 15% !important;
}

#addStudentsTable th:nth-child(6),
#addStudentsTable td:nth-child(6) {
 width: 10% !important;
}

.multidelete {
    /* Basic button styling */
    display: inline-flex; /* Align icon and text horizontally */
    align-items: center; /* Vertically center icon and text */
    background-color: #dc3545; /* Bootstrap's 'danger' red */
    color: white; /* White text for high contrast */
    border: 1px solid #dc3545; /* Matching border */
    padding: 0.5rem 1rem; /* Generous padding for a button feel */
    border-radius: 0.3rem; /* Slightly rounded corners */
    font-weight: 600; /* Bolder text for emphasis */
    text-decoration: none; /* Remove underline from the link */
    cursor: pointer; /* Indicate it's clickable */

    /* Smooth transitions for hover and active states */
    transition: background-color 0.2s ease-in-out,
                border-color 0.2s ease-in-out,
                box-shadow 0.2s ease-in-out,
                transform 0.2s ease-in-out;

    /* Subtle shadow for a raised appearance */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ensure the icon inside the button is also white */
.multidelete i {
    color: white;
}

/* --- Hover Effect --- */
.multidelete:hover {
    background-color: #c82333; /* Darker red on hover */
    border-color: #bd2130; /* Darker border on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* More pronounced shadow */
    transform: translateY(-1px); /* Creates a subtle "lift" effect */
}

/* --- Active (Click) Effect --- */
.multidelete:active {
    background-color: #bd2130; /* Even darker red when clicked */
    border-color: #b21f2d; /* Even darker border when clicked */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Deeper, smaller shadow for a "pressed" look */
    transform: translateY(0); /* Resets the lift, simulating a push down */
}

/* addStudents  scores_allocation1 hidePresetList2 */

/* Base styles for the multiselect link */
/* Base styles for the multi-select button */
.multiselect {
    display: inline-flex;
    /* Allows icon and text to sit nicely together */
    align-items: center;
    /* Vertically aligns icon and text */
    padding: 10px 20px;
    /* More generous padding for a better feel */
    border: 1px solid #007bff;
    /* A subtle border in a primary blue */
    border-radius: 8px;
    /* Softer rounded corners */
    text-decoration: none;
    /* Removes underline from the link */
    color: #007bff;
    /* Primary text color */
    background-color: #ffffff;
    /* White background */
    font-weight: 600;
    /* Slightly bolder text for prominence */
    font-size: 15px;
    /* Slightly larger readable font size */
    transition: all 0.3s ease;
    /* Smooth transitions for all interactive states */
    cursor: pointer;
    /* Indicates it's clickable */
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.15);
    /* A more prominent and colored shadow for depth */
    position: relative;
    /* Needed for potential pseudo-elements or absolute positioning */
    overflow: hidden;
    /* Ensures content stays within rounded corners */
}

/* Icon specific styles */
.multiselect i {
    font-size: 18px;
    /* Slightly larger icon for better visibility */
    margin-right: 10px;
    /* More space between icon and text */
    color: #007bff;
    /* Icon color, matching the text */
}

/* Hover effects */
.multiselect:hover {
    color: #ffffff;
    /* Text turns white on hover */
    background-color: #0069d9;
    /* Darker blue background on hover */
    border-color: #0062cc;
    /* Darker border color */
    box-shadow: 0 6px 15px rgba(0, 105, 217, 0.3);
    /* More prominent and darker shadow on hover */
    transform: translateY(-3px);
    /* More noticeable lift effect */
}

/* Click (active) effects */
.multiselect:active {
    color: #ffffff;
    /* Text remains white on click */
    background-color: #0056b3;
    /* Even darker blue on click */
    border-color: #004d9e;
    /* Even darker border color */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Flatter shadow on click */
    transform: translateY(0);
    /* Returns to original position */
}

/* Focus styles for keyboard navigation and accessibility */
.multiselect:focus {
    outline: none;
    /* Remove default outline */
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.4);
    /* Custom, more prominent focus ring */
}

/* --- Responsive Adjustments for Small Devices (less than 768px) --- */
@media (max-width: 768px) {
    .multiselect {
        display: flex;
             width: 100%;
        /* Take up full width of parent on small screens */
        justify-content: center;
        /* Center content horizontally */
        padding: 5px 10px;
        /* Adjust padding for smaller screens */
        font-size: 11px;
        /* Slightly smaller font size */
        margin-bottom: 10px;
       
    }

    .multiselect i {
        font-size: 11px;
        /* Adjust icon size */
        margin-right: 8px;
        /* Adjust margin */
    }
}
/* Basic Styling for the container - VERY COMPACT */
.pdf-options-containerx {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px; /* Even smaller border-radius */
    padding: 10px; /* Significantly reduced padding */
    margin: 10px auto; /* Reduced margin */
    max-width: 600px; /* Increased max-width to accommodate horizontal radios better */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* Lighter, smaller shadow */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Added for centering the whole container on smaller screens if needed */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally within the container */
}

.select-labelx {
    font-size: 0.85em; /* Significantly reduced font size */
    font-weight: bold;
    color: #343a40;
    margin-bottom: 10px; /* Reduced margin */
    text-align: center;
}

/* --- Radio Group Styling - HORIZONTAL & COMPACT --- */
.radio-groupx {
    display: flex; /* Changed to flex for horizontal layout */
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
    justify-content: center; /* Centers the radio options horizontally */
    gap: 10px; /* Gap between radio options */
    margin-bottom: 12px; /* Reduced margin */
    width: 100%; /* Ensure it takes full width of its parent to allow centering */
}

.radio-groupx input[type="radio"] {
    display: none; /* Hide the default radio button */
}

.radio-labelx {
    display: flex;
    flex-direction: column; /* Stack icon and text vertically within each radio option */
    align-items: center; /* Center content horizontally within each radio option */
    text-align: center; /* Center text within each radio option */
    background-color: #ffffff;
    border: 1px solid #ced4da; /* Thinner border */
    border-radius: 4px; /* Smaller border-radius */
    padding: 8px 10px; /* Significantly reduced padding */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); /* Very subtle shadow */
    min-width: 120px; /* Give each radio option a minimum width */
    flex: 1; /* Allow items to grow and shrink */
    max-width: 48%; /* Max width to allow two items per row for larger screens if gap allows */
}

.radio-labelx:hover {
    border-color: #86b7fe;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); /* Subtle hover shadow */
}

/* Style for the selected radio button */
.radio-groupx input[type="radio"]:checked + .radio-labelx {
    border-color: #007bff;
    background-color: #e7f3ff;
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.1); /* Subtle selected shadow */
}

.radio-iconx {
    font-size: 1.6em; /* Slightly increased icon size for prominence */
    color: #6c757d;
    margin-bottom: 5px; /* Space between icon and text */
    line-height: 1;
}

.radio-groupx input[type="radio"]:checked + .radio-labelx .radio-iconx {
    color: #007bff;
}

.radio-textx {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center text lines */
}

.radio-textx .main-textx {
    font-size: 0.9em; /* Significantly reduced font size */
    font-weight: 600;
    color: #495057;
}

.radio-groupx input[type="radio"]:checked + .radio-labelx .main-textx {
    color: #0056b3;
}

.radio-textx .sub-textx {
    font-size: 0.7em; /* Significantly reduced font size */
    color: #6c757d;
    margin-top: 1px; /* Reduced margin */
}

/* Button Container for alignment */
.button-containerx {
    text-align: center;
    width: 100%; /* Ensure button container spans full width for centering */
}

/* Adjust the primary button (assuming Bootstrap btn-primary styling) - VERY COMPACT */
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    padding: 8px 18px; /* Reduced padding */
    font-size: 0.9em; /* Reduced font size */
    border-radius: 3px; /* Even smaller border-radius */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Softer hover shadow */
}

.btn-primary i {
    margin-right: 5px; /* Reduced margin */
    font-size: 0.95em; /* Ensure icon scales with text */
}

/* --- Responsive adjustments --- */
@media (max-width: 500px) { /* Adjust breakpoint for mobile-first stacking */
    .radio-groupx {
        flex-direction: column; /* Stack radio options vertically on smaller screens */
        align-items: center; /* Center stacked items */
    }

    .radio-labelx {
        max-width: 100%; /* Take full width when stacked */
        min-width: unset; /* Remove min-width when stacked */
        padding: 10px 15px; /* Slightly more padding when stacked */
    }
    
    .radio-iconx {
        font-size: 1.5em;
    }
    .radio-textx .main-textx {
        font-size: 0.85em;
    }
    .radio-textx .sub-textx {
        font-size: 0.75em;
    }
}

/* Further condense for very small screens if needed */
@media (max-width: 380px) {
    .pdf-options-containerx {
        padding: 8px;
        margin: 8px auto;
        max-width: 95%; /* Allow it to shrink more */
    }
    .radio-labelx {
        padding: 8px 12px;
    }
    .radio-iconx {
        font-size: 1.3em;
    }
    .radio-textx .main-textx {
        font-size: 0.8em;
    }
    .radio-textx .sub-textx {
        font-size: 0.7em;
    }
    .btn-primary {
        padding: 7px 15px;
        font-size: 0.8em;
    }
}


/* Container for score input and comment textarea */
.score_div {
    display: flex; /* Makes children (input, textarea) sit on the same line */
    gap: 10px; /* Space between the input and textarea */
    margin-bottom: 15px; /* Space below this div */
    align-items: center; /* Vertically align items if they have different heights */

    /* --- Centering changes below --- */
    max-width: 600px; /* Set a maximum width for the div itself (adjust as needed) */
    margin-left: auto;   /* Centers the block horizontally */
    margin-right: auto;  /* Centers the block horizontally */
    /* Or simply: margin: 0 auto 15px auto; (top, right, bottom, left) */

    /* Add padding to prevent content from touching the screen edges on small devices */
    padding: 0 15px; /* 15px padding on left/right for responsiveness */
    box-sizing: border-box; /* Ensures padding is included in the max-width */
}

/* Responsive adjustment for small screens: remove max-width to allow full width */
@media (max-width: 767px) {
    .score_div {
        max-width: 100%; /* Allow it to take full width on smaller screens */
        padding: 0 10px; /* Adjust padding for smaller screens */
    }
}

/* --- Base styling for score input and comment textarea --- */
.student_score_class,
.student_comment_class {
    width: 100%; /* Make them try to take full width of their parent */
    box-sizing: border-box; /* Include padding and border in the element's total width */
    padding: 12px 15px; /* More generous padding for better touch targets and feel */
    border: 1px solid #d1d5db; /* Softer, light gray border */
    border-radius: 8px; /* Softer rounded corners */
    font-size: 1rem; /* Standard readable font size */
    font-family: inherit; /* Inherit font from body/parent for consistency */
    color: #374151; /* Darker text color for better contrast */
    margin: 0; /* Crucial: Remove any default or inherited margins */
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Smooth transitions */
    outline: none; /* Remove default browser outline */
    flex-grow: 1; /* Allows them to grow and take available space within a flex container */
}

/* Focus styles for both inputs */
.student_score_class:focus,
.student_comment_class:focus {
    border-color: #3b82f6; /* A vibrant blue border on focus */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3); /* A glowing blue effect on focus */
}

/* Hover styles for both inputs */
.student_score_class:hover,
.student_comment_class:hover {
    border-color: #9ca3af; /* Slightly darker gray border on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow on hover */
}


/* --- Specific styling for score input --- */
.student_score_class {
    max-width: 400px; /* Constrain max-width for larger screens */
    text-align: center; /* Center the text inside the input */
    font-weight: bold; /* Make the score text bold */
    font-size: 1.2rem; /* Slightly larger font for score */
}

/* --- Specific styling for comment textarea --- */
.student_comment_class {
    resize: vertical; /* Allow only vertical resizing */
    min-height: 80px; /* Ensure it has a good initial height for comments */
    max-height: 200px; /* Prevent it from getting excessively tall */
    /* If the parent is a flex container, these can be useful to ensure it takes space */
    min-width: 0; /* Important for flex items to prevent content overflow */
}


/* --- Responsive Adjustments for Small Devices (less than 768px) --- */
@media (max-width: 768px) {
    .student_score_class,
    .student_comment_class {
        width: 100% !important; /* Force full width on small screens */
        margin: 0 !important; /* Remove any external margins */
        padding: 10px 12px; /* Adjust padding for smaller screens */
        font-size: 0.95rem; /* Slightly smaller font for mobile */
        margin-bottom: 15px; /* Add space between stacked inputs/elements */
    }

    .student_score_class {
        max-width: 100% !important; /* Override max-width to make it full width on mobile */
        font-size: 1.1rem; /* Adjust score font size for mobile */
    }

    .student_comment_class {
        min-height: 70px; /* Slightly reduce min-height for mobile if desired */
        max-height: 150px; /* Adjust max-height for mobile if desired */
    }
}

/* Container for buttons */
.buttonDiv {
    display: flex;
    gap: 10px; /* Space between buttons */
    justify-content: center; /* Center buttons horizontally */
    margin-bottom: 20px; /* Space below the buttons */
}

/* Base styling for buttons */
.addScoreClass,
.deleteScoreClass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px; /* Generous padding */
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap; /* Prevent text/icon wrapping */
}

/* Icon specific styles for buttons  scores_allocation2*/
.addScoreClass i,
.deleteScoreClass i {
    font-size: 1.2rem; /* Slightly larger icon */
    margin-right: 8px; /* Space between icon and text (if text is added) */
}

/* --- Add Score Button Styling (Green for success/add) --- */
.addScoreClass {
    background-color: #28a745; /* Bootstrap success green */
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.addScoreClass:hover {
    background-color: #218838; /* Darker green on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.addScoreClass:active {
    background-color: #1e7e34; /* Even darker green on click */
    transform: translateY(0); /* Press down effect */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* --- Delete Score Button Styling (Red for danger/delete) --- */
.deleteScoreClass {
    background-color: #dc3545; /* Bootstrap danger red */
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.deleteScoreClass:hover {
    background-color: #c82333; /* Darker red on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.deleteScoreClass:active {
    background-color: #bd2130; /* Even darker red on click */
    transform: translateY(0); /* Press down effect */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* --- Responsiveness for small devices --- */
@media (max-width: 767.98px) { /* Applies to screens less than 768px wide */
    .score_div {
        flex-direction: column; /* Stack input and textarea vertically */
        align-items: stretch; /* Make them take full width */
    }

    .student_score_class,
    .student_comment_class {
        width: 80%; /* Ensure they take full width when stacked */
        flex-grow: 0; /* Reset flex-grow when stacked */
    }

    .buttonDiv {
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center buttons when stacked */
        gap: 8px; /* Reduce gap when stacked */
    }

    .addScoreClass,
    .deleteScoreClass {
        width: 100%; /* Make buttons take full width when stacked */
        max-width: 250px; /* Optional: limit max width for stacked buttons */
        padding: 10px 15px; /* Adjust padding for stacked buttons */
    }
}