Added CSS to searchbar

src/pages/MapPage.vue

@@ -1,6 +1,11 @@
 <template>
-   <input type="text" v-model="searchinput" placeholder="Search Trains" />
+   
 <Navbar />
+<div id="mapCover">
+  <div id="searchContainer">
+    <input id="searchBar" type="text" v-model="searchinput" placeholder="Search Trains" />
+  </div>
+</div>
 
 <div id="preferenceDropdown" class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
@@ -498,6 +503,13 @@ export default {
 </script>
 
 <style scoped>
+
+#mapCover{
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
 .overlay-content {
   width: 1%;
 }
@@ -533,6 +545,29 @@ export default {
   font-size: 14.6px;
 }
 
+#searchContainer{
+  position: absolute;
+  top: 11%;
+  background-color: #ffffff;
+  width: 190px;
+  height: 40px;
+  z-index: 4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: black;
+  box-shadow: 0 0 5px 2px #6e757dbe;
+  border-radius: 6%;
+}
+
+#searchBar{
+  text-align: center;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  border: none;
+  border-bottom: 1px solid black;
+}
+
+
 #preferenceDropdown {
   position: absolute;
   z-index: 3;
@@ -611,5 +646,32 @@ export default {
   left:5%;
   top: 18%;
   }
+
+  #mapCover{
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: left;
+}
+
+  #searchBar{
+    width: 100px;
+  }
+
+  #searchContainer{
+  position: absolute;
+  top: 11%;
+  left: 10px;
+  background-color: #ffffff;
+  width: 120px;
+  height: 40px;
+  z-index: 4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: black;
+  box-shadow: 0 0 5px 2px #6e757dbe;
+  border-radius: 6%;
+}
 }
 </style>