body {
    font-family: 'Arial Narrow', Arial, sans-serif;
    background-color: #EEE2DC;
    margin: 0;
    padding: 0;
}

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

.container1 {
    width: 48%;
    margin: 1px;
    max-height: 1500px; /* 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 */
    }


.container2 {
    width: 48%; /* Adjust the width as needed */
    margin: 1px;
    max-height: 1500px; /* Set the maximum height for the container */
    overflow-y: auto; /* Add a vertical scroll for overflow content */
}


.container3 {
   width: 48%;
   margin: 1px;
   max-height: 2500px; /* 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 */
   }


.container4 {
   width: 48%; /* Adjust the width as needed */
   margin: 1px;
   max-height: 2500px; /* Set the maximum height for the container */
   overflow-y: auto; /* Add a vertical scroll for overflow content */
}

h1{
    color: #123C69;
}


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: 12cm;
   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;
    max-height: 400px; /* Set the maximum height for the container */
    overflow-y: auto; /* Add a vertical scroll for overflow content */
 }

form {
    width: 90%; /* Adjust the width as needed */
    background-color: #EEE2DC;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
   border: 3px solid #AC3B61;
   padding: 10px;
    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;
}



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

section{
   margin :2%;
}

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

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

}


.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: 11px;
   transition: background-color 0.3s ease;
   width: 15%;
   height:auto;
   font-weight: bold;
          
  }
  
  .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: 11px;
      transition: background-color 0.3s ease;
      width: 15%;
      height: auto;   
      font-weight: bold;    
     }
     
  


     .list-btn:hover {
      background-color: #AC3B61;
      color:#FFFFFF;
     }
  .list-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: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.3s ease;
      width: 15%;
      height: auto;   
      font-weight: bold;
      text-decoration: none; 
         margin-top: 12px;   
     }

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


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



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

form input,
form select,
form textarea {
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%;
}



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; 
}
.studentdetails
{
   background-color: #123C69;
   padding: 3px;
   width:70%;
   flex-grow: 1;
   padding-left: 20px;
}


.bookdetails
{
   background-color: #123C69;
   padding: 10px;
   width:95%;
   flex-grow: 1;

}

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

.student-info {
   margin: 5px;
   display: flex; /* Use flex display for the container */
   align-items: center; /* Align items vertically in the center */
   padding: 10px;
   max-width: 12cm;
}




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

}

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

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

.testline {
   display: flex;

}
.searchdiv{
   width: 100%;
   display: flex;
   gap: 5px;
}
.button-container {
   display: flex;
   gap: 20px;/* Adjust this property to change the spacing */
 }
.stream-container {
   display: flex;
   gap: 20px;/* Adjust this property to change the spacing */
 }
 .balance-container {
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 20px;
   justify-content: center; 
}

.sameline-container {
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 20px;
   
}

.sameline-container2 {
   margin-bottom: 10px;
   display: flex;
   align-items: left;
   gap: 20px;
   
}
.table-container {
   width: 90%; /* Adjust the width as needed */
   margin: 10px;
   max-height: 500px; /* Set the maximum height for the container */
   overflow-y: auto; /* Add a vertical scroll for overflow content */
}


.table-container2 {
   width: 98%; /* Adjust the width as needed */
   margin: 1px;
   max-height: 800px; /* Set the maximum height for the container */
   overflow-y: auto; /* Add a vertical scroll for overflow content */
}


.table-container3 {
   width: 98%; /* Adjust the width as needed */
   margin: 1px;
   max-height: 200px; /* Set the maximum height for the container */

   overflow-y: auto; /* Add a vertical scroll for overflow content */
}

.studenttable-container {
   width: 98%; /* Adjust the width as needed */
   margin: 1px;
  
}
.bigger-width{
   width: 80%; 
}

.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;
   text-align: center;
}


.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;
   text-align: center;
}



.receipt-link2:hover {
   background-color: #AC3B61;
    color:#FFFFFF;
}

.shorterlisttable {
   max-height: 10px; /* Set the maximum height for the container */
   overflow-y: auto; /* Add a vertical scroll for overflow content */
   padding: 20px;
}

.studenttable-container {
   max-height: 600px; /* 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 */
   width: 98%;
  
}

.studenttable-container2 {
   max-height: 1500px; /* 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 */
   width: 98%;
  
}


.make-space{
   padding: 4px;
}

.statement-date{
   display: none;
   width: 45%;
   padding: 10px;
   height: 20%;
}

.formpad{
   padding: 10px;
   width: 95%;

}

.formpad2{
   padding: 10px;
     width: 95%;

}

.payment-list-region{
   width: 90%; /* Adjust the width as needed */
   background-color: #EEE2DC;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   border-radius: 20px;
  border: 2px solid #123C69;
  padding:10px;
   text-align: left;

}
.statement-date2 {
   width: 40%;
   padding: 10px;
   height: 20%;
}

.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('IconsFolder/PrintIcon5.png') center/cover;
   display: inline-block;
   vertical-align: middle;
}

.double-table{
   width:60%;
}

.double-div{
   width:40%;
}

.double-button{
   width:95%;
}

.double-button2{
   width:50%;
}

.div-width{
   width: 100%;
}

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

.book-details{
   width :90%
}

@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 */
       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: 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 */
}


.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:95%;
    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 */
   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%;
}

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

.table-container2{
   width: 100%;
}

section{
   margin :1%;
}

.sameline-container2 {
  flex-direction: column;
   
}
.double-table{
   width:100%;
}
   
.double-div{
   width:70%;
}
.double-button{
   width:70%;
}
.double-button2{
   width:48%;
}

.student-info {

   padding-left: 10px;

}
.student-info{
   width:100%;
   margin: 2px;
}


}