add styles

src/main/resources/templates/MapSearch/map-search_styles.css

@@ -0,0 +1,113 @@
+html, body {
+    height: 100%; /* Высота экрана */
+    margin: 0; /* Убираем отступы */
+    overflow: hidden; /* Убираем прокрутку */
+}
+/* Устанавливаем карту на весь экран */
+#map {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+/* Сайдбар слева, без фона по умолчанию */
+#sidebar {
+    font-family: 'Century Gothic', Arial, sans-serif;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 420px;
+    background-color: transparent;
+    color: white;
+    padding: 20px;
+    z-index: 1000;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    transition: background-color 0.3s ease;
+}
+
+/* Когда фоновый цвет должен быть видим */
+#sidebar.showBackground {
+    background-color: #6C7D9F;
+}
+
+#sidebar .leaflet-routing-container {
+    color: #003366;
+    width: 100%;
+    font-size: 0.75rem;
+}
+
+/* Контейнер для поиска внутри сайдбара */
+#searchContainer {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.hidden {
+    display: none  !important;
+}
+
+input[type="text"] {
+    font-family: 'Century Gothic', Arial, sans-serif;
+    width: 95%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    color: #003366;
+}
+
+#routeStart, #routeEnd {
+    margin-bottom: 15px;
+}
+
+button {
+    display: inline-block;
+    padding: 10px;
+    background-color: #003366;
+    color: white;
+    font-family: 'Century Gothic', Arial, sans-serif;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #012850;
+}
+
+#routeButton {
+    width: 100%;
+    box-sizing: border-box; /* Учитывает отступы и границы в ширине */
+}
+#backButton, #backButtonRoute {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    padding: 10px;
+    margin: 0;
+    cursor: pointer;
+
+}
+
+#backButtonRoute {
+    margin-bottom: 15px;
+}
+
+#backButton .back-icon, #backButtonRoute .back-icon {
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+}
+
+#buildRouteButton {
+    width: 100%;
+    box-sizing: border-box;
+}