.containerx {
    display: flex;
    justify-content: space-between;
}
.smallfont {
  font-size: 7px;
}
.fowarddiv {
   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: 60%; /* Cover 80% of the screen horizontally */
   max-width: 1200px; /* Limit width for better readability */
   height: 80%;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.fowarddiv form {
   display: flex;
   flex-direction: column;
   align-items: center; /* Center form elements horizontally */
   width:100%;
}

#book_selection {
  z-index: 18; 
}
.books-center{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.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 */
}


.container10 {
   width: 65%;
   padding: 20px;
}
.container20 {
   width: 35%;
   padding: 20px;
}

.sameline-container-div2 {
   width:80%;
   margin:10px;
}

.inputitem {
   width : 80%;
   min-width: 400px; 
}


.inputitem2 {
  width : 50%;
  min-width: 300px; 
}

@media (max-width: 768px) {
   .inputitem {
       width : 100%;
       min-width: 300px; 
   }

   .inputitem2 {
    width : 100%;
    min-width: 150px; 
  }

   .sameline-container-div2 {
       width:90%;
       margin:5px;
   }
   .containerx {
       flex-direction: column;  
   }
  
   .fowarddiv {
       position: fixed;
       top: 110px; /* 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;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;    
   }


   .fowarddiv form {
       display: flex;
       flex-direction: column;
       align-items: center;
       width: 100%;
       height: auto;
       padding-top: 20px;
   }

   .container10 {
       width: 100%;
       padding: 10px;
   }
   .container20 {
       width: 100%;
       padding: 10px;
   }

}

/* Center the button horizontally */
.reload-button-container {
    display: flex;
    justify-content: center;
    margin-top: 20px; /* Adjust top margin as needed */
    margin-bottom: 20px; /* Adjust bottom margin as needed */
  }
  
  .reload-button {
    display: inline-flex; /* Align icon and text nicely */
    align-items: center;
    gap: 0.5em; /* Space between icon and text */
    padding: 0.75em 1.5em;
    font-size: 1rem;
    border: none;
    border-radius: 0.5em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease-in-out;
  }
  
  /* Default button colors */
  .reload-button {
    background-color: #007bff; /* A nice primary blue */
    color: white;
  }
  
  /* Hover effect */
  .reload-button:hover {
    background-color: #0056b3; /* Darker shade of blue on hover */
    transform: scale(1.05); /* Slightly scale up on hover */
  }
  
  /* Focus effect (for accessibility) */
  .reload-button:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
  }
  
  /* Active (mouse down) effect */
  .reload-button:active {
    transform: scale(0.95); /* Slightly scale down when active */
  }
  
  /* Style for the Bootstrap Icon */
  .reload-button i.bi {
    font-size: 1.2em; /* Adjust icon size */
  }
  
  /* Alternative color scheme (Green) */
  .reload-button.green {
    background-color: #28a745; /* A nice success green */
    color: white;
  }
  
  .reload-button.green:hover {
    background-color: #1e7e34; /* Darker shade of green on hover */
  }
  
  .reload-button.green:focus {
    outline: 2px solid #1e7e34;
    outline-offset: 2px;
  }
  
  /* Alternative color scheme (Teal) */
  .reload-button.teal {
    background-color: #20c997; /* A vibrant teal */
    color: white;
  }
  
  .reload-button.teal:hover {
    background-color: #17a27a; /* Darker shade of teal on hover */
  }
  
  .reload-button.teal:focus {
    outline: 2px solid #17a27a;
    outline-offset: 2px;
  }