@media all and (min-width: 1024px) {
	.main {
		max-width: 1560px;
		min-width: 320px;
		margin: auto;
		padding: 0px 10px;
	}
	.ag-theme-alpine {
		--ag-grid-size: 6px !important;
		--ag-list-item-height: 40px !important;
	}
	.detail-grid {
		padding: 10px;
		max-height: 300px; /* Adjust this value as needed */
		overflow-y: auto;  /* Enables vertical scrolling */
		overflow-x: auto;
	}
	.detail-table {
		width: 100%;
		border-collapse: collapse;
	}
	.detail-table th, .detail-table td {
		border: 1px solid #ddd;
		padding: 8px;
		text-align: left;
	}
	.detail-table th {
		background-color: #f2f2f2;
	}
	.no-cell-padding {
		padding-left: 7px !important; 
	}
	.iconicGrid {
		max-width: 80% !important;
	}
	.centered-list {
		list-style-type: none; /* Removes default list styling */
		padding: 0; /* Removes default padding */
		text-align: center; /* Centers the content */
	}

	/* Optional: Remove the margin-right for the last item */
	.centered-list li:last-child {
		margin-right: 0;
	}
	.custom-grid {
		width: 100%; /* Adjust if necessary */
		table-layout: fixed;
		border-collapse: collapse;
		font-size: smaller;
	}
	.scroll-container {
		overflow-x: auto;
	}
	.links-footer {
		margin-top: 10px; /* Space above the links */
		text-align: center; /* Centering the text and links */
	}
	.links-footer a {
		margin: 0 5px; /* Spacing between links */
		/* Additional styles for the links */
	}
	#reset_sort_button {
		margin-left: auto;
	}
	h2, h5 {
		color: #333; /* Darker text for better contrast */
		margin-bottom: 0.5rem; /* Space out the heading from content */
	  }
  
  /* Style the card to give depth */
  .card {
	background-color: #fff;
	margin: 1rem; /* Consistent spacing around cards */
	border: none;
  }

  .datacard {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
	background-color: #f8f9fa;
	border-radius: 0.25rem; /* Bootstrap style rounding */
	margin: 1rem; /* Consistent spacing around cards */
  }
  
  /* Enhanced style for the 'Iconic 100' title */
  .iconictitle, .search-details {
	font-size: 2.5rem; /* Larger font size for the title */
	padding: 0.5rem 1rem; /* Padding for the button */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
	font-weight: bold; /* Make font bold */
	margin-bottom: 0.5rem; /* Space out the heading from content */
	padding: 0.5rem 0; /* Padding above and below the text */
  }
  
  /* Style for the header and title for better visual hierarchy */
  h2, h5, h6 {
	color: #333; /* Darker text for better contrast */
	margin-bottom: 0.5rem; /* Space out the heading from content */
  }
  
  /* Style for the 'Universal Pop Report' to make it stand out */
  .universal-pop-report {
	background-color: #009999; /* Bootstrap primary color or any color of choice */
	color: white; /* White color for the text */
	padding: 0.5rem; /* Padding for the button */
	border-radius: 0.25rem; /* Rounded corners */
	margin: 0.5rem 0; /* Margin to space it from other elements */
  }

  .gradingtrend {
	background-color: #009999; /* Bootstrap primary color or any color of choice */
	color: white; /* White color for the text */
	padding: 0.5rem; /* Padding for the button */
	border-radius: 0.25rem; /* Rounded corners */
  }

  /* Improve the look of the list items and links */
  .centered-list li {
	margin: 0.5rem 0; /* Space out list items */
  }
  
  .centered-list li a {
	color: #007bff; /* Link color matching the button */
	text-decoration: none; /* No underline */
  }
  
  /* Hover effect for links to make them interactive */
  .centered-list li a:hover {
	text-decoration: underline; /* Underline on hover for interactivity */
  }
  
  /* Ensure quick filter and buttons have consistent styling */
  #filter-text-box, .btn {
	margin: 0.5rem; /* Consistent margin */
  }
  .summaryRow {
	  background-color: #f2f2f2;
	  border-top: 1px solid black; /* 1px thick black top border */
  }
  .shrink {
	font-size: 0.65rem !important;
}

.additional-info {
	width: 50%;
}

}

@media only screen and (max-device-width : 768px) {
	.detail-grid {
		padding: 10px;
		max-height: 300px; /* Adjust this value as needed */
		overflow-y: auto;  /* Enables vertical scrolling */
		overflow-x: auto;
	}
	.detail-table {
		width: 100%;
		border-collapse: collapse;
	}
	.detail-table th, .detail-table td {
		border: 1px solid #ddd;
		padding: 8px;
		text-align: left;
	}
	.detail-table th {
		background-color: #f2f2f2;
	}
	.centered-list {
		list-style-type: none; /* Removes default list styling */
		padding: 0; /* Removes default padding */
		text-align: center; /* Centers the content */
	}
	/* Optional: Remove the margin-right for the last item */
	.centered-list li:last-child {
		margin-right: 0;
	}
	.custom-grid {
		width: 100%; /* Adjust if necessary */
		border-collapse: collapse;
		font-size: smaller;
	}
	.scroll-container {
		overflow-x: auto;
	}
	.links-footer {
		margin-top: 10px; /* Space above the links */
	}
	.links-footer a {
		margin: 0 5px; /* Spacing between links */
		/* Additional styles for the links */
	}
	#reset_sort_button {
		margin-left: auto;
	}
	.iconictitle {
		font-size: 2.5rem !important;
		padding: 0.5rem 1rem; /* Padding for the button */
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
		font-weight: bold; /* Make font bold */
		margin-bottom: 0.5rem; /* Space out the heading from content */
		padding: 0.5rem 0; /* Padding above and below the text */
	}
	.search-details {
		font-size: 1.5rem !important;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
		font-weight: bold; /* Make font bold */
		margin-bottom: 0.5rem; /* Space out the heading from content */
		padding: 0.5rem; /* Padding above and below the text */
	}
	
  /* Style the card to give depth */
  .card {
	background-color: #fff;
	margin: 1rem; /* Consistent spacing around cards */
	border: none;
  }
  .datacard {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
	background-color: #f8f9fa;
	border-radius: 0.25rem; /* Bootstrap style rounding */
	margin: 1rem; /* Consistent spacing around cards */
  }
  /* Style for the 'Universal Pop Report' to make it stand out */
  .universal-pop-report {
	background-color: #009999; /* Bootstrap primary color or any color of choice */
	color: white; /* White color for the text */
	padding: 0.5rem; /* Padding for the button */
	border-radius: 0.25rem; /* Rounded corners */
	margin: 0.5rem 0; /* Margin to space it from other elements */
  }
  .gradingtrend {
	background-color: #009999; /* Bootstrap primary color or any color of choice */
	color: white; /* White color for the text */
	padding: 0.5rem; /* Padding for the button */
	border-radius: 0.25rem; /* Rounded corners */
  }
  /* Improve the look of the list items and links */
  .centered-list li {
	margin: 0.5rem 0; /* Space out list items */
  }
  .centered-list li a {
	color: #007bff; /* Link color matching the button */
	text-decoration: none; /* No underline */
  }
  /* Hover effect for links to make them interactive */
  .centered-list li a:hover {
	text-decoration: underline; /* Underline on hover for interactivity */
  }
  /* Ensure quick filter and buttons have consistent styling */
  #filter-text-box, .btn {
	margin: 0.5rem; /* Consistent margin */
  }
  .no-cell-padding-mobile {
	padding-left: 3px !important; 
  }
  
#search-table-wrapper {
	overflow-x: scroll;
	max-width: 400px; /* This will be your static width */
}
#gradesTable {
		width: 500px; /* Ensure this matches or exceeds the wrapper's max-width */
}

.additional-info {
	width: 95%;
}

}

@media only screen and (min-width: 500px) and (max-device-width : 1024px) {
	#search-table-wrapper {
		overflow-x: scroll;
		max-width: 100%; /* This will be your static width */
	}
	#gradesTable {
			width: 100%; /* Ensure this matches or exceeds the wrapper's max-width */
	}
}