Issues:
1#app {
2 width: 100%;
3 height: 100%;
4 margin: 0;
5 padding: 0;
6 font-family: 'Yandex Sans Text', Arial, Helvetica, sans-serif;
7}
8.baloon_more{
9 text-align: center;
10 margin-top: 6px;
11}
12
13.ymaps-2-1-79-copyright__wrap{
14 display:none!important;
15}
16div:has( >.map_wrap--fullscreen) {
17 max-width: 100% !important;
18 padding: 0 !important;
19}
20.map_wrap {
21 position: relative;
22 height: calc(100svh - var(--navSize));
23 width: 100%;
24 overflow: hidden;
25 min-height:200px;
26
27
28}
29.map_wrap--full{
30 width: unset;
31 margin-left: calc(-50vw + 50%);
32 margin-right: calc(-50vw + 50%);
33}
34.map_wrap--percent{
35 height: 100%;
36 width: 100%;
37
38}
39
40.map_wrap--shortcode{
41 height:calc(100svh - var(--navSize));
42 width: 100vw;
43}
44
45
46.map_wrap--size{
47 height: var(--mapHeight);
48 width: var(--mapWidth);
49}
50
51
52.baloon_wrap {
53display: block;
54overflow: hidden;
55width: 310px;
56}
57.baloon_wrap hr {
58
59 background-color: #ccc;
60 border: 0;
61 height: 1px;
62 margin-bottom: 7px;
63}
64
65.map_sidbar {
66 scrollbar-gutter: stable both-edges;
67 background: #fff;
68 color: #484c51;
69 position: absolute;
70 left: 0;
71 top: 0;
72 bottom: 0;
73 z-index: 1000;
74 border: 1px solid #f0f0f0;
75 display: flex;
76 flex-direction: column;
77 height:100%;
78 min-width:200px;
79 transform:translateX(-100%);
80 transition: all 0.30s ease-in-out;
81
82}
83.active {
84transform:translateX(0);
85}
86
87
88.check_img{
89 width: clamp(10px,5vw,20px);
90}
91.check_img img{
92 display: block;
93 object-fit: contain;
94 min-width: 100%;
95 width: 100%;
96 height: auto;
97
98}
99#mapFilter label{
100 display: flex;
101 cursor: pointer;
102 align-items: center;
103 column-gap: 5px;
104 font-size: clamp(12px,2vw,14px);
105 background: #fff;
106 padding: 5px 20px 5px 20px;
107 margin: 0;
108 transition: background .30s ease-in-out;
109}
110#mapFilter label:active,#mapFilter label:focus {
111 background: #f0f0f0;
112
113}
114.check_title{
115 font-size: 1em;
116 font-weight: 400;
117 line-height: normal;
118}
119#mapFilter {
120 height: 95%;
121 overflow-y:auto;
122 scrollbar-width: thin;
123 scrollbar-color: #cccccc #f0f0f0;
124}
125
126
127#mapFilter::-webkit-scrollbar {
128 width: 5px;
129}
130
131#mapFilter::-webkit-scrollbar-thumb {
132 background-color: #cccccc;
133}
134
135#mapFilter::-webkit-scrollbar-track {
136 background-color: #f0f0f0;
137}
138
139.map_header {
140 font-size: clamp(12px,2vw,16px);
141 padding:0 20px 0 20px ;
142}
143.map_header h3{
144 padding: 0;
145 margin:0 ;
146 font-size:1.518em;
147 font-weight: 700;
148}
149.map_header h5{
150 padding: 0;
151 margin:0 0 20px 0 ;
152 font-size:1.2135em;
153 font-weight: 700;
154}
155
156.map_header h3+h5{
157 margin-top:20px;
158}
159
160
161.map_search {
162 position: relative;
163 margin: 20px 0 20px 0;
164}
165#suggestions {
166 position: absolute;
167 left: 0;
168 right: 0;
169 padding: 10px;
170 top: 100%;
171 border: 1px solid #f0f0f0;
172 border-top: none;
173 box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
174 background-color: #fff;
175 z-index: 999;
176 display: none;
177}
178#suggestions div{
179 padding: 0 0 0 14px;
180 background: #fff;
181 transition: background .30s ease-in-out;
182 cursor: pointer;
183}
184#suggestions div:focus, #suggestions div:active {
185 background: #f0f0f0;
186}
187#suggestions div+div{
188
189 padding-bottom: 10px;
190
191}
192
193.map_search input{
194 width: 100%;
195 padding: 0 0.75em;
196 background-color: #ffffff;
197 color: #333333;
198 outline: none;
199/* -webkit-appearance: none;*/
200 box-sizing: border-box;
201 font-weight: normal;
202 border: 1px solid #f0f0f0;
203 height: 34px;
204 transition:border 0.7s ease-in-out;
205 line-height: 34px;}
206.map_search input:focus{
207 border: 1px solid #b8b0b0;
208}
209.map_search input::placeholder {
210 opacity: 0.5;
211 transition: opacity 0.7s ease-in-out;
212}
213
214.map_search input:focus::placeholder {
215 opacity: 0;
216}
217.img-responsive{
218 display: block;
219 max-width: 100%;
220 height: auto;
221 object-fit: contain;
222
223}
224.map_baloon{
225 display: flex;
226 column-gap: 6px;
227 font-size: 16px;
228 align-items: center;
229 margin-bottom: 7px;
230 margin-top: 5px;
231 }
232.map_baloon_icon{
233flex:0 0 auto;
234 width: 28px;
235}
236.map_baloon_icon img{
237
238display: block;
239object-fit: contain;
240min-width: 100%;
241width: 100%;
242height: auto;
243
244}
245.map_baloon_title{
246flex:0 0 auto;
247 max-width: 90%;
248 text-wrap: balance;
249}
250.map_baloon_title span{
251 font-size: 0.9em;
252 font-weight: 500;
253}
254.center-block {
255 margin-left: auto;
256 margin-right: auto;
257}
258.map_burger{
259 --burger-h:2px;
260 --burger-color: #cccccc;
261 --burger-ps:4px;
262 position: absolute;
263 top: 0;
264 left: 0;
265 width: 55px;
266 height: 50px;
267 border: 1px solid #f0f0f0;
268 background:#fff;
269 z-index:999;
270 cursor:pointer;
271 transition: all 0.3s ease-in-out;
272}
273.map_close{
274 --close-color: #cccccc;
275 position: relative;
276 top: -1px;
277 left: 0;
278 width: 30px;
279 height: 30px;
280 border: 1px solid #f0f0f0;
281 background:#fff;
282 font-size: 16px;
283 margin-bottom: 4px;
284 cursor: pointer;
285 transition: all 0.3s ease-in-out;
286}
287
288.map_burger:active,.map_burger:focus{
289border: 1px solid #b8b0b0;
290 --burger-color: #b8b0b0;
291 }
292.map_close:active, .map_close:focus{
293border: 1px solid #b8b0b0;
294 --close-color: #b8b0b0;
295 }
296.map_close span{
297 display: block;
298 position: absolute;
299 top: 50%;
300 left: 50%;
301 transform:translate(-50%,-50%);
302 line-height: 0;
303 color:var(--close-color);
304 font-size: 1em;
305 transition: all 0.3s ease-in-out;
306 pointer-events: none;
307}
308
309
310@media (min-width:1000px){
311.map_burger:hover,.map_burger:active,.map_burger:focus{
312 border: 1px solid #b8b0b0;
313 --burger-color: #b8b0b0;
314 }
315.map_close:hover,.map_close:active,.map_close:focus{
316 border: 1px solid #b8b0b0;
317 --close-color: #b8b0b0;
318 }
319#suggestions div:hover,#suggestions div:focus,#suggestions div:active {
320 background: #f0f0f0;
321
322}
323#mapFilter label:hover,#mapFilter label:active,#mapFilter label:focus {
324 background: #f0f0f0;
325
326}
327
328}
329
330.burger {
331 position: absolute;
332 top: 50%;
333 left: 50%;
334 transform:translate(-50%,-50%);
335 width: 35px;
336 height: 30px;
337 pointer-events: none;
338}
339
340.burger span {
341 position: relative;
342 top: 50%;
343 left: 50%;
344 transform: translate(-50%, -50%);
345 display: block;
346 width: 100%;
347 height: var(--burger-h);
348 background: var(--burger-color);
349 transition: all 0.3s ease-in-out;
350}
351
352.burger::before,
353.burger::after {
354 content: '';
355 position: absolute;
356 width: 100%;
357 height: var(--burger-h);
358 background: var(--burger-color);
359 transition: all 0.3s ease-in-out;
360}
361
362.burger::before {
363 top: var(--burger-ps);
364}
365
366.burger::after {
367 bottom: var(--burger-ps);
368}
369