flylout scoping issues

components/ChosenFlights.vue

@@ -171,4 +171,28 @@ h1.chosen-text {
   font-size: 0.8rem;
   color: #aaa;
 }
+
+.flyout .chosen-cols {
+  background: none !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+  margin: 0 !important;
+}
+
+.flyout .chosen-col {
+  padding: 0 !important;
+}
+
+.flyout .chosen-cols h1 {
+  color: white !important;
+  font-size: 2.7rem !important;
+}
+
+.flyout .chosen-cols label {
+  color: white !important;
+}
+
+.flyout .chosen-cols svg {
+  stroke: white !important;
+}
 </style>

components/FlightsFlyout.vue

@@ -31,7 +31,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .flyout {
   background: #007fff;
   border-radius: 3rem 3rem 0 0;
@@ -60,38 +60,4 @@ export default {
   background: lightgray;
 }
 
-.btn.btn--large {
-  font-size: 2rem;
-}
-
-/* @media only screen and (max-width: 768px) {
-  .btn.btn--large {
-    font-size: 1rem;
-  }
-} */
-
-.flyout .chosen-cols {
-  background: none;
-  padding: 0;
-  box-shadow: none;
-  margin: 0;
-}
-
-.flyout .chosen-col {
-  padding: 0;
-}
-
-.flyout .chosen-cols h1 {
-  color: white;
-  font-size: 2.7rem;
-}
-
-.flyout .chosen-cols label {
-  color: white;
-}
-
-.flyout .chosen-cols svg {
-  stroke: white;
-}
-
 </style>

pages/flights.vue

@@ -578,39 +578,30 @@ span.badge--avail {
   font-weight: 300;
 }
 
-.flyout .v-select {
-  font-size: 1.5rem;
-}
-
-.flyout .vs__dropdown-menu {
+.flyout {
+  background: #007fff;
+  border-radius: 3rem 3rem 0 0;
+  padding: 3rem;
+  pointer-events: all;
+  width: clamp(450px, 50vw, 400px);
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-.flyout .vs__dropdown-menu li {
-  border-radius: 999px;
-  transition: 0.3 all;
-}
-
-.flyout .vs__dropdown-menu li:hover {
-  border-radius: 999px;
-  background-color: #007fff;
+  flex-direction: column;
 }
 
-.flyout .vs__dropdown-toggle {
-  background: #eee;
-  border-radius: 1.2rem 1.2rem 1.2rem 1.2rem;
+.flyout .btn.btn--primary {
+  background: white;
+  color: black;
 }
 
-.flyout .vs--open .vs__dropdown-toggle {
-  background: #eee;
-  border-radius: 1.2rem 1.2rem 0 0;
+.flyout .btn.btn--primary:hover {
+  background: #00ca00;
+  color: #fff;
 }
 
 </style>
 
 <style>
+
 .flyout .v-select {
   font-size: 1.5rem;
 }
@@ -640,4 +631,5 @@ span.badge--avail {
   background: #eee;
   border-radius: 1.2rem 1.2rem 0 0;
 }
+
 </style>