TRI-293: add custom and mover handler + mover page poster

styles/create_poster/create_poster.scss

@@ -1,5 +1,7 @@
 @import "../base/variables";
 
+$row-gap: 40px;
+
 .poster {
   text-align: left;
   box-sizing: border-box;
@@ -49,7 +51,7 @@
     display: flex;
     padding: 40px 0;
     border-bottom: 1px solid #E6E6E6;
-    gap: 40px;
+    gap: $row-gap;
 
     @media (min-width: $screen-xl-min) {
       padding: 39px 0;
@@ -59,8 +61,8 @@
       display: block;
     }
 
-
     &--from-to {
+      flex-wrap: wrap;
 
       @media (max-width: $screen-md-max) {
         padding-top: 14px
@@ -74,7 +76,6 @@
         padding-top: 40px;
       }
 
-
       label {
         padding-left: 9px;
 
@@ -222,6 +223,7 @@
 
   &__col {
     flex: 1;
+    position: relative;
 
     @media (max-width: $screen-lg-max) {
       &:not(:last-child) {
@@ -229,6 +231,12 @@
         margin-bottom: 20px;
       }
     }
+
+    &--inner {
+      display: flex;
+      min-width: 100%;
+      gap: $row-gap;
+    }
   }
 
   &__grid {
@@ -286,6 +294,36 @@
     }
   }
 
+  &__towns-list {
+    display: none;
+    max-height: 200px;
+    width: 100%;
+    position: absolute;
+    background-color: var(--brand-white);
+    overflow: scroll;
+    overflow-x: hidden;
+    z-index: 100;
+
+    &.show {
+      display: block;
+    }
+
+    &::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #FF613A;
+      border-radius: 20px;
+      border: 3px solid white;
+    }
+
+  }
+
+  &__locate {
+    appearance: none;
+  }
+
   .btn {
     margin: 0;