body {
     font-family: 'Arial Narrow', Arial, sans-serif;
     background-color: #F7F9FB;
     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;
     overflow:auto;
 }

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

 .container2 {
     width: 50%; /* Adjust the width as needed */
     margin: 1px;
     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 */
 }

.container3 {
     width: 65%;
     margin: 2px;
     max-height: 2000px; /* Set the maximum height for the container Print */
     overflow-y: auto; /* Add a vertical scroll for overflow content */
     border: 1px solid #ddd; /* Add a border for better visibility */
     overflow:auto;
     }
 

 .container4 {
     width: 35%; /* Adjust the width as needed */
     margin: 1px;
     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 */
 }



 h1{
     color: #123C69;
 }


 h2 {
     color:#AC3B61;
     text-align: center;
     
 }
 label {
     color: #123C69;
     
 }

 input{
     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  */
 }

 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: 95%; /* Adjust the width as needed */
     padding: 20px;
     background-color: #F7F9FB;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
 }

 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;
    cursor: pointer;
}


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



/* a.edit-link {
     text-decoration: none;
     padding: 8px 12px;
     /*background-color:#AC3B61;
     color: #fff;
     border-radius: 4px;
     transition: background-color 0.3s ease;
 }

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

 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%;
 }

 
form {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-gap: 15px;
}

form section {
 grid-column: span 2; /* Make the Student's Details section span two columns */
 margin-bottom: 20px;
 padding: 8px;
}

section{
    margin :2%;
}

form .parent-sections {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-gap: 15px;
}

form 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;
}

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: 50%;
}

.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;
 }
 .message {
    margin: 5px auto;
    padding: 5px;
    border-radius: 5px;
    color: black;
    background: lightgreen;
    border: 1px solid #3c763d;
    width: 20%;
    text-align: center;
}
.text-danger
{
	font-size: 25px;
    color: white;
    border-radius: 5px;
    background: #2E8B57;
}


.addnewentry
{
    font-size: 15px;
    color: black;
    border-radius: 18px;
    background: #f44336;
}

.radio-container {
    margin-bottom: 10px;
}

h3 {
    display: inline-block;
    margin-right: 10px;
}

input[type="radio"] {
    display: inline-block;
}
.button-container {

    display: flex;
    gap: 10px;/* Adjust this property to change the spacing */
  }

      
@media (max-width: 768px) {

    .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: 80%; /* Adjust the width as needed IconsFolder */
        height: 80%; /* 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: 40%;
        height:auto;
       font-size: 11px;
               
       }
       .delete-btn {
        /* Add any other styles you want for the button */
    
        width: 40%;
        height:auto;
       font-size: 11px;
               
       }


 table {
     font-size: 11px;
 }
.container {
 flex-direction: column; /* Change to a one-column layout for narrow devices */
 height: 100%;
 max-height: 100%;
 overflow-y: auto;
}

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

#studentForm{
    width: 100%;
    padding: 10px;
    z-index: 5;
}


.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:90%;
     flex-grow: 1;
 }
 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 edit-link */
    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 */ 
    padding: 5px;
}

.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%;
}

form {
    grid-template-columns: 1fr; /* Switch to a single column */
  }

  form section {
    grid-column: span 1; /* Ensure all sections occupy one column */
  }

  form .parent-sections {
    grid-template-columns: 1fr; /* Switch to a single column */
    grid-gap: 10px; /* Slightly reduce the gap for smaller screens */
    width:90%;
  }

  section {
    margin: 5%; /* Increase margin for better spacing on small screens */
  }
}

.btn-excel-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #4CAF50; /* Green background for Excel-like color */
    color: white; /* White text color */
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-decoration: none; /* Remove underline */
    gap: 8px; /* Space between the icons and text */
    transition: background-color 0.3s, transform 0.2s ease-in-out;
  }
  
  .btn-excel-download i {
    font-size: 18px; /* Icon size */
  }
  
  .btn-excel-download:hover {
    background-color: #45a049; /* Darker green on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
  }
  
  .btn-excel-download:active {
    background-color: #388e3c; /* Even darker green when clicked */
  }
  
  .studenttable-container {
    max-height: 900px; /* Set the maximum height for the container */
    overflow-y: auto; /* Enable vertical scrolling for overflow content */
    border: 1px solid #ddd; /* Add a border for better visibility */
    width: 100%; /* Set the width of the container */
    margin: 15px; /* Center the container and add space around it */
    padding: 10px; /* Add padding for better spacing inside the container */
    border-radius: 5px; /* Slightly round the corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for a modern look */
    background-color: #f9f9f9; /* Light background for better contrast */
 
}
  
  /* Add a custom scrollbar for better appearance */
  .studenttable-container::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
  }
  
  .studenttable-container::-webkit-scrollbar-thumb {
    background: #ccc; /* Color of the scrollbar thumb */
    border-radius: 5px; /* Round the edges of the scrollbar thumb */
  }
  
  .studenttable-container::-webkit-scrollbar-thumb:hover {
    background: #aaa; /* Darker color when hovering over the scrollbar */
  }
  
  .studenttable-container::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
  }
  
.make-space{
    padding: 20px;
}

.btn-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin: 10px;
}

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

.btn-upload i {
    font-size: 20px;
}

#upload-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
    .btn-success {
        background-color:#AC3B61; /* Custom green color */
        border: none;
        border-radius: 20px; /* Rounded edges */
        transition: all 0.3s ease;
    }

    .btn-success:hover {
        background-color: #123C69; /* Darker green on hover */
        transform: scale(1.05); /* Slight zoom effect */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
    }

    .btn-success i {
        font-size: 16px;
    }

    .btn-success span {
        font-weight: bold;
        font-size: 14px;
    }

/* 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 */
}
@media (max-width: 768px) {
    .clear-btn .icon {
        width: 50%;
        height: 50%;
    }
    .clear-btn {
        /* Add any other styles you want for the button */
    
        width: 40%;
        height:auto;
       font-size: 11px;
               
       }

}


/*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;
    }
}


table th {
    background-color: #123C69; /* Dark background for headers */
    color: white;
    padding: 2px;
}


table td {
    padding: 2px;
    vertical-align: middle;
}

/* Responsive Table Adjustments */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.hidden-column {
    display: none;
}
/*
.adm_no-column {
    width: 30%; 
}

.name-column {
    width: 60%;
}

.select-column {
    width: 10%; 
}

.adm_no-column2 {
    width: 25%; 
}

.name-column {
    width: 50%;
}

.role-column {
    width: 15%; 
}*/

@media screen and (max-width: 768px) {
    /* Adjust font size for pagination buttons */
    .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;
}
    
.backList {
    display: block;  
}


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

    #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 */
    }
    
.backList {
    display: none;  /* Initially hidden close-btn2 form-section*/
    position: fixed;
    top: 25;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:  #F7F9FB;
     z-index: 10;
    overflow: auto;
    padding: 5px;
    width: 100%;
    height: 87%;
}


.close-btn2 {
    position: absolute;
    top: 25px; /* 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;
    }

}

.narrow-alert.swal2-popup {
    width: 300px;
    padding: 20px;
    background-color: #f0f8ff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.narrow-alert.swal2-title {
    font-size: 1.2em;
    color: #333;
    font-weight: 500;
}

.narrow-alert .swal2-loader{
    width: 40px;
    height: 40px;
}

/* Existing DataTables styling (as provided before) */

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;
}

@media (max-width: 768px) {

    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;
    }
}

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