Some UI adjustments to school filters - needs more

src/components/PopoutPanel.css

@@ -100,12 +100,71 @@
   color: #666;
 }
 
+/* Filter controls syling*/
 .filter-controls {
   display: flex;
   align-items: center;
   gap: 20px;
 }
 
+.filter-controls input[type="radio"] {
+  margin-right: 5px;  /* Make radio buttons closer to the label */
+  vertical-align: middle;
+}
+
+.filter-controls label {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-right: 10px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* Adjust radio button alignment */
+.filter-controls label {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-right: 10px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.filter-controls input[type="radio"] {
+  margin-right: 5px;  /* Make radio buttons closer to the label */
+  vertical-align: middle;
+}
+
+/* Space between Tuition and Distance sliders */
+.slider-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  gap: 30px; /* Add space between the sliders */
+}
+
+.slider-container input[type="range"] {
+  width: 45%; /* Allow equal width for both sliders */
+  margin: 0;
+}
+
+.range-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.9rem;
+}
+
+/* Style for the range slider to show min/max values */
+.range-slider-wrapper {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+/* Space between Tuition and Distance sliders */
+.range-slider-wrapper input {
+  width: 48%;  /* Make both sliders occupy 48% space to leave space between them */
+}
+
 /* Schools section: Grid layout with clear separation */
 .schools-offering {
   display: grid;