/*#new1{
	display: flex;
	
}

#set{
	margin-left:9px;
	width:1219px;

}
 Container for the entire search bar section 
.search-container {
	margin-left:10px;
	width: 300px;
	height: 300px;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

 Heading styling 
.header {
	background-color: #afca0b;
	 Green background 
	color: white;
	padding: 3px;
	text-align: center;
	font-size: 18px;

}

 Textarea for ISBNs 
.search-bar1 {
	width: 100%;
	height: 90%;
	 Takes up most of the container 
	font-size: 16px;
	padding: 10px;
	border: 1px solid #ccc;
	border-top: none;
	 No border at the top so it's seamless with the header 
	border-radius: 0 0 8px 8px;
	resize: none;
	overflow-y: auto;
	 Vertical scrollbar if content exceeds height 
	white-space: pre-wrap;
	 Preserve newlines for vertical list 
	line-height: 1.6;
	font-family: 'Courier New', monospace;
}



 Container for the checkboxes 
.checkbox-container {
	
	width: 160px;
	height:300px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	border: 1px solid #ccc;
}

 Header styling 
.header1 {
	background-color: #afca0b;
	 Green background 
	color: white;
	padding: 3px;
	text-align: center;
	font-size: 18px;

}

 Checkbox list styling 
.checkbox-list {
	padding: 10px;
}

.checkbox-item {
	margin-bottom: 5px;
	color: black;
}

 Styling for the checkbox 
.checkbox-item input {
	margin-right: 10px;
}

button#searchButton {
    margin-left: 68px;
}

/////////////////////////////////////////////////

 General container styles 
.container2 {
	display: flex;
	 Use Flexbox layout for child alignment 
	justify-content: flex-start;
	 Align items at the start (left) 
	gap: 20px;
	 Optional gap between the elements 
	align-items: flex-start;
	 Align items to the top 
}

 Styling for the fileSearch container 
.fileSearch {
	flex: 1;
	 Makes fileSearch take up the available space 
}

 Search bar container 


#label1 {
	color: black;
}

.search-button1,#clickable {
	margin-top: 20px;
	width: 170px;
	background-color:#ffc107;
	 Green background 
	color: white;
	 White text color 
	padding: 4px 8px;
	 Padding for better button size 
	font-size: 16px;
	 Text size 
	border: none;
	 Remove default border 
	border-radius: 5px;
	 Rounded corners 
	cursor: pointer;
	 Show pointer cursor on hover 
	transition: background-color 0.3s ease;
	 Smooth transition for background color 
}

#clickable{
	margin-left:71px;
}
.container4 {
	display: flex;
	 Use Flexbox layout for child alignment 
	justify-content: flex-start;
	 Align items at the start (left) 
	gap: 20px;
	 Optional gap between the elements 
	align-items: flex-start;
	 Align items to the top 
}


.search-container1 {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	margin-left: 64px;
	margin-top: 20px;
	width: 240px;
	height: 300px;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
}


.search-container2 {

	margin-top: 20px;
	width: 240px;
	height: 300px;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


.radio-container {
	width: 320px;
	 Set a fixed width for the container 
	background-color: white;
	 Set background color to white 
	padding: 10px;
	 Add padding inside the container 
	border: 1px solid #ccc;
	 Light border around the container 
	border-radius: 10px;
	 Rounded corners 
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	 Optional shadow 
	font-family: Arial, sans-serif;
	 Set font 
}

 Style for the radio button labels 
.radio-label {
	font-size: 16px;
	 Set font size for labels 
	margin-right: 20px;
	 Space between radio buttons 
	color: black;
}

 Optional radio button customization 
input[type="radio"] {
	margin-right: 5px;
	 Space between radio button and label 
}

 Ensures the radio buttons are displayed in a row 
.radio-group {
	display: flex;
	align-items: center;
	 Vertically center the radio buttons 
}


.heading1 {
	color: #afca0b
}

.container3 {
	 Use Flexbox layout for child alignment 
	 Align items at the start (left) 
	gap: 20px;
	 Optional gap between the elements 
	align-items: flex-start;
	 Align items to the top 
}


.search-container3 {
	margin-left: 20px;
	margin-top: 20px;
	width: 250px;
	height: 150px;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
}

.radio-group1 {
	
	align-items: center;
	 Vertically center the radio buttons 

}



.dropdown {
      position: relative;
      display: inline-block;
	  margin-top: 16px;
    }

     Style the dropdown button 
    .dropdown-button,#butt1,.dropdown-button11,#butt3 {
      padding: 11px 20px;
      font-size: 16px;
      cursor: pointer;
      border: 1px solid #ccc;
      background-color:#afca0b;
      border-radius: 5px;
      display: inline-block;
	  color:white;
	  
    }

     Style the dropdown menu (initially hidden) 
    .dropdown-menu {
      display: none;
      position: absolute;
      background-color: white;
      min-width: 60px;
      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
      z-index: 1;
      border-radius: 5px;
      margin-top: 5px;
      padding: 10px 0;
    }

     Style the menu items 
    .dropdown-menu a {
      color: black;
      padding: 2px 7px;
      text-decoration: none;
      display: block;
    }

     Change background color of menu items on hover 
    .dropdown-menu a:hover {
      background-color: #f1f1f1;
    }

     Show the dropdown when the button is clicked 
    .dropdown.open .dropdown-menu {
      display: block;
	  width:20px;
	 
    }
	.dropdown.open{
		height: 48px;
		margin-top:17px;
	}
	

	#dropone a{
		text-decoration:none;
	}

	#dropone a:hover{
		transition:  all 0.5s ease;
		color:white;
		background-color:#afca0b;
	}

	#arrow{
		margin-left: 7px;
	}
	
	.dropdown1 {
		margin-top:20px;
	           position: relative;
	           display: inline-block;
	       }

	       .dropdown-button1 {
	           background-color:#afca0b;  Green 
	           color: white;
	           padding: 10px 20px;
	           font-size: 16px;
	           border: none;
	           cursor: pointer;
	           border-radius: 5px;
	       }

	       

	       .dropdown-menu1 {
			width:200px;
	           display: none;  Hide the dropdown menu initially 
	           position: absolute;
	           background-color: #f9f9f9;
	           min-width: 160px;
	           box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
	           z-index: 1;
	           border-radius: 5px;
	       }

	       .dropdown-menu1 a {
	           color: black;
	           padding: 5px 8px;
	           text-decoration: none;
	           display: block;
	       }

	       .dropdown-menu1 a:hover {
	           background-color: #f1f1f1;  Highlight option on hover 
	       }

	        Nested dropdown styling for Option A 
	       .dropdown-submenu {
			list-style: none;
	           position: relative;
	       }

	       .dropdown-submenu .dropdown-menu2 {
			list-style: none;
			width:200px;
	           display: none;
	           position: absolute;
	           top: 0;
	           left: 100%;  Open to the right 
	           background-color: #f9f9f9;
	           min-width: 500px;
	           box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
	           border-radius: 5px;
			   
	       }

	       .dropdown-submenu a {
	           cursor: pointer;
	       }
	
		   
		   #arrow2{
			float:right;
		   }
		   
		   
		   li.dropdown-submenu a{
			text-decoration:none;
		   }
		   
		  li.dropdown-submenu a:hover{
		   		transition:  all 0.5s ease;
		   		color:white;
		   		background-color:#afca0b;
		   	}
			
			.refresh-button {
			    padding: 3px 8px;
			    background-color:#afca0b;
			    color: white;
			    border: none;
			    cursor: pointer;
			    border-radius: 5px;
			    font-size: 16px;
			}
			
			#refreshButton{
				float:right;
			}

			#butt1{
			margin-left: 10px;
			    width: 122px;
			    height: 47px;
			    margin-top: 16px;
			}

			.dropdown-menu11 {
			  display: none;
			  position: absolute;
			  background-color: #f9f9f9;
			  min-width: 143px;
			  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
			  z-index: 1;
			}

			.dropdown-menu11 a {
			  color: black;
			  padding: 8px 16px;
			  text-decoration: none;
			  display: block;
			}

		
			.dropdown-menu11 a:hover {
			color:black;
			  background-color:#afca0b;
			  text-decoration: none;
			}
			.dropdown11 {
				
				margin-left:150px;
				
			}
			
			#butt3 {
			    width: 140px;
			    height: 43px;
			    margin-top: 147%;
			
				background-color: #afca0b;
			}
			
			.container22 {
			    margin-top: 500px;
			    width: 72%;
			    margin-left: 50px;
			    margin-right: 100px;
			    position: -webkit-sticky;  For Safari 
			    position: fixed;  Sticky behavior 
			    top: 0;  Adjust where it sticks (e.g., top: 0 will stick at the top of its container) 
			}



			.search-bar11{
				
				width:100%;
				padding: 10px;
				  border: 1px solid #ccc;
				  border-radius: 5px;
				  font-size: 14px;
				  resize: none;
			}
			
			#colour{
				font-size:18px;
				color:white;
			}
			
			.container3{
				margin-left:25px;
			
			}
			
			
			
			
			.dropdown {
			            position: relative;
			            width: 200px;
			        }
			        .search-input {
			            width: 100%;
			            padding: 10px;
			            border: 1px solid #ccc;
			            border-radius: 5px;
			            outline: none;
			            cursor: pointer;
			        }
			        .dropdown-content {
			            position: absolute;
			            width: 100%;
			            background: white;
			            border: 1px solid #ddd;
			            max-height: 150px;
			            overflow-y: auto;
			            display: none;
			            border-radius: 5px;
			        }
			        .dropdown-content div {
			            padding: 8px;
			            cursor: pointer;
			        }
			        .dropdown-content div:hover {
			            background: #f0f0f0;
			        }
			        .show {
			            display: block;
			        }*/


.dropdown {
	position: relative;
	/* Ensure relative positioning for absolute children */

}


.dropdown-content {
	position: absolute;
	top: 100%;
	/* Place dropdown right below search bar */
	left: 0;
	width: 100%;
	background: white;
	border: 1px solid #ddd;
	max-height: 150px;
	overflow-y: auto;
	display: none;
	border-radius: 5px;
	z-index: 1000;
	/* Ensures it appears above other elements */
}


#dropdown1,#dropdown2 {
	position: relative;
	width: 470px;
	margin-left: 33px;
}

.search-input1, .search-input3 {

	width: 475px;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 5px;
	outline: none;
	cursor: pointer;
}

.dropdown-content {
	position: absolute;
	width: 100%;
	background: white;
	border: 1px solid #ddd;
	max-height: 150px;
	overflow-y: auto;
	display: none;
	border-radius: 5px;
}

.dropdown-content div {
	padding: 8px;
	cursor: pointer;
}

.dropdown-content div:hover {
	background: #f0f0f0;
}

.dropdown-content1 div {
	padding: 8px;
	cursor: pointer;
}

.dropdown-content1 div:hover {
	background: #f0f0f0;
}

.show {
	display: block;
}

#col1 {
	margin-left: 20px;
}

.dropdown-icon {
	position: absolute;
	    right: 0px;
	    padding-right: 30px;
	    /* padding-left: 0px; */
	    width: 20px;
	    background-color: white;
	    top: 42%;
	    transform: translateY(-50%);
	    pointer-events: none;
	    color: #555;
}

.dropdown-icon1 {
	position: absolute;
	    right: 30px;
	    padding-left: 20px;
	    padding-right: 11px;
	    background-color: white;
	    top: 50%;
	    transform: translateY(-50%);
	    pointer-events: none;
	    color: #555;
}

#butt1,#butt2{
			margin-left: 10px;
			    width: 122px;
			    height: 47px;
			    margin-top: 16px;
				padding: 11px 20px;
				     font-size: 16px;
				     cursor: pointer;
				     border: 1px solid #ccc;
				     background-color:#afca0b;
				     border-radius: 5px;
				     display: inline-block;
				  color:white;
				
			}
			
			
			.search_main {
			    display: flex;
			   
			}

			
			.container22 {
			                
						    margin-top: 525px;
						    width: 81%;
						    margin-left: 10px;
						    margin-right: 100px;
						    position: -webkit-sticky;  
						    position: fixed;   
						    top: 0; 
						}



						.search-bar11{
							margin-top:15px;
							height:49px;
							width:100%;
							padding: 10px;
							  border: 1px solid #ccc;
							  border-radius: 5px;
							  font-size: 15px;
							  resize: none;
						}
			
						
						.refresh-button {
									    padding: 3px 8px;
									    background-color:#afca0b;
									    color: white;
									    border: none;
									    cursor: pointer;
									    border-radius: 5px;
									    font-size: 16px;
									}
									
									#refreshButton{
										float:right;
									}

			
									.header {
										background-color: #afca0b;
										color: white;
										padding: 3px;
										text-align: center;
										font-size: 18px;

									}
									
									.header1 {
										background-color: #afca0b;
										
										color: white;
										padding: 3px;
										text-align: center;
										font-size: 18px;

									}
									
									
									.search-bar1 {
										width: 100%;
										height: 90%;
										
										font-size: 16px;
										padding: 10px;
										border: 1px solid #ccc;
										border-top: none;
										
										border-radius: 0 0 8px 8px;
										resize: none;
										overflow-y: auto;
										
										white-space: pre-wrap;
										
										line-height: 1.6;
										font-family: 'Courier New', monospace;
									}
									
									
									.container2 {
										display: flex;
										justify-content: flex-start;
										
										gap: 20px;
										
										align-items: flex-start;
										
									}
									
									.search-container {
										margin-left:64px;
										width: 475px;
										height: 315px;
										background-color: #fff;
										border-radius: 8px;
										overflow: hidden;
										box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
									}
									
									#colour{
													font-size:16px;
													color:white;
												}
												
								.row5{
									display: flex;
								}				
										
								#new1{
									display: flex;
									
								}
								
							
								     
								        
										
										.search-container11	{
											margin-left: 54px;
											display: flex;
											width:100%;
										}
												
										
									
													
													
													
													.search-input2{
													  width:492px;
													  padding: 5px;
													  	border: 1px solid #ccc;
													  	border-radius: 5px;
													  	outline: none;
													  	cursor: pointer;
													}
													
													#dropdownContent1 {
													    display: none; /* Initially hide the dropdown */
													    position: absolute;
													    border: 1px solid #ccc;
													    background-color: white;
													    z-index: 10;
													    width: 100%;
													    max-height: 280px;
													    overflow-y: auto;
													}

													.dropdown-item {
													    padding: 8px;
													    cursor: pointer;
													}

													.dropdown-item:hover {
													    background-color: #f1f1f1;
													}
													
													.hidden{
														visibility:hidden;
													}
													
											
													
													/* General container styling */
													.search-container {
													   /* width: 100%;*/
													    max-width: 500px;  /* Set a max width for the container */
													    /*margin: 20px auto;*/ /* Center the container on the page */
													    font-family: Arial, sans-serif;
													}

													/* Header styling */
													.header {
													    margin-bottom: 10px;
													}

													#colour {
													    font-size: 16px;
													    font-weight: bold;
													}

													/* Search bar and checkbox container */
													.search-bar1 {
													    display: flex;
													    flex-direction: column;
													    padding: 10px;
													}

													/* Style for the select all checkbox */
													.spacing1 {
													    display: flex;
													    align-items: center; /* Align checkbox and label horizontally */
													    margin-bottom: 15px;
													}

													.spacing1 input[type="checkbox"] {
													    margin-right: 8px; /* Add space between checkbox and label */
													}

													/* Styling for each checkbox in the list */
													#isbnContainer {
													    display: flex;
													    flex-direction: column;
													    gap: 8px;
													}

													/* Style for individual checkboxes and labels */
													#isbnContainer div {
													    display: flex;
													    align-items: center;
													}

													#isbnContainer input[type="checkbox"] {
													    margin-right: 8px; /* Add space between checkbox and label */
													}

													/* Adjustments for larger screens */
													@media (min-width: 768px) {
													    .search-container {
													        max-width: 600px;
													    }
													}