@protacon/muster-booking-frontend 1.22.2 → 1.23.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,50 +1,106 @@
1
1
 
2
+ .summary-component-container {
3
+ display: flex;
4
+ justify-content: space-between;
5
+ padding-top: 4px;
6
+ }
7
+
2
8
  .summary-component {
3
9
  display: flex;
4
- text-transform: uppercase;
5
10
  }
6
11
 
7
12
  .summary-component nav {
8
13
  display: flex;
14
+ flex-direction: column;
9
15
  }
16
+
10
17
  nav {
11
18
  cursor: pointer;
19
+ width: 100px;
12
20
  }
21
+
13
22
  nav.disabled {
14
23
  cursor: not-allowed;
15
24
  }
16
25
 
26
+ .step-name {
27
+ color: #000000;
28
+ font-weight: 700;
29
+ font-size: 32px;
30
+ line-height: 39px;
31
+ }
32
+
17
33
  .nav-text {
18
34
  margin: 0px 24px 0px 4px;
19
35
  color: #B9BEC1;
20
36
  text-decoration: underline;
37
+ margin: auto;
38
+ }
39
+
40
+ .icon-booking {
41
+ fill: white;
42
+ }
43
+
44
+ .back-icon {
45
+ display: none;
21
46
  }
22
47
 
23
48
  @media (max-width: 991px) {
49
+ .back-icon {
50
+ display: inline;
51
+ fill: #CCCCCC;
52
+ }
53
+ .summary-component-container {
54
+ justify-content: flex-start;
55
+ }
24
56
  .nav-text {
25
57
  display: none;
26
58
  }
59
+ .step-name {
60
+ font-size: 20px;
61
+ line-height: 24px;
62
+ }
63
+ nav {
64
+ width: 22px;
65
+ margin-right: 15px;
66
+ }
67
+ .navigation-buttons-on-header {
68
+ display: none;
69
+ }
27
70
  }
28
71
 
29
- .nav-button {
30
- background: #B9BEC1;
72
+ .nav-button-booking {
73
+ display: inline-block;
74
+ font-weight: 400;
75
+ text-align: center;
76
+ vertical-align: middle;
77
+ -webkit-user-select: none;
78
+ -moz-user-select: none;
79
+ -ms-user-select: none;
80
+ user-select: none;
81
+ border: 1px solid transparent;
82
+ font-size: 1rem;
83
+ line-height: 1.5;
84
+ border-radius: .25rem;
85
+ transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
86
+ background-color: #B9BEC1;
31
87
  width: 24px;
32
88
  height: 24px;
33
89
  padding: 0px;
34
- margin: 0px 6px 10px;
90
+ margin: auto;
35
91
  color: white;
36
92
  }
37
93
 
38
- .summary-component nav.active .nav-button {
39
- background: #95C01F;
94
+ .summary-component nav.active .nav-button-booking {
95
+ background-color: #95C01F;
40
96
  }
41
97
 
42
- .nav-button:hover {
98
+ .nav-button-booking:hover {
43
99
  color: white;
44
100
  }
45
101
 
46
- .nav-button.disabled {
47
- background: #E3E3E3;
102
+ .nav-button-booking.disabled {
103
+ background-color: #E3E3E3;
48
104
  }
49
105
 
50
106
  .summary-component nav.active .nav-text {
@@ -75,14 +131,83 @@ nav.disabled {
75
131
  margin-bottom: 0;
76
132
  }
77
133
  }
134
+ .button-container-div {
135
+ display: flex;
136
+ justify-content: space-between;
137
+ width: 100%;
138
+ height: 100%;
139
+ }
140
+
141
+ .navigation-container {
142
+ display: none;
143
+ }
144
+
145
+ button {
146
+ border-radius: 7px;
147
+ height: 56px;
148
+ width: 150px;
149
+ color: #ffffff;
150
+ font-weight: 700;
151
+ font-size: 16px;
152
+ line-height: 24px;
153
+ padding: 16px;
154
+ }
155
+
156
+ .next-button {
157
+ background: #8AC100;
158
+ border: none;
159
+ }
160
+
161
+ .return-to-start-button {
162
+ background: #8AC100;
163
+ width: auto;
164
+ }
165
+
166
+ .next-button:disabled {
167
+ background: #E3E3E3;
168
+ color: #000000;
169
+ border: none;
170
+ }
171
+
172
+ .next-button:hover {
173
+ background: #E3E3E3;
174
+ color: #000000;
175
+ border: none;
176
+ }
177
+
178
+ @media screen and (max-width: 424px) {
179
+ .button-container {
180
+ display: flex;
181
+ justify-content: space-between;
182
+ margin-top: 0;
183
+ margin-left: -16px;
184
+ width: 100vw;
185
+ overflow-x: visible;
186
+ height: 89px;
187
+ border-top: #cccccc 1px solid;
188
+ }
189
+ .previous-button-booking {
190
+ display: none !important;
191
+ }
192
+ .navigation-container {
193
+ display: flex;
194
+ flex-direction: row;
195
+ align-items: center;
196
+ }
197
+ }
198
+
199
+ @media screen and (max-width: 375px) {
200
+ .return-to-start-button {
201
+ font-size: small;
202
+ }
203
+ }
78
204
  .vehicle-step-component .plate-form {
79
205
  display: flex;
80
- align-items: flex-start;
206
+ justify-content: space-between;
81
207
  }
82
208
 
83
- .vehicle-step-component .plate-input {
209
+ .vehicle-step-component .plate-input-booking {
84
210
  position: absolute;
85
- height: 100%;
86
211
  top: 0;
87
212
  left: 50px;
88
213
  right: 0px;
@@ -99,6 +224,86 @@ nav.disabled {
99
224
  border-color: #dc3545;
100
225
  }
101
226
 
227
+ .btn-link {
228
+ width: auto;
229
+ }
230
+
231
+ .form-check-container {
232
+ position: relative;
233
+ display: block;
234
+ margin-bottom: 1rem;
235
+ background-color: #b9bec110 ;
236
+ border-radius: 5px;
237
+ border: 1px solid #B9BEC1;
238
+ color: #000000;
239
+ padding: 9px;
240
+ padding-left: 3rem;
241
+ cursor: pointer;
242
+ }
243
+
244
+ .vehicle-info-container {
245
+ display: flex;
246
+ flex-direction: row;
247
+ height: 70px;
248
+ padding: 9px;
249
+ border: 0;
250
+ cursor: context-menu;
251
+ }
252
+
253
+ .vehicle-icon {
254
+ display: flex;
255
+ width: 70px;
256
+ height: 100%;
257
+ margin: 'auto';
258
+ margin-right: 20px;
259
+ }
260
+
261
+ .input-label{
262
+ font-weight: 600;
263
+ }
264
+
265
+ .header{
266
+ font-weight: 600;
267
+ font-size: 12px;
268
+ line-height: 16px;
269
+ }
270
+
271
+ .vehicle-plate-number{
272
+ margin: 0px;
273
+ font-weight: 600;
274
+ color: black;
275
+ }
276
+
277
+ .vehicle-description{
278
+ margin: 0px;
279
+ font-weight: 200;
280
+ color: #7E7A7A;
281
+ }
282
+
283
+ .description{
284
+ margin: 0px;
285
+ color: #7E7A7A;
286
+ font-size: 14px;
287
+ font-weight: 400;
288
+ line-height: 17px;
289
+ }
290
+
291
+ .description{
292
+ margin: 0px;
293
+ color: #7E7A7A;
294
+ font-size: 14px;
295
+ font-weight: 400;
296
+ line-height: 17px;
297
+ }
298
+
299
+ .header-text{
300
+ color: #000000;
301
+ font-weight: 700;
302
+ font-size: 14px;
303
+ line-height: 17px;
304
+ margin-top: 24px;
305
+ }
306
+
102
307
  .vehicle-step-component .valid-feedback,
103
308
  .vehicle-step-component .invalid-feedback {
104
309
  display: block;
@@ -106,23 +311,55 @@ nav.disabled {
106
311
  font-weight: 700;
107
312
  }
108
313
 
109
- .vehicle-step-component .plate-input[readonly] {
314
+ input[type="radio"] {
315
+ appearance: none;
316
+ -webkit-appearance: none;
317
+ -moz-appearance: none;
318
+ width: 20px;
319
+ height: 20px;
320
+ border-radius: 50%;
321
+ outline: none;
322
+ border: 1px solid #b9bec1;
323
+ }
324
+
325
+ input[type="radio"]:checked {
326
+ background-color: #3A7203;
327
+ border: #3A7203;
328
+ }
329
+
330
+ input[type="radio"]:checked::before {
331
+ content: '';
332
+ display: block;
333
+ border-radius: 50%;
334
+ border: 6px solid #ffffff;
335
+ position: absolute;
336
+ top: 50%;
337
+ left: 50%;
338
+ transform: translate(-50%, -50%);
339
+ }
340
+
341
+ .vehicle-step-component .plate-input-booking[readonly] {
110
342
  background-color: white;
111
343
  }
112
344
 
345
+ .plate-container-div {
346
+ display: flex;
347
+ width: 100%;
348
+ }
349
+
113
350
  .vehicle-step-component .plate-container {
114
351
  background-color: #1345AD;
115
352
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAA1CAYAAAAgYencAAAAAXNSR0IArs4c6QAABJFJREFUWAntmEtoVUcYx79zcxNjjUYTpbUIolhJUbEqdCEWAm0RSqtY0UVMbVftwtfC16LgRlB3pW4q2k0f1rqx0AdFBMGFFAoVX4ggoUJam5qbHI1GTbw54+873nOdc3IfufdOwJZM+Gdmvvnme51vHndEaijGl6VmQNpqECFeucnGSNrzJGvzQauTftlMvRYJjz0jP0mrHIdvJOJjrJ7+46hfdW0ysg5PX0sKMHdkxUhGjML0yaJR4xn5FCMakvRkP50kRH2dHPiyzwSyAb8GUfKttMhneGVCnkAa8X4/7Ubi0Zifd09mBcNyAKZ1RKnd9Mthr4UIVVOYvCTok0CBQVNtGfTzn492KjbWL5/k5l226YXaRSMQMhtp8lLSLoG8KAPyErR7kZB8JCDQDiJ6WBvxvbQsJHLvq6E2b4zvuesQ8k4snjxehmmygpW2/PA7oriZIG41nmwieX5PGfnRmymnbMZa2mGO+PIx9VpSuBGlp1i2X/Bpni1vltoHuqSCjPwDYz6ra1Fsz0X+3PyyJbmjsVgSksrryaa3sTCf4RGjg3pGKiV7iPQQspodyPu/iRiP714sRraucAczgzKbbXNrsQnO6b5sM/fZ3LRw2HzEtnmJ7L890idHsC625bpUzh4wDR1H0dcLLqJ7cyifTgYMsR+841JhIVksxzWqC4d7dDwdbkJGtkha/mBbmFdoklNaIA+9Oi4xRlYR7Sansv/7wvg+08fTC0JeD6bYOmIXicDIHjJ1js3gtO3LW0ISjpKpicjyOEFmPiBDu+lvGsVUAwGvUzi2D9l9wOdQOgQtdg4JDBsw4F8Y/qpBV9GpuvEgfxAMmLvySsRoW/E316+F3O5WYN1kzuqHEZOTOsv1rkGWcRpm+Rv7cc/1e8aocI3BIsPteAxs8dtswQmBbOSceLPgWAkiV/ODhLqlBEvpIbxuIDE/55s90m9HYu6FFruoqJfJpas08uhXkGXeLea9V0pTbBnajOTAcKpOvoLmozZLrI5CC3+UYEhdGOJh6YTSwe/DmdBCWd5U6eWn2i/Q/2Ref9U/StQY/eEJWsmDecn9gf6u/B0vI9tt4znlXsegerzX/T4WNZuvpjbC9VfTFcJ8nW+9oCZh1UzWSwzeTQIvhBeaaoRMzJmIwEQEiEBVm4Qx5mXmdgB9G5oN9DHqNjgLvudFIv9YRd9tQTmvY2YIFCvnGCj7OBVZVVEEEKw73jVQD26Br0Ev0EeNN8BqoGUHUTj8tOnwPwbstNxenBTN2AWQBT8nx4r17RtRMR6bbp/vGXtA23i9PEkr16/UgJuWwNN4+iX9q6ALdGPA0zdEi8lpE4XNoAcUKj7E78CrTpUmhaFgPjgJ7oNC5S7Epcl5zvsoSYM28C7YDc6DqPzgXGE5gWj2wG85C7rL8UfjRe+EEYNdI7wDnMgh9qCZS0BNSC26T7gvKP4QRKXT1gCxCXTlBs/YY6Xale6E+qBwE7QCfe/7BqjXuj/o2RDdDTuJyHH67gsetoPBnKeFqiOVaK0oApFgtOoJuBPozjcX6HvPDXAMz89Tj7k8AZELs/xsqJEPAAAAAElFTkSuQmCC');
116
353
  background-repeat: no-repeat;
117
354
  background-position: 9px center;
118
355
  height: 76px;
119
- width: 290px;
356
+ width: 100%;
120
357
  position: relative;
121
358
  border-radius: 9px;
122
- border: 2.25px solid #979797;
359
+ border: 1px solid #979797;
123
360
  }
124
361
 
125
- .vehicle-step-component .plate-input.is-invalid {
362
+ .vehicle-step-component .plate-input-booking.is-invalid {
126
363
  background: white;
127
364
  padding-right: 0;
128
365
  }
@@ -153,22 +390,38 @@ nav.disabled {
153
390
  margin-left: 8px;
154
391
  }
155
392
 
393
+ .vehicle-buttons {
394
+ display: flex;
395
+ width: 100%;
396
+ margin-bottom: 8px;
397
+ flex-wrap: wrap;
398
+ justify-content: space-between;
399
+ }
400
+
156
401
  .vehicle-button {
157
402
  padding: 8px 8px 0px;
158
- margin: 5px;
403
+ margin: 5px 0px;
159
404
  border: 2px solid #D1D1D1;
160
405
  border-radius: 8px;
161
406
  cursor: pointer;
162
407
  background-color: #FDFDFD;
163
- color: black;
164
408
  font-size: 12px;
165
409
  line-height: 1;
166
410
  text-align: center;
167
411
  display: block;
168
412
  float: left;
169
- width: 100px;
413
+ width: 32%;
170
414
  min-height: 90px;
171
415
  }
416
+
417
+ .vehicle-button p {
418
+ color: #3F3E4C;
419
+ }
420
+
421
+ .vehicle-button.selected p {
422
+ color: #3A7203;
423
+ }
424
+
172
425
  .vehicle-button svg {
173
426
  max-height: 30px;
174
427
  margin: 10px auto 10px;
@@ -180,9 +433,10 @@ nav.disabled {
180
433
  }
181
434
 
182
435
  .vehicle-button.selected {
183
- border-color: #567900;
184
- background-color: #8AC100;
436
+ border-color: #3A7203;
437
+ background-color: #95C01F10;
185
438
  font-weight: bold;
439
+ fill: #3A7203;
186
440
  }
187
441
 
188
442
  .info-container,
@@ -190,14 +444,16 @@ nav.disabled {
190
444
  clear: both;
191
445
  }
192
446
 
447
+ .cls-2 {
448
+ fill: red;
449
+ }
193
450
  @media screen and (max-width: 991px) {
194
451
  .vehicle-step-component .plate-container {
195
452
  background-size: 28px;
196
- width: 260px;
197
453
  height: 66px;
198
454
  }
199
455
 
200
- .vehicle-step-component .plate-input {
456
+ .vehicle-step-component .plate-input-booking {
201
457
  left: 46px;
202
458
  width: calc(100% - 46px);
203
459
  font-size: 45px !important;
@@ -224,11 +480,10 @@ nav.disabled {
224
480
  @media screen and (max-width: 424px) {
225
481
  .vehicle-step-component .plate-container {
226
482
  background-size: 20px;
227
- width: 236px;
228
483
  height: 50px;
229
484
  }
230
485
 
231
- .vehicle-step-component .plate-input {
486
+ .vehicle-step-component .plate-input-booking {
232
487
  left: 38px;
233
488
  width: calc(100% - 38px);
234
489
  font-size: 40px !important;
@@ -252,11 +507,17 @@ nav.disabled {
252
507
  height: 40px;
253
508
  }
254
509
 
255
- .vehicle-step-component .selected-service {
256
- margin-top: 1rem;
510
+ .header-text{
511
+ margin: 0;
512
+ margin-top: 8px;
513
+ margin-bottom: 8px;
257
514
  }
258
515
  }
259
516
 
517
+ .list-remark {
518
+ margin: 0;
519
+ }
520
+
260
521
  .station-list a {
261
522
  display: flex;
262
523
  }
@@ -266,13 +527,47 @@ nav.disabled {
266
527
  margin: 0px 8px
267
528
  }
268
529
 
530
+ .station-step-component {
531
+ display: flex;
532
+ overflow: hidden;
533
+ height: 100%;
534
+ }
535
+
269
536
  .station-step-component .invalid-feedback {
270
537
  font-size: 16px;
271
538
  font-weight: 700;
272
539
  }
273
540
 
541
+ .row-container-left {
542
+ display: flex;
543
+ flex-direction: column;
544
+ width: 50%;
545
+ height: 100%;
546
+ overflow-y: hidden;
547
+ padding-right: 32px;
548
+ }
549
+
550
+ .row-container-left-input-container {
551
+ display: flex;
552
+ flex-direction: column;
553
+ }
554
+
555
+ .row-container-left-body {
556
+ display: flex;
557
+ flex-direction: column;
558
+ overflow-y: auto;
559
+ overflow-x: hidden;
560
+ }
561
+
562
+ .row-container-right {
563
+ display: flex;
564
+ width: 50%;
565
+ height: 557px;
566
+ padding-left: 32px;
567
+ }
568
+
274
569
  .station-step-component .geocode-input-group button {
275
- height: 38px;
570
+ height: 56px;
276
571
  }
277
572
 
278
573
  .station-step-component .geocode-input-group {
@@ -290,6 +585,81 @@ nav.disabled {
290
585
  }
291
586
 
292
587
 
588
+ .selected-component {
589
+ background-color: #95c01f10 ;
590
+ border: 1px solid #3A7203;
591
+ color: #3A7203;
592
+ }
593
+
594
+ input[type="checkbox"] {
595
+ accent-color: #3A7203;
596
+ height: 20px;
597
+ width: 20px;
598
+ }
599
+
600
+ /*For pagination component*/
601
+ .page-link {
602
+ color: #3A7203 !important;
603
+ }
604
+
605
+ /*For pagination component*/
606
+ .page-item.active .page-link {
607
+ z-index: 1;
608
+ color: #fff !important;
609
+ background-color: #3A7203 !important;
610
+ border-color: #3A7203 !important;
611
+ }
612
+
613
+ .map-button {
614
+ display: none;
615
+ }
616
+
617
+ .map-button:focus {
618
+ box-shadow: none;
619
+ }
620
+
621
+ @media screen and (max-width: 991px) {
622
+ .row-container-left {
623
+ width: 100%;
624
+ height: auto;
625
+ padding: 0px;
626
+ }
627
+ .row-container-left-body.show-map {
628
+ display: none;
629
+ }
630
+ .row-container-right {
631
+ display: none;
632
+ height: 100%;
633
+ }
634
+ .row-container-right.show-map {
635
+ display: flex;
636
+ height: 100%;
637
+ width: 100%;
638
+ padding: 0px;
639
+ }
640
+ .station-step-component {
641
+ flex-direction: column;
642
+ height: 100vh;
643
+ }
644
+ .map-button {
645
+ display: inline-block;
646
+ background-color: #b9bec110;
647
+ border-color: #b9bec110;
648
+ color: #000000;
649
+ width: 56px;
650
+ height: 56px;
651
+ padding: 0;
652
+ margin-left: 16px;
653
+ }
654
+ }
655
+ .time-step-component {
656
+ width: 100%;
657
+ height: 100%;
658
+ padding: 0px;
659
+ display: flex;
660
+ overflow: hidden;
661
+ }
662
+
293
663
  .react-datepicker {
294
664
  border: none;
295
665
  }
@@ -325,7 +695,6 @@ nav.disabled {
325
695
 
326
696
  .time-step-table {
327
697
  width: 100%;
328
-
329
698
  border-top: 1px solid #E9E9E9;
330
699
  border-bottom: 2px solid #E9E9E9;
331
700
  }
@@ -342,11 +711,9 @@ nav.disabled {
342
711
  left: 20px;
343
712
  right: 20px;
344
713
  padding: 20px;
345
-
346
714
  background: #95C01F;
347
715
  border-radius: 7px;
348
716
  cursor: pointer;
349
-
350
717
  font-size: 18px;
351
718
  color: white;
352
719
  text-align: center;
@@ -376,6 +743,37 @@ nav.disabled {
376
743
  padding: 8px 4px 0 12px;
377
744
  }
378
745
 
746
+ .sort-header {
747
+ display: flex;
748
+ width: 100%;
749
+ justify-content: space-between;
750
+ flex-direction: row;
751
+ }
752
+
753
+ .dropdown-toggle::after {
754
+ display: none !important;
755
+ }
756
+
757
+ .sort-button {
758
+ color: #95C01F !important;
759
+ height: auto;
760
+ width: auto;
761
+ padding: 5px;
762
+ background-color: transparent !important;
763
+ border: none;
764
+ margin: auto;
765
+ margin-right: 2px;
766
+ display: flex;
767
+ justify-content: space-between;
768
+ }
769
+
770
+ .sort-dropdown {
771
+ height: 20px;
772
+ margin: auto;
773
+ margin-right: 2px;
774
+ margin-bottom: 24px;
775
+ }
776
+
379
777
  .slot {
380
778
  border: 2px solid #D8D8D8;
381
779
  border-radius: 2px;
@@ -418,10 +816,15 @@ nav.disabled {
418
816
  padding: 4px 8px;
419
817
  }
420
818
 
421
- .slot-option {
819
+ .slot-option-container {
422
820
  display: flex;
423
- cursor: pointer;
424
- margin: 3px 0px;
821
+ flex-direction: row;
822
+ justify-content: space-between;
823
+ }
824
+
825
+ .slot-left{
826
+ display: flex;
827
+ flex-direction: row;
425
828
  }
426
829
 
427
830
  .slot-option-checkox {
@@ -433,6 +836,24 @@ nav.disabled {
433
836
  flex-grow: 1;
434
837
  }
435
838
 
839
+ .slot-price {
840
+ font-weight: 700;
841
+ font-size: 16px;
842
+ line-height: 19px;
843
+ }
844
+
845
+ .slot-time {
846
+ font-weight: 700;
847
+ font-size: 16px;
848
+ line-height: 19px;
849
+ }
850
+
851
+ .slot-station {
852
+ font-weight: 400;
853
+ font-size: 14px;
854
+ line-height: 17px;
855
+ }
856
+
436
857
  .slot-option.slot-cheap .slot-price {
437
858
  color: #8E2F2F;
438
859
  }
@@ -443,7 +864,180 @@ nav.disabled {
443
864
  text-transform: uppercase;
444
865
  }
445
866
 
867
+ .react-datepicker {
868
+ border-radius: 7px 7px 0 0;
869
+ font-size: 1em;
870
+ width: 100%;
871
+ background-color: #F9F9F9;
872
+ }
873
+ .react-datepicker__header {
874
+ padding-top: 0.8em;
875
+ border: none;
876
+ }
877
+ .react-datepicker__day-name {
878
+ width: 14%;
879
+ line-height: 2.9em;
880
+ margin: 0;
881
+ height: 2.9em;
882
+ }
883
+ .react-datepicker__month-container {
884
+ width: 100%;
885
+ height: 100%;
886
+ }
887
+ .react-datepicker__month {
888
+ padding: 0;
889
+ margin: 0;
890
+ }
891
+ .react-datepicker__week {
892
+ width: 100%;
893
+ }
894
+ .react-datepicker__day {
895
+ width: 14%;
896
+ line-height: 2.9em;
897
+ margin: 0;
898
+ height: 76px;
899
+ }
900
+ .react-datepicker__day-name {
901
+ width: 12.5%;
902
+ }
903
+ .react-datepicker__day-names {
904
+ margin-left: -12.5%;
905
+ }
906
+ .react-datepicker__week-number {
907
+ display: none;
908
+ }
909
+ .react-datepicker__current-month {
910
+ font-size: 1em;
911
+ }
912
+ .react-datepicker__navigation {
913
+ top: 1em;
914
+ line-height: 1.7em;
915
+ border: 0.45em solid transparent;
916
+ }
917
+ .react-datepicker__navigation--previous {
918
+ border-right-color: #ccc;
919
+ left: 1em;
920
+ }
921
+ .react-datepicker__navigation--next{
922
+ border-left-color: #ccc;
923
+ right: 1em;
924
+ }
925
+ .react-datepicker__navigation--previous:focus {
926
+ outline: none;
927
+ }
928
+ .react-datepicker__navigation--next:focus {
929
+ outline: none;
930
+ }
931
+ .react-datepicker__day--selected {
932
+ background-color: #95C01F;
933
+ padding: 0 !important;
934
+ width: 14% !important;
935
+ }
936
+ .react-datepicker__day--selected:hover {
937
+ background-color: #3A7203;
938
+ }
939
+
940
+ .day-with-price {
941
+ padding: 6px;
942
+ height: 76px;
943
+ border: 2px solid transparent;
944
+ border-radius: 4px;
945
+ display: flex;
946
+ flex-direction: column;
947
+ }
948
+
949
+ .selected-day {
950
+ border: 2px solid #3A7203;
951
+ border-radius: 4px;
952
+ }
953
+
954
+ .date-text {
955
+ font-weight: 700;
956
+ font-size: 16px;
957
+ line-height: 24px;
958
+ margin: 0;
959
+ padding: 0;
960
+ }
961
+
962
+ .price-text {
963
+ padding: 0;
964
+ font-weight: 400;
965
+ font-size: 14px;
966
+ line-height: 16px;
967
+ }
968
+
969
+ .row-container-right-prices {
970
+ display: flex;
971
+ flex-direction: column;
972
+ width: 50%;
973
+ height: 100%;
974
+ padding-left: 32px;
975
+ overflow-y: auto;
976
+ }
977
+
978
+ .row-container-right-prices-body {
979
+ display: flex;
980
+ flex-direction: column;
981
+ overflow-y: auto;
982
+ }
983
+
984
+ .calendar-footer {
985
+ display: none;
986
+ }
987
+
988
+ .react-datepicker__week-hidden {
989
+ display: none;
990
+ }
991
+
992
+ .time-step-component-left {
993
+ display: flex;
994
+ flex-direction: column;
995
+ width: 50%;
996
+ height: 100%;
997
+ overflow-y: hidden;
998
+ padding-right: 32px;
999
+ }
1000
+
446
1001
  @media (max-width: 991px) {
1002
+ .time-step-component {
1003
+ height: auto;
1004
+ flex-direction: column;
1005
+ }
1006
+ .calendar-footer {
1007
+ display: inline;
1008
+ width: 100%;
1009
+ height: 50px;
1010
+ display: flex;
1011
+ margin-top: -10px;
1012
+ border-radius: 0 0 7px 7px;
1013
+ justify-content: center;
1014
+ background-color: #F9F9F9;
1015
+ }
1016
+ .calendar-button {
1017
+ border: none;
1018
+ background-color: inherit;
1019
+ padding: 14px 28px;
1020
+ font-size: 16px;
1021
+ cursor: pointer;
1022
+ display: inline-block;
1023
+ color: #3A7203
1024
+ }
1025
+ .day-with-price {
1026
+ height: 50px;
1027
+ display: flex;
1028
+ margin: 0;
1029
+ padding: 0;
1030
+ }
1031
+ .price-text {
1032
+ font-weight: 200;
1033
+ font-size: 12px;
1034
+ margin: 0;
1035
+ }
1036
+ .react-datepicker__day {
1037
+ line-height: 2.9em;
1038
+ margin: 0;
1039
+ height: 50px;
1040
+ }
447
1041
  .time-step-component-header {
448
1042
  display: block;
449
1043
  }
@@ -455,6 +1049,27 @@ nav.disabled {
455
1049
  .select-date-and-time {
456
1050
  margin-left: 6px;
457
1051
  }
1052
+
1053
+ .time-step-component-left {
1054
+ display: block;
1055
+ width: 100%;
1056
+ height: initial;
1057
+ overflow-y: initial;
1058
+ padding-right: 0px;
1059
+ }
1060
+
1061
+ .row-container-right-prices {
1062
+ margin-top: 16px;
1063
+ padding: 0px;
1064
+ height: auto;
1065
+ width: 100%;
1066
+ display: inline;
1067
+ }
1068
+
1069
+ .calendar {
1070
+ display: none;
1071
+ }
1072
+
458
1073
  }
459
1074
 
460
1075
  @media screen and (max-width: 767px) {
@@ -463,6 +1078,7 @@ nav.disabled {
463
1078
  }
464
1079
  }
465
1080
 
1081
+
466
1082
  .finalize-step-component .invalid-feedback {
467
1083
  display: block;
468
1084
  font-size: 16px;
@@ -473,6 +1089,9 @@ nav.disabled {
473
1089
  padding-left: 4px;
474
1090
  }
475
1091
 
1092
+ .confirm-bookin-button {
1093
+ width: auto;
1094
+ }
476
1095
  .summary-component .card-header {
477
1096
  display: flex;
478
1097
  justify-content: center;
@@ -529,6 +1148,10 @@ nav.disabled {
529
1148
  .summary-component .campaign-name {
530
1149
  flex-flow: wrap;
531
1150
  }
1151
+
1152
+ .edit-button {
1153
+ height: auto;
1154
+ }
532
1155
  .confirmation-step-component .confirmation-step-confirm-icon {
533
1156
  width: 38px;
534
1157
  height: 38px;
@@ -544,6 +1167,7 @@ nav.disabled {
544
1167
  .confirmation-calendar-button {
545
1168
  margin-bottom: 16px;
546
1169
  margin-top: 16px;
1170
+ width: auto;
547
1171
  }
548
1172
 
549
1173
  .confirmation-calendar-button svg {
@@ -590,16 +1214,250 @@ nav.disabled {
590
1214
  padding: 30px;
591
1215
  text-align: center;
592
1216
  }
593
-
1217
+ .insurency-button-container {
1218
+ display: flex;
1219
+ }
594
1220
  .modify-reservation-component .invalid-feedback {
595
1221
  display: block;
596
1222
  font-size: 16px;
597
1223
  font-weight: 700;
598
1224
  }
599
1225
 
1226
+ .cancel-booking-button {
1227
+ width: auto;
1228
+ }
1229
+
600
1230
  @media screen and (max-width: 767px) {
601
1231
  .modify-reservation-component .title {
602
1232
  font-size: 1.5rem;
603
1233
  }
604
1234
  }
1235
+ body {
1236
+ background: white;
1237
+ font-size: 16px;
1238
+ font-family: Inter, sans-serif;
1239
+ }
1240
+
1241
+ @font-face {
1242
+ font-display: block;
1243
+ font-family: Azbuka W01 Bold;
1244
+ src: url(/fonts/azbuka.eot);
1245
+ src: url(/fonts/azbuka.eot?#iefix) format("embedded-opentype"),
1246
+ url(/fonts/azbuka.woff2) format("woff2"),
1247
+ url(/fonts/azbuka.woff) format("woff"),
1248
+ url(/fonts/azbuka.ttf) format("truetype"),
1249
+ url("/fonts/azbuka.woff#Azbuka W01 Bold") format("svg");
1250
+ }
1251
+
1252
+ .full-width-input {
1253
+ width: 100% !important;
1254
+ }
1255
+
1256
+ .booking-component h5 {
1257
+ color: #b1b1b1;
1258
+ font-family: Azbuka W01 Bold, "sans-serif";
1259
+ font-size: 18px;
1260
+ }
1261
+
1262
+ .grey {
1263
+ color: #b1b1b1;
1264
+ letter-spacing: 1px;
1265
+ }
1266
+
1267
+ .booking-component h2 {
1268
+ font-family: Azbuka W01 Bold,"sans-serif";
1269
+ font-size: 33px;
1270
+ }
1271
+
1272
+ .booking-component .plate-input-booking {
1273
+ font-family: Azbuka W01 Bold, "sans-serif";
1274
+ font-size: 50px;
1275
+ letter-spacing: 2px;
1276
+ text-align: center;
1277
+ height: 100%;
1278
+ }
1279
+
1280
+ .summary-component {
1281
+ font-family: Azbuka W01 Bold, "sans-serif";
1282
+ }
1283
+
1284
+ .time-step-component h4 {
1285
+ color: #b1b1b1;
1286
+ font-family: Azbuka W01 Bold,"sans-serif";
1287
+ font-size: 18px;
1288
+ text-transform: uppercase;
1289
+ }
1290
+
1291
+ .title {
1292
+ margin-top: .5rem;
1293
+ }
1294
+
1295
+ .form-check-input-booking {
1296
+ position: absolute;
1297
+ margin-top: .3rem;
1298
+ margin-left: -2.25rem
1299
+ }
1300
+
1301
+ .btn-booking {
1302
+ display: inline-block;
1303
+ font-weight: 400;
1304
+ text-align: center;
1305
+ vertical-align: middle;
1306
+ -webkit-user-select: none;
1307
+ -moz-user-select: none;
1308
+ -ms-user-select: none;
1309
+ user-select: none;
1310
+ background-color: transparent;
1311
+ border: 1px solid transparent;
1312
+ padding: .375rem .75rem;
1313
+ font-size: 1rem;
1314
+ line-height: 1.5;
1315
+ border-radius: .25rem;
1316
+ transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
1317
+ }
1318
+
1319
+ .input-group-booking>.custom-file,.input-group-booking>.custom-select,.input-group-booking>.form-control-booking,.input-group-booking>.form-control-plaintext {
1320
+ position: relative;
1321
+ -ms-flex: 1 1 auto;
1322
+ flex: 1 1 auto;
1323
+ width: 1%;
1324
+ min-width: 0;
1325
+ margin-bottom: 0
1326
+ }
1327
+
1328
+ .form-control-booking {
1329
+ display: flex;
1330
+ width: auto;
1331
+ height: 56px;
1332
+ border-radius: 5px;
1333
+ padding: .375rem .75rem;
1334
+ font-size: 1rem;
1335
+ font-weight: 400;
1336
+ line-height: 1.5;
1337
+ color: #495057;
1338
+ background-color: #fff;
1339
+ background-clip: padding-box;
1340
+ border: 1px solid #ced4da;
1341
+ transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
1342
+ }
1343
+
1344
+ .campaing-code {
1345
+ border-radius: 5px 0 0 5px;
1346
+ }
1347
+
1348
+ .is-invalid {
1349
+ border-color: #dc3545;
1350
+ }
1351
+
1352
+ .input-group-booking {
1353
+ position: relative;
1354
+ display: flex;
1355
+ flex-wrap: wrap;
1356
+ align-items: stretch;
1357
+ width: 100%;
1358
+ flex: 1 1 auto;
1359
+ }
1360
+
1361
+ input[type="checkbox"].form-check-input-booking {
1362
+ margin-left: -3.25rem;
1363
+ }
1364
+
1365
+ .booking-component {
1366
+ width: 100%;
1367
+ height: auto;
1368
+ display: flex;
1369
+ overflow: hidden;
1370
+ flex-direction: column;
1371
+ }
1372
+
1373
+ .booking-component-body {
1374
+ display: flex;
1375
+ flex-direction: column;
1376
+ flex: 1;
1377
+ overflow: hidden;
1378
+ width: 100%;
1379
+ }
1380
+
1381
+ .btn-apply-booking {
1382
+ background: #8AC100;
1383
+ border: none;
1384
+ border-radius: 0 5px 5px 0;
1385
+ color: #ffffff;
1386
+ font-weight: 700;
1387
+ font-size: 16px;
1388
+ line-height: 24px;
1389
+ padding: 16px;
1390
+ width: 150px;
1391
+ height: 56px;
1392
+ }
1393
+
1394
+ .booking-component-body-div {
1395
+ display: flex;
1396
+ flex-direction: column;
1397
+ overflow: hidden;
1398
+ overflow-y: auto;
1399
+ width: 100%;
1400
+ height: 825px;
1401
+ }
1402
+
1403
+ .button-container {
1404
+ display: flex;
1405
+ justify-content: space-between;
1406
+ margin-top: 16px;
1407
+ padding: 16px;
1408
+ width: 100%;
1409
+ height: 89px;
1410
+ }
1411
+
1412
+ ::-webkit-scrollbar {
1413
+ width: 16px;
1414
+ }
1415
+
1416
+ ::-webkit-scrollbar-thumb {
1417
+ background: #888;
1418
+ border-left: 12px white solid;
1419
+ }
1420
+
1421
+ ::-webkit-scrollbar-thumb:hover {
1422
+ background: #555;
1423
+ }
1424
+
1425
+ .loader {
1426
+ margin: auto;
1427
+ border: 16px solid #f3f3f3;
1428
+ border-top: 16px solid #95C01F;
1429
+ border-radius: 50%;
1430
+ width: 120px;
1431
+ height: 120px;
1432
+ animation: spin 2s linear infinite;
1433
+ }
1434
+
1435
+ @keyframes spin {
1436
+ 0% { transform: rotate(0deg); }
1437
+ 100% { transform: rotate(360deg); }
1438
+ }
1439
+
1440
+ @media screen and (max-width: 991px) {
1441
+ ::-webkit-scrollbar {
1442
+ width: 0;
1443
+ }
1444
+
1445
+ .booking-component {
1446
+ height: calc(100vh - 97px);
1447
+ }
1448
+
1449
+ .booking-component-body-div {
1450
+ height: auto;
1451
+ }
1452
+
1453
+ .button-container {
1454
+ bottom: 0;
1455
+ }
1456
+ }
1457
+
1458
+ @media screen and (max-height: 1100px) and (min-width: 991px) {
1459
+ .booking-component-body-div {
1460
+ height: calc(100vh - 250px);
1461
+ }
1462
+ }
605
1463