mapbox-gl-rails 0.47.0 → 0.48.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,23 @@
1
+ .mapboxgl-compare {
2
+ background-color: #fff;
3
+ position: absolute;
4
+ width: 2px;
5
+ height: 100%;
6
+ z-index: 1;
7
+
8
+ .compare-swiper {
9
+ background-color: #3887be;
10
+ box-shadow: inset 0 0 0 2px #fff;
11
+ display: inline-block;
12
+ border-radius: 50%;
13
+ position: absolute;
14
+ width: 60px;
15
+ height: 60px;
16
+ top: 50%;
17
+ left: -30px;
18
+ margin: -30px 1px 0;
19
+ color: #fff;
20
+ cursor: ew-resize;
21
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjYwIiAgIGhlaWdodD0iNjAiICAgdmVyc2lvbj0iMS4xIiAgIHZpZXdCb3g9IjAgMCA2MCA2MCIgICBpZD0ic3ZnNTQzNCIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxK2RldmVsK29zeG1lbnUgcjEyOTExIiAgIHNvZGlwb2RpOmRvY25hbWU9Imwtci5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE1NDQ0Ij4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzNTQ0MiIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4NiIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc1MSIgICAgIGlkPSJuYW1lZHZpZXc1NDQwIiAgICAgc2hvd2dyaWQ9InRydWUiICAgICBpbmtzY2FwZTp6b29tPSI0IiAgICAgaW5rc2NhcGU6Y3g9IjI1Ljg4OTgzMSIgICAgIGlua3NjYXBlOmN5PSIzNC4zODE4MzMiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyMyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmc1NDM0IiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIiAgICAgaW5rc2NhcGU6c25hcC1zbW9vdGgtbm9kZXM9InRydWUiPiAgICA8aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkNTk4OSIgLz4gIDwvc29kaXBvZGk6bmFtZWR2aWV3PiAgPHBhdGggICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIiAgICAgZD0iTSAyNSAyNCBMIDE2IDMwIEwgMjUgMzYgTCAyNSAyNCB6IE0gMzUgMjQgTCAzNSAzNiBMIDQ0IDMwIEwgMzUgMjQgeiAiICAgICBpZD0icGF0aDU5OTUiIC8+PC9zdmc+);
22
+ }
23
+ }
@@ -0,0 +1,701 @@
1
+ /* Mapboxgl Geocoder */
2
+ /* Basics */
3
+
4
+ .mapboxgl-ctrl-geocoder {
5
+ -webkit-box-sizing: border-box;
6
+ -moz-box-sizing: border-box;
7
+ box-sizing: border-box;
8
+
9
+ * {
10
+ -webkit-box-sizing: border-box;
11
+ -moz-box-sizing: border-box;
12
+ box-sizing: border-box;
13
+
14
+ &:after, &:before {
15
+ -webkit-box-sizing: border-box;
16
+ -moz-box-sizing: border-box;
17
+ box-sizing: border-box;
18
+ }
19
+ }
20
+
21
+ font: 15px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
22
+ position: relative;
23
+ background-color: white;
24
+ width: calc(100% - 360px);
25
+ min-width: calc(100% - 40px);
26
+ max-width: calc(100% - 40px);
27
+ margin-left: 40px;
28
+ border-radius: 0 0 3px 0;
29
+ }
30
+
31
+ .mapbox-directions-origin .mapboxgl-ctrl-geocoder {
32
+ border-radius: 0 3px 0 0;
33
+ }
34
+
35
+ .mapboxgl-ctrl-geocoder input[type='text'] {
36
+ font-size: 12px;
37
+ width: 100%;
38
+ border: 0;
39
+ background-color: transparent;
40
+ height: 40px;
41
+ margin: 0;
42
+ color: rgba(0, 0, 0, 0.5);
43
+ padding: 10px 40px 10px 10px;
44
+ text-overflow: ellipsis;
45
+ white-space: nowrap;
46
+ overflow: hidden;
47
+ }
48
+
49
+ .mapbox-directions-origin input[type='text'] {
50
+ box-shadow: 0 1px 0 0 #ddd;
51
+ position: relative;
52
+ z-index: 1;
53
+ }
54
+
55
+ .mapboxgl-ctrl-geocoder {
56
+ input:focus {
57
+ color: rgba(0, 0, 0, 0.75);
58
+ outline: 0;
59
+ outline: thin dotted\8;
60
+ }
61
+
62
+ .geocoder-icon-search {
63
+ position: absolute;
64
+ top: 10px;
65
+ left: 10px;
66
+ }
67
+
68
+ button {
69
+ padding: 0;
70
+ margin: 0;
71
+ background-color: #fff;
72
+ border: none;
73
+ cursor: pointer;
74
+ }
75
+
76
+ .geocoder-pin-right * {
77
+ background-color: #fff;
78
+ z-index: 2;
79
+ position: absolute;
80
+ right: 10px;
81
+ top: 10px;
82
+ display: none;
83
+
84
+ &.active {
85
+ display: block;
86
+ }
87
+ }
88
+
89
+ box-shadow: none;
90
+
91
+ ul {
92
+ box-shadow: none;
93
+ background-color: #fff;
94
+ border-radius: 0 0 3px 3px;
95
+ left: 0;
96
+ list-style: none;
97
+ margin: 0;
98
+ padding: 0;
99
+ position: absolute;
100
+ width: 100%;
101
+ top: 100%;
102
+ z-index: 1000;
103
+ overflow: hidden;
104
+ font-size: 12px;
105
+ }
106
+ }
107
+
108
+ /* Suggestions */
109
+
110
+ .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-geocoder ul, .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-geocoder ul {
111
+ top: auto;
112
+ bottom: 100%;
113
+ }
114
+
115
+ .mapboxgl-ctrl-geocoder ul > li {
116
+ > a {
117
+ clear: both;
118
+ cursor: default;
119
+ display: block;
120
+ padding: 5px 10px;
121
+ white-space: nowrap;
122
+ overflow: hidden;
123
+ text-overflow: ellipsis;
124
+ white-space: nowrap;
125
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
126
+ }
127
+
128
+ &:last-child > a {
129
+ border-bottom: none;
130
+ }
131
+
132
+ &.active > a, > a:hover {
133
+ background-color: #eee;
134
+ text-decoration: none;
135
+ cursor: pointer;
136
+ }
137
+ }
138
+
139
+ @-webkit-keyframes rotate {
140
+ from {
141
+ -webkit-transform: rotate(0deg);
142
+ }
143
+
144
+ to {
145
+ -webkit-transform: rotate(360deg);
146
+ }
147
+ }
148
+
149
+ @-moz-keyframes rotate {
150
+ from {
151
+ -moz-transform: rotate(0deg);
152
+ }
153
+
154
+ to {
155
+ -moz-transform: rotate(360deg);
156
+ }
157
+ }
158
+
159
+ @-ms-keyframes rotate {
160
+ from {
161
+ -ms-transform: rotate(0deg);
162
+ }
163
+
164
+ to {
165
+ -ms-transform: rotate(360deg);
166
+ }
167
+ }
168
+
169
+ @keyframes rotate {
170
+ from {
171
+ transform: rotate(0deg);
172
+ }
173
+
174
+ to {
175
+ transform: rotate(360deg);
176
+ }
177
+ }
178
+
179
+ /* icons */
180
+
181
+ .geocoder-icon {
182
+ display: inline-block;
183
+ width: 20px;
184
+ height: 20px;
185
+ vertical-align: middle;
186
+ speak: none;
187
+ background-repeat: no-repeat;
188
+ }
189
+
190
+ .geocoder-icon-search {
191
+ display: none;
192
+ }
193
+
194
+ .geocoder-icon-close {
195
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgdmVyc2lvbj0iMS4xIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiPg0KICA8cGF0aCBkPSJtNSA1IDAgMS41IDMuNSAzLjUtMy41IDMuNSAwIDEuNSAxLjUgMCAzLjUtMy41IDMuNSAzLjUgMS41IDAgMC0xLjUtMy41LTMuNSAzLjUtMy41IDAtMS41LTEuNSAwLTMuNSAzLjUtMy41LTMuNS0xLjUgMHoiIGZpbGw9IiMwMDAiLz4NCjwvc3ZnPg==);
196
+ }
197
+
198
+ .geocoder-icon-loading {
199
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGQ9Im0xMCAyIDAgMy4zYzIuNiAwIDQuNyAyLjEgNC43IDQuN2wzLjMgMGMwLTQuNC0zLjYtOC04LTh6IiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTEwIDJDNi44IDIgMy43IDQuMSAyLjYgNy4xIDEuNCAxMCAyLjEgMTMuNiA0LjUgMTUuOGMyLjQgMi40IDYuNCAyLjkgOS40IDEuMiAyLjUtMS40IDQuMi00LjIgNC4yLTctMS4xIDAtMi4yIDAtMy4zIDAgMC4xIDIuMi0xLjcgNC4zLTMuOCA0LjZDOC43IDE1IDYuNCAxMy44IDUuNyAxMS43IDQuOCA5LjcgNS42IDcuMSA3LjYgNiA4LjMgNS42IDkuMSA1LjMgMTAgNS4zYzAtMS4xIDAtMi4yIDAtMy4zeiIgc3R5bGU9ImZpbGw6IzAwMDtvcGFjaXR5OjAuMiIvPjwvc3ZnPg==);
200
+ -webkit-animation: rotate 400ms linear infinite;
201
+ -moz-animation: rotate 400ms linear infinite;
202
+ -ms-animation: rotate 400ms linear infinite;
203
+ animation: rotate 400ms linear infinite;
204
+ }
205
+
206
+ /* Basics */
207
+
208
+ .mapboxgl-ctrl-directions {
209
+ width: 33.33333%;
210
+ min-width: 300px;
211
+ max-width: 300px;
212
+ }
213
+
214
+ .mapbox-directions-component {
215
+ position: relative;
216
+ -webkit-box-sizing: border-box;
217
+ -moz-box-sizing: border-box;
218
+ box-sizing: border-box;
219
+
220
+ * {
221
+ -webkit-box-sizing: border-box;
222
+ -moz-box-sizing: border-box;
223
+ box-sizing: border-box;
224
+
225
+ &:after, &:before {
226
+ -webkit-box-sizing: border-box;
227
+ -moz-box-sizing: border-box;
228
+ box-sizing: border-box;
229
+ }
230
+ }
231
+ }
232
+
233
+ .mapbox-directions-component-keyline {
234
+ box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
235
+ border-radius: 3px;
236
+ }
237
+
238
+ .directions-control {
239
+ font: 15px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
240
+ width: 100%;
241
+ z-index: 1;
242
+
243
+ &.directions-control-directions {
244
+ background: rgba(0, 0, 0, 0.75);
245
+ margin: 7px 0 0;
246
+ color: #fff;
247
+ top: 0;
248
+ right: 0;
249
+ bottom: 0;
250
+ overflow: auto;
251
+ overflow-x: hidden;
252
+ }
253
+
254
+ &.directions-control-inputs {
255
+ top: 10px;
256
+ left: 10px;
257
+ }
258
+ }
259
+
260
+ /* Layout containers */
261
+
262
+ /* Inputs */
263
+
264
+ .mapbox-directions-origin, .mapbox-directions-destination {
265
+ position: relative;
266
+ }
267
+
268
+ .mapbox-form-label {
269
+ position: absolute;
270
+ top: 0;
271
+ left: 0;
272
+ background: #8a8acb;
273
+ color: #fff;
274
+ padding: 0;
275
+ width: 40px;
276
+ height: 40px;
277
+ text-align: center;
278
+ line-height: 38px;
279
+ border-radius: 0 0 0 3px;
280
+
281
+ .directions-icon {
282
+ background-position: center;
283
+ width: 40px;
284
+ height: 40px;
285
+ }
286
+ }
287
+
288
+ .mapbox-directions-origin .mapbox-form-label {
289
+ background-color: #3bb2d0;
290
+ border-radius: 3px 0 0 0;
291
+ box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
292
+ z-index: 1;
293
+ }
294
+
295
+ .directions-reverse {
296
+ position: absolute;
297
+ z-index: 10;
298
+ background: white;
299
+ left: 40px;
300
+ top: 30px;
301
+ cursor: pointer;
302
+ }
303
+
304
+ .mapbox-directions-inputs {
305
+ button {
306
+ padding: 0;
307
+ margin: 0;
308
+ background-color: #fff;
309
+ border: none;
310
+ cursor: pointer;
311
+ }
312
+
313
+ .directions-pin-right * {
314
+ background-color: #fff;
315
+ z-index: 2;
316
+ position: absolute;
317
+ right: 10px;
318
+ top: 10px;
319
+ display: none;
320
+
321
+ &.active {
322
+ display: block;
323
+ }
324
+ }
325
+ }
326
+
327
+ .mapbox-directions-profile {
328
+ background: #fff;
329
+ margin: 7px 0 0;
330
+ padding: 2px;
331
+ border-radius: 15px;
332
+ vertical-align: middle;
333
+
334
+ label {
335
+ cursor: pointer;
336
+ vertical-align: top;
337
+ display: block;
338
+ border-radius: 16px;
339
+ padding: 3px 5px;
340
+ font-size: 12px;
341
+ color: rgba(0, 0, 0, 0.5);
342
+ line-height: 20px;
343
+ text-align: center;
344
+ width: 25%;
345
+ float: left;
346
+
347
+ &:hover {
348
+ color: rgba(0, 0, 0, 0.75);
349
+ }
350
+ }
351
+
352
+ input[type=radio] {
353
+ display: none;
354
+
355
+ &:checked + label {
356
+ &:hover {
357
+ background: #eee;
358
+ color: rgba(0, 0, 0, 0.75);
359
+ }
360
+
361
+ background: #eee;
362
+ color: rgba(0, 0, 0, 0.75);
363
+ }
364
+ }
365
+ }
366
+
367
+ /* Routes */
368
+
369
+ .mapbox-directions-routes {
370
+ ul {
371
+ list-style: none;
372
+ margin: 0;
373
+ padding: 10px 10px 0 10px;
374
+ border-bottom: 1px solid rgba(255, 255, 255, 0.25);
375
+ }
376
+
377
+ li {
378
+ font-size: 12px;
379
+ padding: 10px 10px 10px 80px;
380
+ display: block;
381
+ position: relative;
382
+ cursor: pointer;
383
+ color: rgba(255, 255, 255, 0.5);
384
+ min-height: 60px;
385
+
386
+ &:hover {
387
+ color: white;
388
+ }
389
+ }
390
+
391
+ .mapbox-directions-route-active {
392
+ color: white;
393
+ }
394
+ }
395
+
396
+ .mapbox-directions-route-heading {
397
+ position: absolute;
398
+ left: 10px;
399
+ top: 10px;
400
+ }
401
+
402
+ /* Route Summary */
403
+
404
+ .mapbox-directions-route-summary {
405
+ position: relative;
406
+ z-index: 1;
407
+ width: 100%;
408
+ background-color: rgba(0, 0, 0, 0.75);
409
+ color: #fff;
410
+ padding: 5px 10px;
411
+ font-size: 15px;
412
+ line-height: 28px;
413
+
414
+ + .mapbox-directions-instructions {}
415
+
416
+ h1 {
417
+ font-weight: 500;
418
+ margin: 0;
419
+ display: inline;
420
+ font-size: inherit;
421
+ line-height: inherit;
422
+ }
423
+
424
+ span {
425
+ color: rgba(255, 255, 255, 0.5);
426
+ margin: 0 5px;
427
+ }
428
+ }
429
+
430
+ /* Alt route selection */
431
+
432
+ .mapbox-directions-instructions {
433
+ overflow: scroll;
434
+ }
435
+
436
+ .mapbox-directions-instructions-wrapper {
437
+ max-height: 50vh;
438
+ }
439
+
440
+ .mapbox-directions-routes {
441
+ margin-left: 5px;
442
+ font-size: 12px;
443
+ float: right;
444
+
445
+ input[type=radio] {
446
+ display: none;
447
+
448
+ &:not(:checked) + .button:before {
449
+ width: 0;
450
+ }
451
+
452
+ + label {
453
+ background-color: rgba(255, 255, 255, 0.1);
454
+ float: left;
455
+ padding: 0 10px;
456
+ cursor: pointer;
457
+
458
+ &:hover {
459
+ background-color: rgba(255, 255, 255, 0.25);
460
+ }
461
+ }
462
+
463
+ &:checked + label {
464
+ background-color: rgba(255, 255, 255, 0.25);
465
+ }
466
+ }
467
+ }
468
+
469
+ /* Instructions */
470
+
471
+ .mapbox-directions-instructions .directions-icon {
472
+ position: absolute;
473
+ left: 12px;
474
+ top: 20px;
475
+ margin: auto;
476
+
477
+ &:before {
478
+ vertical-align: top;
479
+ }
480
+ }
481
+
482
+ .mapbox-directions-error {
483
+ padding: 20px;
484
+ font-size: 20px;
485
+ line-height: 25px;
486
+ }
487
+
488
+ .mapbox-directions-step-distance {
489
+ color: rgba(255, 255, 255, 0.5);
490
+ position: absolute;
491
+ padding: 5px 10px;
492
+ font-size: 12px;
493
+ left: 30px;
494
+ bottom: -10px;
495
+ }
496
+
497
+ .mapbox-directions-steps {
498
+ position: relative;
499
+ list-style: none;
500
+ margin: 0;
501
+ padding: 0;
502
+ }
503
+
504
+ .mapbox-directions-step {
505
+ position: relative;
506
+ color: rgba(255, 255, 255, 0.75);
507
+ cursor: pointer;
508
+ padding: 20px 20px 20px 40px;
509
+ font-size: 14px;
510
+ line-height: 18px;
511
+ font-weight: 300;
512
+ letter-spacing: 0.1em;
513
+
514
+ * {
515
+ pointer-events: none;
516
+ }
517
+
518
+ &:hover {
519
+ color: white;
520
+ }
521
+
522
+ &:after {
523
+ content: '';
524
+ position: absolute;
525
+ top: 45px;
526
+ bottom: -10px;
527
+ border-left: 2px dotted rgba(255, 255, 255, 0.2);
528
+ left: 20px;
529
+ }
530
+
531
+ &:last-child {
532
+ &:after, .mapbox-directions-step-distance {
533
+ display: none;
534
+ }
535
+ }
536
+ }
537
+
538
+ .mapbox-marker-drag-icon {
539
+ display: block;
540
+ background-color: #444;
541
+ border-radius: 50%;
542
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
543
+ }
544
+
545
+ .mapbox-marker-drag-icon-step {
546
+ background-color: #3BB2D0;
547
+ }
548
+
549
+ .mapbox-directions-clearfix:after {
550
+ content: '';
551
+ display: block;
552
+ height: 0;
553
+ clear: both;
554
+ visibility: hidden;
555
+ }
556
+
557
+ /* Mobile */
558
+ @media only screen and (max-width: 640px) {
559
+ /* Containers */
560
+
561
+ .directions-control {
562
+ &.directions-control {
563
+ width: 100%;
564
+ max-width: 100%;
565
+ }
566
+
567
+ &.directions-control-inputs {
568
+ top: 0;
569
+ left: 0;
570
+ }
571
+ }
572
+
573
+ /* Input container */
574
+
575
+ .mapbox-directions-profile {
576
+ margin: 10px;
577
+ }
578
+
579
+ /* Instructions container */
580
+
581
+ .mapbox-directions-routes {
582
+ float: right;
583
+ margin-right: 10px;
584
+ }
585
+
586
+ .directions-control.directions-control-directions {
587
+ top: auto;
588
+ max-height: 40%;
589
+ }
590
+
591
+ .mapbox-directions-multiple {
592
+ min-height: 50px;
593
+ }
594
+ }
595
+
596
+ @-webkit-keyframes rotate {
597
+ from {
598
+ -webkit-transform: rotate(0deg);
599
+ }
600
+
601
+ to {
602
+ -webkit-transform: rotate(360deg);
603
+ }
604
+ }
605
+
606
+ @-moz-keyframes rotate {
607
+ from {
608
+ -moz-transform: rotate(0deg);
609
+ }
610
+
611
+ to {
612
+ -moz-transform: rotate(360deg);
613
+ }
614
+ }
615
+
616
+ @-ms-keyframes rotate {
617
+ from {
618
+ -ms-transform: rotate(0deg);
619
+ }
620
+
621
+ to {
622
+ -ms-transform: rotate(360deg);
623
+ }
624
+ }
625
+
626
+ @keyframes rotate {
627
+ from {
628
+ transform: rotate(0deg);
629
+ }
630
+
631
+ to {
632
+ transform: rotate(360deg);
633
+ }
634
+ }
635
+
636
+ /* icons */
637
+
638
+ .directions-icon {
639
+ display: inline-block;
640
+ width: 20px;
641
+ height: 20px;
642
+ vertical-align: middle;
643
+ speak: none;
644
+ background-repeat: no-repeat;
645
+ }
646
+
647
+ .directions-icon-arrive {
648
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgaWQ9InN2ZzUzMjciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIwIDIwIj48ZGVmcyBpZD0iZGVmczUzMjkiLz48bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNTMzMiIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48ZyBpZD0iZzU5MzYiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAwNC43MjQ0KSIgb3BhY2l0eT0iMC41Ii8+PGcgaWQ9Imc1OTMyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgaWQ9Imc2MDM4IiBmaWxsPSIjZmZmIi8+PGcgaWQ9InRleHQ2NjA2IiBzdHlsZT0iLWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjonT3BlbiBTYW5zIEJvbGQnO2Jsb2NrLXByb2dyZXNzaW9uOnRiO2NvbG9yOiNGRkY7ZGlyZWN0aW9uOmx0cjtkaXNwbGF5OmlubGluZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZpbGwtcnVsZTpub256ZXJvO2ZpbGw6I0ZGRjtmb250LWZhbWlseTonT3BlbiBTYW5zJztmb250LXNpemU6MTYuODE7Zm9udC13ZWlnaHQ6Ym9sZDtsZXR0ZXItc3BhY2luZzpub3JtYWw7bGluZS1oZWlnaHQ6MTI1O292ZXJmbG93OnZpc2libGU7dGV4dC1hbGlnbjpjZW50ZXI7dGV4dC1hbmNob3I6bWlkZGxlO3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1pbmRlbnQ6MDt0ZXh0LXRyYW5zZm9ybTpub25lO3dvcmQtc3BhY2luZzpub3JtYWw7d3JpdGluZy1tb2RlOmxyLXRiIj48cGF0aCBkPSJtMzIwNiA5OTYuMzYgMy43MyAwcTIuNTUgMCAzLjcgMC43MyAxLjE2IDAuNzIgMS4xNiAyLjMxIDAgMS4wOC0wLjUxIDEuNzYtMC41IDAuNjktMS4zNCAwLjgzbDAgMC4wOHExLjE0IDAuMjUgMS42NCAwLjk1IDAuNTEgMC43IDAuNTEgMS44NiAwIDEuNjQtMS4xOSAyLjU2LTEuMTggMC45Mi0zLjIyIDAuOTJsLTQuNDkgMCAwLTEyem0yLjU0IDQuNzUgMS40OCAwcTEuMDMgMCAxLjQ5LTAuMzIgMC40Ny0wLjMyIDAuNDctMS4wNiAwLTAuNjktMC41MS0wLjk4LTAuNS0wLjMtMS41OS0wLjNsLTEuMzQgMCAwIDIuNjd6bTAgMi4wMiAwIDMuMTMgMS42NiAwcTEuMDUgMCAxLjU1LTAuNCAwLjUtMC40IDAuNS0xLjIzIDAtMS40OS0yLjEzLTEuNDlsLTEuNTggMHoiIGlkPSJwYXRoMjcyMTIiLz48L2c+PC9nPjwvc3ZnPg==);
649
+ }
650
+
651
+ .directions-icon-slight-left {
652
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIwNiA5OTYuNCAwIDcuNSAzLjEtMy4xIDIuOSAzIDAgNC42IDIgMCAwLTUuNC0zLjUtMy41IDMtM3oiIGZpbGw9IiNGRkYiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIG9wYWNpdHk9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsLTIpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==);
653
+ }
654
+
655
+ .directions-icon-slight-right {
656
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIwNi41IDk5Ni40IDMgMy0zLjUgMy41IDAgNS40IDIgMCAwLTQuNiAyLjktMyAzLjEgMy4xIDAtNy41eiIgZmlsbD0iI0ZGRiIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAwNC43MjQ0KSIgb3BhY2l0eT0iMC41Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSwtMikiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMjQuNzI0NCkiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+);
657
+ }
658
+
659
+ .directions-icon-straight {
660
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIxNS41IDEwMDEuNC01LjUtNS41LTUuNSA1LjUgNC41IDAgMCA3IDIgMCAwLTd6IiBmaWxsPSIjRkZGIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDA0LjcyNDQpIiBvcGFjaXR5PSIwLjUiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Im0zNDA3IDk0Ny40LTIgNiA3LjMgMC0yIDYgMiAwIDQtMTItMS4yIDB6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==);
661
+ }
662
+
663
+ .directions-icon-depart {
664
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgaWQ9InN2ZzUzMjciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIwIDIwIj48ZGVmcyBpZD0iZGVmczUzMjkiLz48bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNTMzMiIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48ZyBpZD0iZzU5MzYiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAwNC43MjQ0KSIgb3BhY2l0eT0iMC41Ii8+PGcgaWQ9Imc1OTMyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgaWQ9Imc2MDM4IiBmaWxsPSIjZmZmIi8+PGcgaWQ9InRleHQ2NTkzIiBzdHlsZT0iLWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjonT3BlbiBTYW5zIEJvbGQnO2Jsb2NrLXByb2dyZXNzaW9uOnRiO2NvbG9yOiNGRkY7ZGlyZWN0aW9uOmx0cjtkaXNwbGF5OmlubGluZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZpbGwtcnVsZTpub256ZXJvO2ZpbGw6I0ZGRjtmb250LWZhbWlseTonT3BlbiBTYW5zJztmb250LXNpemU6MTYuNzQ7Zm9udC13ZWlnaHQ6Ym9sZDtsZXR0ZXItc3BhY2luZzpub3JtYWw7bGluZS1oZWlnaHQ6MTI1O292ZXJmbG93OnZpc2libGU7dGV4dC1hbGlnbjpjZW50ZXI7dGV4dC1hbmNob3I6bWlkZGxlO3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1pbmRlbnQ6MDt0ZXh0LXRyYW5zZm9ybTpub25lO3dvcmQtc3BhY2luZzpub3JtYWw7d3JpdGluZy1tb2RlOmxyLXRiIj48cGF0aCBkPSJtMzIxMy4wNCAxMDA4LjM2LTAuODctMi44NC00LjM2IDAtMC44NyAyLjg0LTIuNzMgMCA0LjIyLTEyIDMuMSAwIDQuMjMgMTItMi43MyAwem0tMS40Ny00Ljk3cS0xLjItMy44Ny0xLjM2LTQuMzctMC4xNS0wLjUxLTAuMjEtMC44LTAuMjcgMS4wNS0xLjU0IDUuMTdsMy4xMSAweiIgaWQ9InBhdGgyNzIwOSIvPjwvZz48L2c+PC9zdmc+);
665
+ }
666
+
667
+ .directions-icon-roundabout {
668
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIxMCA5OTUuNGMtMS41IDAtMy4xIDAuNi00LjIgMS43LTIuMyAyLjMtMi4zIDYuMiAwIDguNWwxLjQtMS40Yy0xLjYtMS42LTEuNi00LjEgMC01LjYgMS42LTEuNiA0LjEtMS42IDUuNiAwIDEuNiAxLjYgMS42IDQuMSAwIDUuNi0wLjggMC44LTEuOCAxLjItMi44IDEuMmwtMSAwIDAgNCAyIDAgMC0yLjFjMS4yLTAuMiAyLjQtMC44IDMuMy0xLjcgMi4zLTIuMyAyLjMtNi4yIDAtOC41LTEuMi0xLjItMi43LTEuNy00LjItMS43eiIgc3R5bGU9Ii1pbmtzY2FwZS1mb250LXNwZWNpZmljYXRpb246U2FucztiYXNlbGluZS1zaGlmdDpiYXNlbGluZTtibG9jay1wcm9ncmVzc2lvbjp0YjtkaXJlY3Rpb246bHRyO2ZpbGw6I0ZGRjtmb250LWZhbWlseTpTYW5zO2ZvbnQtc2l6ZTptZWRpdW07bGV0dGVyLXNwYWNpbmc6bm9ybWFsO2xpbmUtaGVpZ2h0Om5vcm1hbDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtYW5jaG9yOnN0YXJ0O3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1pbmRlbnQ6MDt0ZXh0LXRyYW5zZm9ybTpub25lO3dvcmQtc3BhY2luZzpub3JtYWw7d3JpdGluZy1tb2RlOmxyLXRiIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDA0LjcyNDQpIiBvcGFjaXR5PSIwLjUiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=);
669
+ }
670
+
671
+ .directions-icon-error {
672
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIG9wYWNpdHk9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsLTIpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0ibTMyMTAgOTk2LjRjLTAuNiAwLTEuMiAwLjMtMS41IDAuOGwtNC4zIDkuMmMtMC41IDAuOCAwIDIgMS4xIDJsNC43IDAgNC43IDBjMS4xIDAgMS42LTEuMiAxLjEtMmwtNC4zLTkuMmMtMC4zLTAuNS0wLjktMC44LTEuNS0wLjh6bTAgMyAxIDEgMCAzLTIgMCAwLTN6bS0xIDUgMiAwIDAgMi0yIDB6IiBmaWxsPSIjMDAwIi8+PC9nPjwvc3ZnPg==);
673
+ }
674
+
675
+ .directions-icon-reverse {
676
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIG9wYWNpdHk9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsLTIpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0ibTMyMTAgOTk1LjktNC41IDQuNSAzLjUgMCAwIDQtMy41IDAgNC41IDQuNSA0LjUtNC41LTMuNSAwIDAtNCAzLjUgMC00LjUtNC41eiIgZmlsbD0iIzAwMCIvPjwvZz48L3N2Zz4=);
677
+ }
678
+
679
+ .directions-icon-sharp-left {
680
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIxMy42IDk5Ni40LTYuNSA2LjUtMy0zIDAgNy41IDcuNSAwLTMuMS0zLjEgNC42LTQuNSAwIDUuNiAyIDAgMC04LTEuNC0xeiIgZmlsbD0iI0ZGRiIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAwNC43MjQ0KSIgb3BhY2l0eT0iMC41Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSwtMikiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMjQuNzI0NCkiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+);
681
+ }
682
+
683
+ .directions-icon-sharp-right {
684
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIwNi40IDk5Ni40LTEuNCAxIDAgOCAyIDAgMC01LjYgNC42IDQuNS0zLjEgMy4xIDcuNSAwIDAtNy41LTMgMy02LjUtNi41eiIgZmlsbD0iI0ZGRiIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAwNC43MjQ0KSIgb3BhY2l0eT0iMC41Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSwtMikiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMjQuNzI0NCkiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJtMzQwNyA5NDcuNC0yIDYgNy4zIDAtMiA2IDIgMCA0LTEyLTEuMiAweiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=);
685
+ }
686
+
687
+ .directions-icon-left {
688
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIwOSA5OTUuOSAwIDQuNSA1IDAgMSAxIDAgNi0yIDAgMC01LTQgMCAwIDQuNS01LjUtNS41eiIgc3R5bGU9Ii1pbmtzY2FwZS1mb250LXNwZWNpZmljYXRpb246U2FucztiYXNlbGluZS1zaGlmdDpiYXNlbGluZTtibG9jay1wcm9ncmVzc2lvbjp0YjtkaXJlY3Rpb246bHRyO2ZpbGw6I0ZGRjtmb250LWZhbWlseTpTYW5zO2ZvbnQtc2l6ZTptZWRpdW07bGV0dGVyLXNwYWNpbmc6bm9ybWFsO2xpbmUtaGVpZ2h0Om5vcm1hbDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtYW5jaG9yOnN0YXJ0O3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1pbmRlbnQ6MDt0ZXh0LXRyYW5zZm9ybTpub25lO3dvcmQtc3BhY2luZzpub3JtYWw7d3JpdGluZy1tb2RlOmxyLXRiIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDA0LjcyNDQpIiBvcGFjaXR5PSIwLjUiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=);
689
+ }
690
+
691
+ .directions-icon-right {
692
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIxMSA5OTUuOSAwIDQuNS01IDAtMSAxIDAgNiAyIDAgMC01IDQgMCAwIDQuNSA1LjUtNS41eiIgc3R5bGU9Ii1pbmtzY2FwZS1mb250LXNwZWNpZmljYXRpb246U2FucztiYXNlbGluZS1zaGlmdDpiYXNlbGluZTtibG9jay1wcm9ncmVzc2lvbjp0YjtkaXJlY3Rpb246bHRyO2ZpbGw6I0ZGRjtmb250LWZhbWlseTpTYW5zO2ZvbnQtc2l6ZTptZWRpdW07bGV0dGVyLXNwYWNpbmc6bm9ybWFsO2xpbmUtaGVpZ2h0Om5vcm1hbDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtYW5jaG9yOnN0YXJ0O3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1pbmRlbnQ6MDt0ZXh0LXRyYW5zZm9ybTpub25lO3dvcmQtc3BhY2luZzpub3JtYWw7d3JpdGluZy1tb2RlOmxyLXRiIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDA0LjcyNDQpIiBvcGFjaXR5PSIwLjUiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Im0zNDA3IDk0Ny40LTIgNiA3LjMgMC0yIDYgMiAwIDQtMTItMS4yIDB6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==);
693
+ }
694
+
695
+ .directions-icon-u-turn {
696
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIwOSA5OTYuNGMtMS43IDAtMy4xIDAuNi0zLjkgMS42LTAuOCAxLTEuMSAyLjItMS4xIDMuNGwwIDYgMiAwIDAtNmMwLTAuOCAwLjItMS42IDAuNy0yLjEgMC40LTAuNSAxLjEtMC45IDIuMy0wLjkgMS4zIDAgMS45IDAuNCAyLjMgMC45IDAuNCAwLjUgMC43IDEuMyAwLjcgMi4xbDAgMi00LjUgMCA1LjUgNS41IDUuNS01LjUtNC41IDAgMC0yYzAtMS4yLTAuMy0yLjQtMS4xLTMuNC0wLjgtMS0yLjItMS42LTMuOS0xLjZ6IiBzdHlsZT0iLWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zO2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2Jsb2NrLXByb2dyZXNzaW9uOnRiO2RpcmVjdGlvbjpsdHI7ZmlsbDojRkZGO2ZvbnQtZmFtaWx5OlNhbnM7Zm9udC1zaXplOm1lZGl1bTtsZXR0ZXItc3BhY2luZzpub3JtYWw7bGluZS1oZWlnaHQ6bm9ybWFsO3RleHQtYWxpZ246c3RhcnQ7dGV4dC1hbmNob3I6c3RhcnQ7dGV4dC1kZWNvcmF0aW9uLWxpbmU6bm9uZTt0ZXh0LWRlY29yYXRpb246bm9uZTt0ZXh0LWluZGVudDowO3RleHQtdHJhbnNmb3JtOm5vbmU7d29yZC1zcGFjaW5nOm5vcm1hbDt3cml0aW5nLW1vZGU6bHItdGIiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIG9wYWNpdHk9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsLTIpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==);
697
+ }
698
+
699
+ .directions-icon-waypoint {
700
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIG9wYWNpdHk9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsLTIpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0ibTMyMTUgMTAwMS40YzAgMi44LTUgOC01IDggMCAwLTUtNS4yLTUtOCAwLTIuOCAyLjItNSA1LTUgMi44IDAgNSAyLjIgNSA1eiIgZmlsbD0iI0ZGRiIvPjwvZz48L3N2Zz4=);
701
+ }