@transferwise/neptune-css 0.0.0-experimental-7cfec48 → 0.0.0-experimental-1ed1574

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.
Files changed (59) hide show
  1. package/dist/css/accordion.css +21 -6
  2. package/dist/css/alerts.css +159 -14
  3. package/dist/css/background.css +6 -2
  4. package/dist/css/badge.css +11 -1
  5. package/dist/css/breadcrumbs.css +2 -1
  6. package/dist/css/button-groups.css +8 -2
  7. package/dist/css/buttons.css +212 -142
  8. package/dist/css/chevron.css +1 -1
  9. package/dist/css/circles.css +22 -10
  10. package/dist/css/close.css +3 -2
  11. package/dist/css/column-layout.css +4 -0
  12. package/dist/css/currency-flags.css +5 -1
  13. package/dist/css/decision.css +14 -5
  14. package/dist/css/dropdowns.css +28 -8
  15. package/dist/css/droppable.css +18 -11
  16. package/dist/css/flex.css +32 -0
  17. package/dist/css/footer.css +46 -8
  18. package/dist/css/grid.css +6 -0
  19. package/dist/css/input-groups.css +188 -142
  20. package/dist/css/link-callout.css +2 -0
  21. package/dist/css/list-group.css +39 -8
  22. package/dist/css/media.css +6 -0
  23. package/dist/css/modals.css +13 -3
  24. package/dist/css/navbar-base.css +107 -19
  25. package/dist/css/navbar.css +175 -37
  26. package/dist/css/navs.css +33 -8
  27. package/dist/css/neptune-addons.css +466 -4
  28. package/dist/css/neptune-core.css +196 -32
  29. package/dist/css/neptune.css +2204 -655
  30. package/dist/css/panels.css +3 -0
  31. package/dist/css/popovers.css +30 -6
  32. package/dist/css/process.css +8 -8
  33. package/dist/css/progress-bars.css +11 -2
  34. package/dist/css/ring.css +2 -2
  35. package/dist/css/select.css +12 -2
  36. package/dist/css/sequences.css +173 -25
  37. package/dist/css/table.css +65 -18
  38. package/dist/css/tick.css +2 -0
  39. package/dist/css/tooltip.css +7 -1
  40. package/dist/css/wells.css +25 -5
  41. package/dist/less/neptune-tokens.less +264 -153
  42. package/dist/props/neptune-tokens.css +132 -145
  43. package/package.json +2 -2
  44. package/src/less/addons/_background-utilities.less +33 -33
  45. package/src/less/alerts.less +28 -28
  46. package/src/less/background.less +3 -0
  47. package/src/less/buttons.less +19 -19
  48. package/src/less/column-layout.less +1 -1
  49. package/src/less/core/_scaffolding.less +13 -13
  50. package/src/less/core/_typography-utilities.less +18 -18
  51. package/src/less/dropdowns.less +7 -7
  52. package/src/less/footer.less +26 -26
  53. package/src/less/modals.less +1 -1
  54. package/src/less/navbar-base.less +25 -25
  55. package/src/less/navbar.less +3 -3
  56. package/src/less/navs.less +9 -9
  57. package/src/less/sequences.less +13 -13
  58. package/src/less/table.less +31 -31
  59. package/src/variables/neptune-tokens.less +8 -8
@@ -21,13 +21,15 @@ legend {
21
21
  label {
22
22
  display: inline-block;
23
23
  max-width: 100%;
24
+ margin-bottom: 4px;
24
25
  margin-bottom: var(--size-4);
25
26
  }
26
27
  label,
27
28
  .secondary {
28
- color: #454745;
29
+ color: #5d7079;
29
30
  color: var(--color-content-secondary);
30
31
  transition: color ease-in-out 0.15s;
32
+ font-size: 0.875rem;
31
33
  font-size: var(--font-size-14);
32
34
  line-height: 20px;
33
35
  }
@@ -71,26 +73,30 @@ input[type='checkbox']:focus {
71
73
  output {
72
74
  display: block;
73
75
  padding-top: 9px;
76
+ font-size: 1rem;
74
77
  font-size: var(--font-size-16);
78
+ line-height: 1.2;
75
79
  line-height: var(--line-height-control);
76
- color: #0e0f0c;
80
+ color: #37517e;
77
81
  color: var(--color-content-primary);
78
82
  }
79
83
  .form-control {
80
84
  display: block;
81
85
  width: 100%;
82
- color: #0e0f0c;
86
+ color: #37517e;
83
87
  color: var(--color-content-primary);
84
88
  background-color: #ffffff;
85
89
  background-color: var(--color-background-screen);
86
90
  background-image: none;
87
- border: 1px solid #868685;
91
+ border: 1px solid #c9cbce;
88
92
  border: 1px solid var(--color-interactive-secondary);
89
93
  transition: border-color ease-in-out 0.15s;
90
94
  min-height: var(--input-height-base);
91
95
  padding: var(--input-padding);
92
96
  border-radius: 3px;
97
+ font-weight: 400;
93
98
  font-weight: var(--font-weight-regular);
99
+ font-size: 1rem;
94
100
  font-size: var(--font-size-16);
95
101
  line-height: 150%;
96
102
  letter-spacing: -0.011em;
@@ -104,16 +110,16 @@ select[multiple].form-control {
104
110
  height: auto;
105
111
  }
106
112
  .form-control:not(.disabled):not(:disabled):focus {
107
- border-color: #65cf21;
113
+ border-color: #0081ba;
108
114
  border-color: var(--color-interactive-accent-active);
109
115
  outline: 0;
110
116
  }
111
117
  .form-control::-moz-placeholder {
112
- color: #6a6c6a;
118
+ color: #768e9c;
113
119
  color: var(--color-content-tertiary);
114
120
  }
115
121
  .form-control::placeholder {
116
- color: #6a6c6a;
122
+ color: #768e9c;
117
123
  color: var(--color-content-tertiary);
118
124
  }
119
125
  textarea.form-control {
@@ -130,20 +136,18 @@ textarea.form-control {
130
136
  margin-top: 8px;
131
137
  }
132
138
  .form-control:focus {
133
- border-color: #65cf21;
139
+ border-color: #0081ba;
134
140
  border-color: var(--color-interactive-accent-active);
135
141
  }
136
142
  .np-theme-personal .form-control:not(.disabled):not(:disabled):focus {
137
- border-color: #163300;
138
143
  border-color: var(--color-interactive-primary);
139
144
  outline: 0;
140
145
  }
141
146
  .np-theme-personal .form-control:hover {
142
- border-color: #6c6c6b;
147
+ border-color: #b5b7ba;
143
148
  border-color: var(--color-interactive-secondary-hover);
144
149
  }
145
150
  .np-theme-personal .form-control:focus {
146
- border-color: #163300;
147
151
  border-color: var(--color-interactive-primary);
148
152
  }
149
153
  input[type='search'] {
@@ -176,6 +180,7 @@ input[type='search'] {
176
180
  .input-group-lg input[type='time'],
177
181
  .input-group-lg input[type='datetime-local'],
178
182
  .input-group-lg input[type='month'] {
183
+ line-height: calc(var(--input-height-large) - 1.5);
179
184
  line-height: calc(var(--input-height-large) - var(--line-height-body));
180
185
  }
181
186
  }
@@ -187,6 +192,7 @@ input[type='search'] {
187
192
  }
188
193
  .form-group:focus-within .control-label,
189
194
  .form-group:focus-within > label {
195
+ color: #0097c7;
190
196
  color: var(--color-content-accent);
191
197
  }
192
198
  .row-equal-height > [class*='col-'] > .form-group {
@@ -276,12 +282,13 @@ fieldset[disabled] .checkbox label {
276
282
  }
277
283
  .form-control-static {
278
284
  margin-bottom: 0;
285
+ min-height: calc(1.2 * 2);
279
286
  min-height: calc(var(--line-height-control) * 2);
280
- color: #454745;
287
+ color: #5d7079;
281
288
  color: var(--color-content-secondary);
282
- background-color: rgba(22,51,0,0.07843);
289
+ background-color: rgba(134,167,189,0.10196);
283
290
  background-color: var(--color-background-neutral);
284
- border: 1px solid #868685;
291
+ border: 1px solid #c9cbce;
285
292
  border: 1px solid var(--color-interactive-secondary);
286
293
  border-radius: 3px;
287
294
  padding: var(--input-padding);
@@ -309,9 +316,11 @@ fieldset[disabled] .checkbox label {
309
316
  border-radius: 3px;
310
317
  font-size: 14px;
311
318
  line-height: 24px;
319
+ font-size: 0.875rem;
312
320
  font-size: var(--font-size-14);
313
321
  line-height: 155%;
314
322
  letter-spacing: -0.006em;
323
+ font-weight: 400;
315
324
  font-weight: var(--font-weight-regular);
316
325
  }
317
326
  select.input-sm {
@@ -325,6 +334,7 @@ select[multiple].input-sm {
325
334
  .navbar .form-control {
326
335
  height: 32px;
327
336
  padding: var(--input-padding-small);
337
+ font-size: 0.875rem;
328
338
  font-size: var(--font-size-14);
329
339
  line-height: 24px;
330
340
  border-radius: 3px;
@@ -343,8 +353,10 @@ select[multiple].input-sm {
343
353
  .form-group-sm .form-control-static,
344
354
  .navbar .form-control-static {
345
355
  height: 32px;
356
+ min-height: calc(1.2 + 14px);
346
357
  min-height: calc(var(--line-height-control) + 14px);
347
358
  padding: var(--input-padding-small);
359
+ font-size: 0.875rem;
348
360
  font-size: var(--font-size-14);
349
361
  line-height: 24px;
350
362
  }
@@ -352,7 +364,9 @@ select[multiple].input-sm {
352
364
  min-height: var(--input-height-large);
353
365
  padding: var(--input-padding-large);
354
366
  border-radius: 3px;
367
+ font-weight: 400;
355
368
  font-weight: var(--font-weight-regular);
369
+ font-size: 1rem;
356
370
  font-size: var(--font-size-16);
357
371
  line-height: 150%;
358
372
  letter-spacing: -0.011em;
@@ -371,6 +385,7 @@ select[multiple].input-lg {
371
385
  .form-group-lg .input-group-lg > .form-control,
372
386
  .form-group-lg .input-group-lg > .input-group-addon {
373
387
  height: var(--input-height-large);
388
+ padding: calc(4px + 24px) 12px 4px;
374
389
  padding: calc(4px + var(--size-24)) 12px 4px;
375
390
  font-size: 22px;
376
391
  line-height: 32px;
@@ -384,6 +399,7 @@ select[multiple].input-lg {
384
399
  }
385
400
  .form-group-lg .form-control-static {
386
401
  height: var(--input-height-large);
402
+ min-height: calc(1.2 + 22px);
387
403
  min-height: calc(var(--line-height-control) + 22px);
388
404
  padding: var(--input-padding-large);
389
405
  font-size: 22px;
@@ -442,16 +458,17 @@ select[multiple].input-lg {
442
458
  }
443
459
  .focus .control-label,
444
460
  .has-focus .control-label {
461
+ color: #0077a5;
445
462
  color: var(--color-content-accent-active);
446
463
  }
447
464
  .focus .input-group-addon,
448
465
  .has-focus .input-group-addon {
449
- border-color: #868685;
466
+ border-color: #c9cbce;
450
467
  border-color: var(--color-interactive-secondary);
451
468
  }
452
469
  .focus .input-group-addon:active,
453
470
  .has-focus .input-group-addon:active {
454
- border-color: #525251;
471
+ border-color: #a7a9ab;
455
472
  border-color: var(--color-interactive-secondary-active);
456
473
  }
457
474
  .help-block,
@@ -460,6 +477,7 @@ select[multiple].input-lg {
460
477
  margin-bottom: 4px;
461
478
  border-width: 0;
462
479
  border-style: solid;
480
+ border-radius: 10px;
463
481
  border-radius: var(--radius-small);
464
482
  padding: 4px 16px 3px;
465
483
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
@@ -469,11 +487,11 @@ select[multiple].input-lg {
469
487
  color: inherit;
470
488
  }
471
489
  .help-block {
472
- color: #454745;
490
+ color: #5d7079;
473
491
  color: var(--color-content-secondary);
474
- border-color: #868685;
492
+ border-color: #c9cbce;
475
493
  border-color: var(--color-interactive-secondary);
476
- background-color: rgba(22,51,0,0.07843);
494
+ background-color: rgba(134,167,189,0.10196);
477
495
  background-color: var(--color-background-neutral);
478
496
  display: block;
479
497
  position: relative;
@@ -546,10 +564,11 @@ select[multiple].input-lg {
546
564
  }
547
565
  .focus .alert,
548
566
  .has-focus .alert {
549
- border-color: #65cf21;
567
+ border-color: #0081ba;
550
568
  border-color: var(--color-interactive-accent-active);
551
569
  }
552
570
  .has-success {
571
+ border-color: #2ead4b !important;
553
572
  border-color: var(--color-interactive-positive) !important;
554
573
  }
555
574
  .has-success .control-label,
@@ -566,7 +585,9 @@ select[multiple].input-lg {
566
585
  .has-success .radio-inline label,
567
586
  .has-success .checkbox-inline label,
568
587
  .has-success .input-group-addon {
588
+ color: #008026 !important;
569
589
  color: var(--color-content-positive) !important;
590
+ border-color: #2ead4b !important;
570
591
  border-color: var(--color-interactive-positive) !important;
571
592
  }
572
593
  .has-success .form-control,
@@ -575,6 +596,7 @@ select[multiple].input-lg {
575
596
  .has-success .btn-input:not(.disabled):not(:disabled):hover,
576
597
  .has-success .input-group-addon,
577
598
  .has-success .alert {
599
+ border-color: #2ead4b !important;
578
600
  border-color: var(--color-interactive-positive) !important;
579
601
  }
580
602
  .has-success:active .form-control,
@@ -598,27 +620,32 @@ select[multiple].input-lg {
598
620
  .has-success:active .alert,
599
621
  .has-success:focus .alert,
600
622
  .has-success:focus-within .alert {
623
+ border-color: #069939 !important;
601
624
  border-color: var(--color-interactive-positive-hover) !important;
602
625
  }
603
626
  .has-success:not(.disabled):not(:disabled):hover.radio label,
604
627
  .has-success:not(.disabled):not(:disabled):hover.checkbox label,
605
628
  .has-success:not(.disabled):not(:disabled):hover .btn-input,
606
629
  .has-success:not(.disabled):not(:disabled):hover .alert {
630
+ border-color: #069939 !important;
607
631
  border-color: var(--color-interactive-positive-hover) !important;
608
632
  }
609
633
  .has-success .form-control-feedback {
634
+ color: #008026;
610
635
  color: var(--color-content-positive);
611
636
  }
612
637
  .has-success .radio > label:not(.disabled):not(:disabled),
613
638
  .has-success.checkbox > label:not(.disabled):not(:disabled) {
639
+ border-color: #2ead4b;
614
640
  border-color: var(--color-interactive-positive);
615
- color: #0e0f0c;
641
+ color: #37517e;
616
642
  color: var(--color-content-primary);
617
643
  }
618
644
  .has-success .radio > label:not(.disabled):not(:disabled):hover,
619
645
  .has-success.checkbox > label:not(.disabled):not(:disabled):hover,
620
646
  .has-success .radio > label:focus-within,
621
647
  .has-success.checkbox > label:focus-within {
648
+ border-color: #069939 !important;
622
649
  border-color: var(--color-interactive-positive-hover) !important;
623
650
  }
624
651
  .has-success .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
@@ -629,16 +656,17 @@ select[multiple].input-lg {
629
656
  .has-success.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
630
657
  .has-success .radio > label:focus-within .tw-radio-button,
631
658
  .has-success.checkbox > label:focus-within .tw-radio-button {
659
+ border-color: #069939 !important;
632
660
  border-color: var(--color-interactive-positive-hover) !important;
633
661
  }
634
662
  .has-success .radio .tw-checkbox-button,
635
663
  .has-success.checkbox .tw-checkbox-button,
636
664
  .has-success .radio .tw-radio-button,
637
665
  .has-success.checkbox .tw-radio-button {
666
+ border-color: #2ead4b;
638
667
  border-color: var(--color-interactive-positive);
639
668
  }
640
669
  .np-theme-personal .has-success {
641
- border-color: #2f5711 !important;
642
670
  border-color: var(--color-sentiment-positive) !important;
643
671
  }
644
672
  .np-theme-personal .has-success .control-label,
@@ -655,9 +683,7 @@ select[multiple].input-lg {
655
683
  .np-theme-personal .has-success .radio-inline label,
656
684
  .np-theme-personal .has-success .checkbox-inline label,
657
685
  .np-theme-personal .has-success .input-group-addon {
658
- color: #2f5711 !important;
659
686
  color: var(--color-sentiment-positive) !important;
660
- border-color: #2f5711 !important;
661
687
  border-color: var(--color-sentiment-positive) !important;
662
688
  }
663
689
  .np-theme-personal .has-success .form-control,
@@ -666,7 +692,6 @@ select[multiple].input-lg {
666
692
  .np-theme-personal .has-success .btn-input:not(.disabled):not(:disabled):hover,
667
693
  .np-theme-personal .has-success .input-group-addon,
668
694
  .np-theme-personal .has-success .alert {
669
- border-color: #2f5711 !important;
670
695
  border-color: var(--color-sentiment-positive) !important;
671
696
  }
672
697
  .np-theme-personal .has-success:active .form-control,
@@ -690,32 +715,27 @@ select[multiple].input-lg {
690
715
  .np-theme-personal .has-success:active .alert,
691
716
  .np-theme-personal .has-success:focus .alert,
692
717
  .np-theme-personal .has-success:focus-within .alert {
693
- border-color: #2f5711 !important;
694
718
  border-color: var(--color-sentiment-positive) !important;
695
719
  }
696
720
  .np-theme-personal .has-success:not(.disabled):not(:disabled):hover.radio label,
697
721
  .np-theme-personal .has-success:not(.disabled):not(:disabled):hover.checkbox label,
698
722
  .np-theme-personal .has-success:not(.disabled):not(:disabled):hover .btn-input,
699
723
  .np-theme-personal .has-success:not(.disabled):not(:disabled):hover .alert {
700
- border-color: #2f5711 !important;
701
724
  border-color: var(--color-sentiment-positive) !important;
702
725
  }
703
726
  .np-theme-personal .has-success .form-control-feedback {
704
- color: #2f5711;
705
727
  color: var(--color-sentiment-positive);
706
728
  }
707
729
  .np-theme-personal .has-success .radio > label:not(.disabled):not(:disabled),
708
730
  .np-theme-personal .has-success.checkbox > label:not(.disabled):not(:disabled) {
709
- border-color: #2f5711;
710
731
  border-color: var(--color-sentiment-positive);
711
- color: #0e0f0c;
732
+ color: #37517e;
712
733
  color: var(--color-content-primary);
713
734
  }
714
735
  .np-theme-personal .has-success .radio > label:not(.disabled):not(:disabled):hover,
715
736
  .np-theme-personal .has-success.checkbox > label:not(.disabled):not(:disabled):hover,
716
737
  .np-theme-personal .has-success .radio > label:focus-within,
717
738
  .np-theme-personal .has-success.checkbox > label:focus-within {
718
- border-color: #2f5711 !important;
719
739
  border-color: var(--color-sentiment-positive) !important;
720
740
  }
721
741
  .np-theme-personal .has-success .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
@@ -726,18 +746,16 @@ select[multiple].input-lg {
726
746
  .np-theme-personal .has-success.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
727
747
  .np-theme-personal .has-success .radio > label:focus-within .tw-radio-button,
728
748
  .np-theme-personal .has-success.checkbox > label:focus-within .tw-radio-button {
729
- border-color: #2f5711 !important;
730
749
  border-color: var(--color-sentiment-positive) !important;
731
750
  }
732
751
  .np-theme-personal .has-success .radio .tw-checkbox-button,
733
752
  .np-theme-personal .has-success.checkbox .tw-checkbox-button,
734
753
  .np-theme-personal .has-success .radio .tw-radio-button,
735
754
  .np-theme-personal .has-success.checkbox .tw-radio-button {
736
- border-color: #2f5711;
737
755
  border-color: var(--color-sentiment-positive);
738
756
  }
739
757
  .has-info {
740
- border-color: #9fe870 !important;
758
+ border-color: #00a2dd !important;
741
759
  border-color: var(--color-interactive-accent) !important;
742
760
  }
743
761
  .has-info .control-label,
@@ -754,8 +772,9 @@ select[multiple].input-lg {
754
772
  .has-info .radio-inline label,
755
773
  .has-info .checkbox-inline label,
756
774
  .has-info .input-group-addon {
775
+ color: #0097c7 !important;
757
776
  color: var(--color-content-accent) !important;
758
- border-color: #9fe870 !important;
777
+ border-color: #00a2dd !important;
759
778
  border-color: var(--color-interactive-accent) !important;
760
779
  }
761
780
  .has-info .form-control,
@@ -764,7 +783,7 @@ select[multiple].input-lg {
764
783
  .has-info .btn-input:not(.disabled):not(:disabled):hover,
765
784
  .has-info .input-group-addon,
766
785
  .has-info .alert {
767
- border-color: #9fe870 !important;
786
+ border-color: #00a2dd !important;
768
787
  border-color: var(--color-interactive-accent) !important;
769
788
  }
770
789
  .has-info:active .form-control,
@@ -788,31 +807,32 @@ select[multiple].input-lg {
788
807
  .has-info:active .alert,
789
808
  .has-info:focus .alert,
790
809
  .has-info:focus-within .alert {
791
- border-color: #80e142 !important;
810
+ border-color: #008fc9 !important;
792
811
  border-color: var(--color-interactive-accent-hover) !important;
793
812
  }
794
813
  .has-info:not(.disabled):not(:disabled):hover.radio label,
795
814
  .has-info:not(.disabled):not(:disabled):hover.checkbox label,
796
815
  .has-info:not(.disabled):not(:disabled):hover .btn-input,
797
816
  .has-info:not(.disabled):not(:disabled):hover .alert {
798
- border-color: #80e142 !important;
817
+ border-color: #008fc9 !important;
799
818
  border-color: var(--color-interactive-accent-hover) !important;
800
819
  }
801
820
  .has-info .form-control-feedback {
821
+ color: #0097c7;
802
822
  color: var(--color-content-accent);
803
823
  }
804
824
  .has-info .radio > label:not(.disabled):not(:disabled),
805
825
  .has-info.checkbox > label:not(.disabled):not(:disabled) {
806
- border-color: #9fe870;
826
+ border-color: #00a2dd;
807
827
  border-color: var(--color-interactive-accent);
808
- color: #0e0f0c;
828
+ color: #37517e;
809
829
  color: var(--color-content-primary);
810
830
  }
811
831
  .has-info .radio > label:not(.disabled):not(:disabled):hover,
812
832
  .has-info.checkbox > label:not(.disabled):not(:disabled):hover,
813
833
  .has-info .radio > label:focus-within,
814
834
  .has-info.checkbox > label:focus-within {
815
- border-color: #80e142 !important;
835
+ border-color: #008fc9 !important;
816
836
  border-color: var(--color-interactive-accent-hover) !important;
817
837
  }
818
838
  .has-info .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
@@ -823,14 +843,14 @@ select[multiple].input-lg {
823
843
  .has-info.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
824
844
  .has-info .radio > label:focus-within .tw-radio-button,
825
845
  .has-info.checkbox > label:focus-within .tw-radio-button {
826
- border-color: #80e142 !important;
846
+ border-color: #008fc9 !important;
827
847
  border-color: var(--color-interactive-accent-hover) !important;
828
848
  }
829
849
  .has-info .radio .tw-checkbox-button,
830
850
  .has-info.checkbox .tw-checkbox-button,
831
851
  .has-info .radio .tw-radio-button,
832
852
  .has-info.checkbox .tw-radio-button {
833
- border-color: #9fe870;
853
+ border-color: #00a2dd;
834
854
  border-color: var(--color-interactive-accent);
835
855
  }
836
856
  .np-theme-personal .has-info {
@@ -850,7 +870,7 @@ select[multiple].input-lg {
850
870
  .np-theme-personal .has-info .radio-inline label,
851
871
  .np-theme-personal .has-info .checkbox-inline label,
852
872
  .np-theme-personal .has-info .input-group-addon {
853
- color: #0e0f0c !important;
873
+ color: #37517e !important;
854
874
  color: var(--color-content-primary) !important;
855
875
  border-color: transparent !important;
856
876
  }
@@ -892,13 +912,13 @@ select[multiple].input-lg {
892
912
  border-color: transparent !important;
893
913
  }
894
914
  .np-theme-personal .has-info .form-control-feedback {
895
- color: #0e0f0c;
915
+ color: #37517e;
896
916
  color: var(--color-content-primary);
897
917
  }
898
918
  .np-theme-personal .has-info .radio > label:not(.disabled):not(:disabled),
899
919
  .np-theme-personal .has-info.checkbox > label:not(.disabled):not(:disabled) {
900
920
  border-color: transparent;
901
- color: #0e0f0c;
921
+ color: #37517e;
902
922
  color: var(--color-content-primary);
903
923
  }
904
924
  .np-theme-personal .has-info .radio > label:not(.disabled):not(:disabled):hover,
@@ -924,6 +944,7 @@ select[multiple].input-lg {
924
944
  border-color: transparent;
925
945
  }
926
946
  .has-warning {
947
+ border-color: #df8700 !important;
927
948
  border-color: var(--color-interactive-warning) !important;
928
949
  }
929
950
  .has-warning .control-label,
@@ -940,7 +961,9 @@ select[multiple].input-lg {
940
961
  .has-warning .radio-inline label,
941
962
  .has-warning .checkbox-inline label,
942
963
  .has-warning .input-group-addon {
964
+ color: #9a6500 !important;
943
965
  color: var(--color-content-warning) !important;
966
+ border-color: #df8700 !important;
944
967
  border-color: var(--color-interactive-warning) !important;
945
968
  }
946
969
  .has-warning .form-control,
@@ -949,6 +972,7 @@ select[multiple].input-lg {
949
972
  .has-warning .btn-input:not(.disabled):not(:disabled):hover,
950
973
  .has-warning .input-group-addon,
951
974
  .has-warning .alert {
975
+ border-color: #df8700 !important;
952
976
  border-color: var(--color-interactive-warning) !important;
953
977
  }
954
978
  .has-warning:active .form-control,
@@ -972,27 +996,32 @@ select[multiple].input-lg {
972
996
  .has-warning:active .alert,
973
997
  .has-warning:focus .alert,
974
998
  .has-warning:focus-within .alert {
999
+ border-color: #c97500 !important;
975
1000
  border-color: var(--color-interactive-warning-hover) !important;
976
1001
  }
977
1002
  .has-warning:not(.disabled):not(:disabled):hover.radio label,
978
1003
  .has-warning:not(.disabled):not(:disabled):hover.checkbox label,
979
1004
  .has-warning:not(.disabled):not(:disabled):hover .btn-input,
980
1005
  .has-warning:not(.disabled):not(:disabled):hover .alert {
1006
+ border-color: #c97500 !important;
981
1007
  border-color: var(--color-interactive-warning-hover) !important;
982
1008
  }
983
1009
  .has-warning .form-control-feedback {
1010
+ color: #9a6500;
984
1011
  color: var(--color-content-warning);
985
1012
  }
986
1013
  .has-warning .radio > label:not(.disabled):not(:disabled),
987
1014
  .has-warning.checkbox > label:not(.disabled):not(:disabled) {
1015
+ border-color: #df8700;
988
1016
  border-color: var(--color-interactive-warning);
989
- color: #0e0f0c;
1017
+ color: #37517e;
990
1018
  color: var(--color-content-primary);
991
1019
  }
992
1020
  .has-warning .radio > label:not(.disabled):not(:disabled):hover,
993
1021
  .has-warning.checkbox > label:not(.disabled):not(:disabled):hover,
994
1022
  .has-warning .radio > label:focus-within,
995
1023
  .has-warning.checkbox > label:focus-within {
1024
+ border-color: #c97500 !important;
996
1025
  border-color: var(--color-interactive-warning-hover) !important;
997
1026
  }
998
1027
  .has-warning .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
@@ -1003,16 +1032,17 @@ select[multiple].input-lg {
1003
1032
  .has-warning.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
1004
1033
  .has-warning .radio > label:focus-within .tw-radio-button,
1005
1034
  .has-warning.checkbox > label:focus-within .tw-radio-button {
1035
+ border-color: #c97500 !important;
1006
1036
  border-color: var(--color-interactive-warning-hover) !important;
1007
1037
  }
1008
1038
  .has-warning .radio .tw-checkbox-button,
1009
1039
  .has-warning.checkbox .tw-checkbox-button,
1010
1040
  .has-warning .radio .tw-radio-button,
1011
1041
  .has-warning.checkbox .tw-radio-button {
1042
+ border-color: #df8700;
1012
1043
  border-color: var(--color-interactive-warning);
1013
1044
  }
1014
1045
  .np-theme-personal .has-warning {
1015
- border-color: #edc843 !important;
1016
1046
  border-color: var(--color-sentiment-warning) !important;
1017
1047
  }
1018
1048
  .np-theme-personal .has-warning .control-label,
@@ -1029,9 +1059,7 @@ select[multiple].input-lg {
1029
1059
  .np-theme-personal .has-warning .radio-inline label,
1030
1060
  .np-theme-personal .has-warning .checkbox-inline label,
1031
1061
  .np-theme-personal .has-warning .input-group-addon {
1032
- color: #edc843 !important;
1033
1062
  color: var(--color-sentiment-warning) !important;
1034
- border-color: #edc843 !important;
1035
1063
  border-color: var(--color-sentiment-warning) !important;
1036
1064
  }
1037
1065
  .np-theme-personal .has-warning .form-control,
@@ -1040,7 +1068,6 @@ select[multiple].input-lg {
1040
1068
  .np-theme-personal .has-warning .btn-input:not(.disabled):not(:disabled):hover,
1041
1069
  .np-theme-personal .has-warning .input-group-addon,
1042
1070
  .np-theme-personal .has-warning .alert {
1043
- border-color: #edc843 !important;
1044
1071
  border-color: var(--color-sentiment-warning) !important;
1045
1072
  }
1046
1073
  .np-theme-personal .has-warning:active .form-control,
@@ -1064,32 +1091,27 @@ select[multiple].input-lg {
1064
1091
  .np-theme-personal .has-warning:active .alert,
1065
1092
  .np-theme-personal .has-warning:focus .alert,
1066
1093
  .np-theme-personal .has-warning:focus-within .alert {
1067
- border-color: #edc843 !important;
1068
1094
  border-color: var(--color-sentiment-warning) !important;
1069
1095
  }
1070
1096
  .np-theme-personal .has-warning:not(.disabled):not(:disabled):hover.radio label,
1071
1097
  .np-theme-personal .has-warning:not(.disabled):not(:disabled):hover.checkbox label,
1072
1098
  .np-theme-personal .has-warning:not(.disabled):not(:disabled):hover .btn-input,
1073
1099
  .np-theme-personal .has-warning:not(.disabled):not(:disabled):hover .alert {
1074
- border-color: #edc843 !important;
1075
1100
  border-color: var(--color-sentiment-warning) !important;
1076
1101
  }
1077
1102
  .np-theme-personal .has-warning .form-control-feedback {
1078
- color: #edc843;
1079
1103
  color: var(--color-sentiment-warning);
1080
1104
  }
1081
1105
  .np-theme-personal .has-warning .radio > label:not(.disabled):not(:disabled),
1082
1106
  .np-theme-personal .has-warning.checkbox > label:not(.disabled):not(:disabled) {
1083
- border-color: #edc843;
1084
1107
  border-color: var(--color-sentiment-warning);
1085
- color: #0e0f0c;
1108
+ color: #37517e;
1086
1109
  color: var(--color-content-primary);
1087
1110
  }
1088
1111
  .np-theme-personal .has-warning .radio > label:not(.disabled):not(:disabled):hover,
1089
1112
  .np-theme-personal .has-warning.checkbox > label:not(.disabled):not(:disabled):hover,
1090
1113
  .np-theme-personal .has-warning .radio > label:focus-within,
1091
1114
  .np-theme-personal .has-warning.checkbox > label:focus-within {
1092
- border-color: #edc843 !important;
1093
1115
  border-color: var(--color-sentiment-warning) !important;
1094
1116
  }
1095
1117
  .np-theme-personal .has-warning .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
@@ -1100,17 +1122,16 @@ select[multiple].input-lg {
1100
1122
  .np-theme-personal .has-warning.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
1101
1123
  .np-theme-personal .has-warning .radio > label:focus-within .tw-radio-button,
1102
1124
  .np-theme-personal .has-warning.checkbox > label:focus-within .tw-radio-button {
1103
- border-color: #edc843 !important;
1104
1125
  border-color: var(--color-sentiment-warning) !important;
1105
1126
  }
1106
1127
  .np-theme-personal .has-warning .radio .tw-checkbox-button,
1107
1128
  .np-theme-personal .has-warning.checkbox .tw-checkbox-button,
1108
1129
  .np-theme-personal .has-warning .radio .tw-radio-button,
1109
1130
  .np-theme-personal .has-warning.checkbox .tw-radio-button {
1110
- border-color: #edc843;
1111
1131
  border-color: var(--color-sentiment-warning);
1112
1132
  }
1113
1133
  .has-error {
1134
+ border-color: #e74848 !important;
1114
1135
  border-color: var(--color-interactive-negative) !important;
1115
1136
  }
1116
1137
  .has-error .control-label,
@@ -1127,7 +1148,9 @@ select[multiple].input-lg {
1127
1148
  .has-error .radio-inline label,
1128
1149
  .has-error .checkbox-inline label,
1129
1150
  .has-error .input-group-addon {
1151
+ color: #cf2929 !important;
1130
1152
  color: var(--color-content-negative) !important;
1153
+ border-color: #e74848 !important;
1131
1154
  border-color: var(--color-interactive-negative) !important;
1132
1155
  }
1133
1156
  .has-error .form-control,
@@ -1136,6 +1159,7 @@ select[multiple].input-lg {
1136
1159
  .has-error .btn-input:not(.disabled):not(:disabled):hover,
1137
1160
  .has-error .input-group-addon,
1138
1161
  .has-error .alert {
1162
+ border-color: #e74848 !important;
1139
1163
  border-color: var(--color-interactive-negative) !important;
1140
1164
  }
1141
1165
  .has-error:active .form-control,
@@ -1159,27 +1183,32 @@ select[multiple].input-lg {
1159
1183
  .has-error:active .alert,
1160
1184
  .has-error:focus .alert,
1161
1185
  .has-error:focus-within .alert {
1186
+ border-color: #d03238 !important;
1162
1187
  border-color: var(--color-interactive-negative-hover) !important;
1163
1188
  }
1164
1189
  .has-error:not(.disabled):not(:disabled):hover.radio label,
1165
1190
  .has-error:not(.disabled):not(:disabled):hover.checkbox label,
1166
1191
  .has-error:not(.disabled):not(:disabled):hover .btn-input,
1167
1192
  .has-error:not(.disabled):not(:disabled):hover .alert {
1193
+ border-color: #d03238 !important;
1168
1194
  border-color: var(--color-interactive-negative-hover) !important;
1169
1195
  }
1170
1196
  .has-error .form-control-feedback {
1197
+ color: #cf2929;
1171
1198
  color: var(--color-content-negative);
1172
1199
  }
1173
1200
  .has-error .radio > label:not(.disabled):not(:disabled),
1174
1201
  .has-error.checkbox > label:not(.disabled):not(:disabled) {
1202
+ border-color: #e74848;
1175
1203
  border-color: var(--color-interactive-negative);
1176
- color: #0e0f0c;
1204
+ color: #37517e;
1177
1205
  color: var(--color-content-primary);
1178
1206
  }
1179
1207
  .has-error .radio > label:not(.disabled):not(:disabled):hover,
1180
1208
  .has-error.checkbox > label:not(.disabled):not(:disabled):hover,
1181
1209
  .has-error .radio > label:focus-within,
1182
1210
  .has-error.checkbox > label:focus-within {
1211
+ border-color: #d03238 !important;
1183
1212
  border-color: var(--color-interactive-negative-hover) !important;
1184
1213
  }
1185
1214
  .has-error .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
@@ -1190,16 +1219,17 @@ select[multiple].input-lg {
1190
1219
  .has-error.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
1191
1220
  .has-error .radio > label:focus-within .tw-radio-button,
1192
1221
  .has-error.checkbox > label:focus-within .tw-radio-button {
1222
+ border-color: #d03238 !important;
1193
1223
  border-color: var(--color-interactive-negative-hover) !important;
1194
1224
  }
1195
1225
  .has-error .radio .tw-checkbox-button,
1196
1226
  .has-error.checkbox .tw-checkbox-button,
1197
1227
  .has-error .radio .tw-radio-button,
1198
1228
  .has-error.checkbox .tw-radio-button {
1229
+ border-color: #e74848;
1199
1230
  border-color: var(--color-interactive-negative);
1200
1231
  }
1201
1232
  .np-theme-personal .has-error {
1202
- border-color: #a8200d !important;
1203
1233
  border-color: var(--color-sentiment-negative) !important;
1204
1234
  }
1205
1235
  .np-theme-personal .has-error .control-label,
@@ -1216,9 +1246,7 @@ select[multiple].input-lg {
1216
1246
  .np-theme-personal .has-error .radio-inline label,
1217
1247
  .np-theme-personal .has-error .checkbox-inline label,
1218
1248
  .np-theme-personal .has-error .input-group-addon {
1219
- color: #a8200d !important;
1220
1249
  color: var(--color-sentiment-negative) !important;
1221
- border-color: #a8200d !important;
1222
1250
  border-color: var(--color-sentiment-negative) !important;
1223
1251
  }
1224
1252
  .np-theme-personal .has-error .form-control,
@@ -1227,7 +1255,6 @@ select[multiple].input-lg {
1227
1255
  .np-theme-personal .has-error .btn-input:not(.disabled):not(:disabled):hover,
1228
1256
  .np-theme-personal .has-error .input-group-addon,
1229
1257
  .np-theme-personal .has-error .alert {
1230
- border-color: #a8200d !important;
1231
1258
  border-color: var(--color-sentiment-negative) !important;
1232
1259
  }
1233
1260
  .np-theme-personal .has-error:active .form-control,
@@ -1251,32 +1278,27 @@ select[multiple].input-lg {
1251
1278
  .np-theme-personal .has-error:active .alert,
1252
1279
  .np-theme-personal .has-error:focus .alert,
1253
1280
  .np-theme-personal .has-error:focus-within .alert {
1254
- border-color: #8e1b0b !important;
1255
1281
  border-color: var(--color-sentiment-negative-hover) !important;
1256
1282
  }
1257
1283
  .np-theme-personal .has-error:not(.disabled):not(:disabled):hover.radio label,
1258
1284
  .np-theme-personal .has-error:not(.disabled):not(:disabled):hover.checkbox label,
1259
1285
  .np-theme-personal .has-error:not(.disabled):not(:disabled):hover .btn-input,
1260
1286
  .np-theme-personal .has-error:not(.disabled):not(:disabled):hover .alert {
1261
- border-color: #8e1b0b !important;
1262
1287
  border-color: var(--color-sentiment-negative-hover) !important;
1263
1288
  }
1264
1289
  .np-theme-personal .has-error .form-control-feedback {
1265
- color: #a8200d;
1266
1290
  color: var(--color-sentiment-negative);
1267
1291
  }
1268
1292
  .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled),
1269
1293
  .np-theme-personal .has-error.checkbox > label:not(.disabled):not(:disabled) {
1270
- border-color: #a8200d;
1271
1294
  border-color: var(--color-sentiment-negative);
1272
- color: #0e0f0c;
1295
+ color: #37517e;
1273
1296
  color: var(--color-content-primary);
1274
1297
  }
1275
1298
  .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled):hover,
1276
1299
  .np-theme-personal .has-error.checkbox > label:not(.disabled):not(:disabled):hover,
1277
1300
  .np-theme-personal .has-error .radio > label:focus-within,
1278
1301
  .np-theme-personal .has-error.checkbox > label:focus-within {
1279
- border-color: #8e1b0b !important;
1280
1302
  border-color: var(--color-sentiment-negative-hover) !important;
1281
1303
  }
1282
1304
  .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
@@ -1287,17 +1309,16 @@ select[multiple].input-lg {
1287
1309
  .np-theme-personal .has-error.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
1288
1310
  .np-theme-personal .has-error .radio > label:focus-within .tw-radio-button,
1289
1311
  .np-theme-personal .has-error.checkbox > label:focus-within .tw-radio-button {
1290
- border-color: #8e1b0b !important;
1291
1312
  border-color: var(--color-sentiment-negative-hover) !important;
1292
1313
  }
1293
1314
  .np-theme-personal .has-error .radio .tw-checkbox-button,
1294
1315
  .np-theme-personal .has-error.checkbox .tw-checkbox-button,
1295
1316
  .np-theme-personal .has-error .radio .tw-radio-button,
1296
1317
  .np-theme-personal .has-error.checkbox .tw-radio-button {
1297
- border-color: #a8200d;
1298
1318
  border-color: var(--color-sentiment-negative);
1299
1319
  }
1300
1320
  .has-feedback label ~ .form-control-feedback {
1321
+ top: 1.2;
1301
1322
  top: var(--line-height-control);
1302
1323
  }
1303
1324
  .has-feedback label.sr-only ~ .form-control-feedback {
@@ -1375,6 +1396,7 @@ select[multiple].input-lg {
1375
1396
  }
1376
1397
  .form-horizontal .radio,
1377
1398
  .form-horizontal .checkbox {
1399
+ min-height: calc(1.2 + (8px + 1));
1378
1400
  min-height: calc(var(--line-height-control) + (8px + 1));
1379
1401
  }
1380
1402
  .form-horizontal .form-group {
@@ -1410,18 +1432,20 @@ select[multiple].input-lg {
1410
1432
  @media (min-width: 576px) {
1411
1433
  .form-horizontal .form-group-lg .control-label {
1412
1434
  padding-top: 17px;
1435
+ font-size: 1.25rem;
1413
1436
  font-size: var(--font-size-20);
1414
1437
  }
1415
1438
  }
1416
1439
  @media (min-width: 576px) {
1417
1440
  .form-horizontal .form-group-sm .control-label {
1418
1441
  padding-top: 8px;
1442
+ font-size: 0.875rem;
1419
1443
  font-size: var(--font-size-14);
1420
1444
  }
1421
1445
  }
1422
1446
  .radio,
1423
1447
  .checkbox {
1424
- border-color: #868685;
1448
+ border-color: #c9cbce;
1425
1449
  border-color: var(--color-interactive-secondary);
1426
1450
  }
1427
1451
  .radio > label,
@@ -1453,7 +1477,7 @@ select[multiple].input-lg {
1453
1477
  left: initial;
1454
1478
  }
1455
1479
  .tw-checkbox-button {
1456
- border: 1px solid #868685;
1480
+ border: 1px solid #c9cbce;
1457
1481
  border: 1px solid var(--color-interactive-secondary);
1458
1482
  background: #ffffff;
1459
1483
  background: var(--color-background-screen);
@@ -1468,7 +1492,7 @@ select[multiple].input-lg {
1468
1492
  }
1469
1493
  .np-theme-personal .tw-checkbox-button {
1470
1494
  border: none;
1471
- box-shadow: inset 0 0 0 1px #868685;
1495
+ box-shadow: inset 0 0 0 1px #c9cbce;
1472
1496
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
1473
1497
  }
1474
1498
  .tw-checkbox-button .tw-checkbox-check {
@@ -1482,13 +1506,13 @@ select[multiple].input-lg {
1482
1506
  .tw-checkbox-button:not(.disabled):not(:disabled):hover,
1483
1507
  input[type="checkbox"]:hover + .tw-checkbox-button,
1484
1508
  .checkbox:hover .tw-checkbox-button {
1485
- border-color: #6c6c6b;
1509
+ border-color: #b5b7ba;
1486
1510
  border-color: var(--color-interactive-secondary-hover);
1487
1511
  }
1488
1512
  .np-theme-personal .tw-checkbox-button:not(.disabled):not(:disabled):hover,
1489
1513
  .np-theme-personal input[type="checkbox"]:hover + .tw-checkbox-button,
1490
1514
  .np-theme-personal .checkbox:hover .tw-checkbox-button {
1491
- box-shadow: inset 0 0 0 1px #6c6c6b;
1515
+ box-shadow: inset 0 0 0 1px #b5b7ba;
1492
1516
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
1493
1517
  }
1494
1518
  .tw-checkbox-button:not(.disabled):not(:disabled):focus,
@@ -1499,7 +1523,7 @@ input[type="checkbox"]:focus + .tw-checkbox-button,
1499
1523
  .tw-checkbox-button:not(.disabled):not(:disabled):active,
1500
1524
  .tw-checkbox-button:not(.disabled):not(:disabled).active,
1501
1525
  input[type="checkbox"]:active + .tw-checkbox-button {
1502
- border-color: #868685;
1526
+ border-color: #c9cbce;
1503
1527
  border-color: var(--color-interactive-secondary);
1504
1528
  outline: none;
1505
1529
  }
@@ -1513,9 +1537,9 @@ input[type="checkbox"]:focus-visible + .tw-checkbox-button {
1513
1537
  .tw-checkbox-button:checked,
1514
1538
  .tw-checkbox-button.checked,
1515
1539
  input[type="checkbox"]:checked + .tw-checkbox-button {
1516
- border-color: #9fe870 !important;
1540
+ border-color: #00a2dd !important;
1517
1541
  border-color: var(--color-interactive-accent) !important;
1518
- background-color: #9fe870;
1542
+ background-color: #00a2dd;
1519
1543
  background-color: var(--color-interactive-accent);
1520
1544
  }
1521
1545
  .tw-checkbox-button:checked .tw-checkbox-check,
@@ -1526,74 +1550,74 @@ input[type="checkbox"]:checked + .tw-checkbox-button .tw-checkbox-check {
1526
1550
  .np-theme-personal .tw-checkbox-button:checked,
1527
1551
  .np-theme-personal .tw-checkbox-button.checked,
1528
1552
  .np-theme-personal input[type="checkbox"]:checked + .tw-checkbox-button {
1529
- background-color: #163300;
1530
1553
  background-color: var(--color-interactive-primary);
1531
- box-shadow: inset 0 0 0 1px #163300;
1532
1554
  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
1533
1555
  }
1534
1556
  .tw-checkbox-button:checked:hover,
1535
1557
  .tw-checkbox-button.checked:hover,
1536
1558
  input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button {
1537
- border-color: #80e142 !important;
1559
+ border-color: #008fc9 !important;
1538
1560
  border-color: var(--color-interactive-accent-hover) !important;
1539
- background-color: #80e142;
1561
+ background-color: #008fc9;
1540
1562
  background-color: var(--color-interactive-accent-hover);
1541
1563
  }
1542
1564
  .np-theme-personal .tw-checkbox-button:checked:hover,
1543
1565
  .np-theme-personal .tw-checkbox-button.checked:hover,
1544
1566
  .np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button {
1545
- border-color: #0d1f00 !important;
1546
1567
  border-color: var(--color-interactive-primary-hover) !important;
1547
- background-color: #0d1f00;
1548
1568
  background-color: var(--color-interactive-primary-hover);
1549
- box-shadow: inset 0 0 0 1px #0d1f00;
1550
1569
  box-shadow: inset 0 0 0 1px var(--color-interactive-primary-hover);
1551
1570
  }
1552
1571
  .tw-checkbox-button:checked:active,
1553
1572
  .tw-checkbox-button.checked:active,
1554
1573
  input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button {
1555
- border-color: #65cf21 !important;
1574
+ border-color: #0081ba !important;
1556
1575
  border-color: var(--color-interactive-accent-active) !important;
1557
- background-color: #65cf21;
1576
+ background-color: #0081ba;
1558
1577
  background-color: var(--color-interactive-accent-active);
1559
1578
  }
1560
1579
  .np-theme-personal .tw-checkbox-button:checked:active,
1561
1580
  .np-theme-personal .tw-checkbox-button.checked:active,
1562
1581
  .np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button {
1563
- border-color: #0e0f0c !important;
1564
1582
  border-color: var(--color-interactive-primary-active) !important;
1565
- background-color: #0e0f0c;
1566
1583
  background-color: var(--color-interactive-primary-active);
1567
- box-shadow: inset 0 0 0 1px #0e0f0c;
1568
1584
  box-shadow: inset 0 0 0 1px var(--color-interactive-primary-active);
1569
1585
  }
1570
1586
  .checkbox.has-error .tw-checkbox-button,
1571
1587
  .tw-checkbox-button.has-error {
1588
+ border-color: #e74848 !important;
1572
1589
  border-color: var(--color-interactive-negative) !important;
1573
1590
  }
1574
1591
  .checkbox.has-error .tw-checkbox-button:checked,
1575
1592
  .tw-checkbox-button.has-error:checked,
1576
1593
  .checkbox.has-error .tw-checkbox-button.checked,
1577
1594
  .tw-checkbox-button.has-error.checked {
1595
+ background-color: #e74848;
1578
1596
  background-color: var(--color-interactive-negative);
1579
1597
  }
1580
1598
  .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked + .tw-checkbox-button {
1599
+ border-color: #e74848 !important;
1581
1600
  border-color: var(--color-interactive-negative) !important;
1601
+ background-color: #e74848;
1582
1602
  background-color: var(--color-interactive-negative);
1583
1603
  }
1584
1604
  .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button {
1605
+ border-color: #d03238 !important;
1585
1606
  border-color: var(--color-interactive-negative-hover) !important;
1607
+ background-color: #d03238;
1586
1608
  background-color: var(--color-interactive-negative-hover);
1587
1609
  }
1588
1610
  .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button {
1611
+ border-color: #bf1e2c !important;
1589
1612
  border-color: var(--color-interactive-negative-active) !important;
1613
+ background-color: #bf1e2c;
1590
1614
  background-color: var(--color-interactive-negative-active);
1591
1615
  }
1592
1616
  .tw-radio-button {
1593
1617
  width: 24px;
1594
1618
  height: 24px;
1595
1619
  border-radius: 50%;
1596
- border: 1px solid #868685;
1620
+ border: 1px solid #c9cbce;
1597
1621
  border: 1px solid var(--color-interactive-secondary);
1598
1622
  background: #ffffff;
1599
1623
  background: var(--color-background-screen);
@@ -1605,7 +1629,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkb
1605
1629
  }
1606
1630
  .np-theme-personal .tw-radio-button {
1607
1631
  border: none;
1608
- box-shadow: inset 0 0 0 1px #868685;
1632
+ box-shadow: inset 0 0 0 1px #c9cbce;
1609
1633
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
1610
1634
  position: relative;
1611
1635
  top: 0;
@@ -1622,69 +1646,67 @@ input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkb
1622
1646
  }
1623
1647
  .radio:not(.disabled):not(:disabled):hover .tw-radio-button,
1624
1648
  .tw-radio-button:not(.disabled):not(:disabled):hover {
1625
- border-color: #6c6c6b;
1649
+ border-color: #b5b7ba;
1626
1650
  border-color: var(--color-interactive-secondary-hover);
1627
1651
  }
1628
1652
  .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button,
1629
1653
  .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover {
1630
1654
  border-color: transparent;
1631
- box-shadow: inset 0 0 0 1px #6c6c6b;
1655
+ box-shadow: inset 0 0 0 1px #b5b7ba;
1632
1656
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
1633
1657
  }
1634
1658
  .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button:checked,
1635
1659
  .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover:checked,
1636
1660
  .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button.checked,
1637
1661
  .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover.checked {
1638
- box-shadow: inset 0 0 0 1px #163300;
1639
1662
  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
1640
1663
  }
1641
1664
  .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button:checked .tw-radio-check,
1642
1665
  .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover:checked .tw-radio-check,
1643
1666
  .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button.checked .tw-radio-check,
1644
1667
  .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover.checked .tw-radio-check {
1645
- background-color: #0d1f00;
1646
1668
  background-color: var(--color-interactive-primary-hover);
1647
1669
  }
1648
1670
  .tw-radio-button:not(.disabled):not(:disabled):focus,
1649
1671
  .tw-radio-button:not(.disabled):not(:disabled).focus,
1650
1672
  .tw-radio-button:not(.disabled):not(:disabled):active,
1651
1673
  .tw-radio-button:not(.disabled):not(:disabled).active {
1652
- border-color: #525251;
1674
+ border-color: #a7a9ab;
1653
1675
  border-color: var(--color-interactive-secondary-active);
1654
1676
  outline: none;
1655
1677
  }
1656
1678
  .tw-radio-button:checked,
1657
1679
  .tw-radio-button.checked {
1658
- border-color: #9fe870 !important;
1680
+ border-color: #00a2dd !important;
1659
1681
  border-color: var(--color-interactive-accent) !important;
1660
1682
  }
1661
1683
  .tw-radio-button:checked .tw-radio-check,
1662
1684
  .tw-radio-button.checked .tw-radio-check {
1663
1685
  opacity: 1;
1664
- background-color: #9fe870;
1686
+ background-color: #00a2dd;
1665
1687
  background-color: var(--color-interactive-accent);
1666
1688
  }
1667
1689
  .np-theme-personal .tw-radio-button:checked,
1668
1690
  .np-theme-personal .tw-radio-button.checked {
1669
1691
  border-color: transparent !important;
1670
- box-shadow: inset 0 0 0 1px #163300;
1671
1692
  box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
1672
1693
  }
1673
1694
  .np-theme-personal .tw-radio-button:checked .tw-radio-check,
1674
1695
  .np-theme-personal .tw-radio-button.checked .tw-radio-check {
1675
- background-color: #163300;
1676
1696
  background-color: var(--color-interactive-primary);
1677
1697
  max-height: 12px;
1678
1698
  max-width: 12px;
1679
1699
  }
1680
1700
  .radio.has-error .tw-radio-button,
1681
1701
  .tw-radio-button.has-error {
1702
+ border-color: #e74848 !important;
1682
1703
  border-color: var(--color-interactive-negative) !important;
1683
1704
  }
1684
1705
  .radio.has-error .tw-radio-button:checked .tw-radio-check,
1685
1706
  .tw-radio-button.has-error:checked .tw-radio-check,
1686
1707
  .radio.has-error .tw-radio-button.checked .tw-radio-check,
1687
1708
  .tw-radio-button.has-error.checked .tw-radio-check {
1709
+ background-color: #e74848;
1688
1710
  background-color: var(--color-interactive-negative);
1689
1711
  }
1690
1712
  .radio .tw-radio-button {
@@ -1741,10 +1763,12 @@ input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkb
1741
1763
  .np-checkbox.checkbox > label {
1742
1764
  display: flex;
1743
1765
  align-items: center;
1766
+ padding: 8px 16px;
1744
1767
  padding: var(--size-8) var(--size-16) ;
1745
1768
  }
1746
1769
  [dir="rtl"] .np-radio.radio > label,
1747
1770
  [dir="rtl"] .np-checkbox.checkbox > label {
1771
+ padding: 8px 16px;
1748
1772
  padding: var(--size-8) var(--size-16) ;
1749
1773
  }
1750
1774
  .np-radio.radio > label .np-checkbox__text,
@@ -1758,8 +1782,11 @@ input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkb
1758
1782
  :not(.np-theme-personal) .np-checkbox.checkbox > label .np-checkbox__text,
1759
1783
  :not(.np-theme-personal) .np-radio.radio > label .np-radio__text,
1760
1784
  :not(.np-theme-personal) .np-checkbox.checkbox > label .np-radio__text {
1785
+ font-weight: 400;
1761
1786
  font-weight: var(--font-weight-regular);
1787
+ font-size: 1rem;
1762
1788
  font-size: var(--font-size-16);
1789
+ line-height: 1.25rem;
1763
1790
  line-height: var(--line-height-20);
1764
1791
  padding-top: 3px;
1765
1792
  }
@@ -1777,7 +1804,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
1777
1804
  border-left: 0 solid transparent;
1778
1805
  }
1779
1806
  .input-group-addon {
1780
- color: #454745;
1807
+ color: #5d7079;
1781
1808
  color: var(--color-content-secondary);
1782
1809
  transition: border-color ease-in-out 0.15s;
1783
1810
  }
@@ -1792,13 +1819,14 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
1792
1819
  top: -3px;
1793
1820
  }
1794
1821
  .label .label-default {
1795
- color: #454745;
1822
+ color: #5d7079;
1796
1823
  color: var(--color-content-secondary);
1797
- background-color: rgba(22,51,0,0.07843);
1824
+ background-color: rgba(134,167,189,0.10196);
1798
1825
  background-color: var(--color-background-neutral);
1799
1826
  }
1800
1827
  .form-group {
1801
1828
  position: relative;
1829
+ font-size: 0.875rem;
1802
1830
  font-size: var(--font-size-14);
1803
1831
  }
1804
1832
  .form-group .row {
@@ -1879,11 +1907,11 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
1879
1907
  padding-top: 12px;
1880
1908
  padding-bottom: 10px;
1881
1909
  padding-right: 16px;
1882
- color: #0e0f0c;
1910
+ color: #37517e;
1883
1911
  color: var(--color-content-primary);
1884
1912
  background-color: #ffffff;
1885
1913
  background-color: var(--color-background-screen);
1886
- border: 1px solid #868685;
1914
+ border: 1px solid #c9cbce;
1887
1915
  border: 1px solid var(--color-interactive-secondary);
1888
1916
  border-radius: 3px;
1889
1917
  transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
@@ -1896,11 +1924,12 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
1896
1924
  }
1897
1925
  .np-theme-personal .checkbox > label,
1898
1926
  .np-theme-personal .radio > label {
1927
+ border-radius: 10px;
1899
1928
  border-radius: var(--radius-small);
1900
1929
  }
1901
1930
  .checkbox > label:not(.disabled):not(:disabled):hover,
1902
1931
  .radio > label:not(.disabled):not(:disabled):hover {
1903
- border-color: #6c6c6b;
1932
+ border-color: #b5b7ba;
1904
1933
  border-color: var(--color-interactive-secondary-hover);
1905
1934
  }
1906
1935
  .checkbox > label:not(.disabled):not(:disabled).focus,
@@ -1913,7 +1942,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
1913
1942
  .radio > label:not(.disabled):not(:disabled).has-focus:hover,
1914
1943
  .checkbox > label:not(.disabled):not(:disabled):focus-within,
1915
1944
  .radio > label:not(.disabled):not(:disabled):focus-within {
1916
- border-color: #65cf21;
1945
+ border-color: #0081ba;
1917
1946
  border-color: var(--color-interactive-accent-active);
1918
1947
  }
1919
1948
  .np-theme-personal .checkbox > label:not(.disabled):not(:disabled).focus,
@@ -1926,13 +1955,14 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
1926
1955
  .np-theme-personal .radio > label:not(.disabled):not(:disabled).has-focus:hover,
1927
1956
  .np-theme-personal .checkbox > label:not(.disabled):not(:disabled):focus-within,
1928
1957
  .np-theme-personal .radio > label:not(.disabled):not(:disabled):focus-within {
1929
- border-color: #868685;
1958
+ border-color: #c9cbce;
1930
1959
  border-color: var(--color-interactive-secondary);
1931
1960
  }
1932
1961
  .checkbox.checkbox-lg > label,
1933
1962
  .radio.checkbox-lg > label,
1934
1963
  .checkbox.radio-lg > label,
1935
1964
  .radio.radio-lg > label {
1965
+ min-height: 72px;
1936
1966
  min-height: var(--size-72);
1937
1967
  }
1938
1968
  .checkbox.checkbox-lg > label small,
@@ -1952,12 +1982,14 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
1952
1982
  .checkbox.radio-lg > label .np-text-body-default,
1953
1983
  .radio.radio-lg > label .np-text-body-default {
1954
1984
  display: block;
1955
- color: #454745;
1985
+ color: #5d7079;
1956
1986
  color: var(--color-content-secondary);
1957
1987
  }
1958
1988
  .error-messages {
1959
1989
  display: none;
1990
+ color: #cf2929;
1960
1991
  color: var(--color-content-negative);
1992
+ background-color: rgba(255,135,135,0.10196);
1961
1993
  background-color: var(--color-background-negative);
1962
1994
  position: relative;
1963
1995
  }
@@ -2050,13 +2082,15 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2050
2082
  .form-control-placeholder {
2051
2083
  text-overflow: ellipsis;
2052
2084
  overflow: hidden;
2085
+ font-weight: 400;
2053
2086
  font-weight: var(--font-weight-regular);
2087
+ font-size: 1rem;
2054
2088
  font-size: var(--font-size-16);
2055
2089
  line-height: 150%;
2056
2090
  letter-spacing: -0.011em;
2057
2091
  display: block;
2058
2092
  width: 100%;
2059
- color: #6a6c6a;
2093
+ color: #768e9c;
2060
2094
  color: var(--color-content-tertiary);
2061
2095
  }
2062
2096
  .np-theme-personal .btn-input,
@@ -2068,6 +2102,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2068
2102
  background-color: transparent;
2069
2103
  background-color: initial;
2070
2104
  border: none !important;
2105
+ border-radius: 10px;
2071
2106
  border-radius: var(--radius-small);
2072
2107
  }
2073
2108
  .np-theme-personal .btn-input,
@@ -2075,7 +2110,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2075
2110
  .np-theme-personal .form-control,
2076
2111
  .np-theme-personal .radio > label,
2077
2112
  .np-theme-personal .checkbox > label {
2078
- box-shadow: inset 0 0 0 1px #868685;
2113
+ box-shadow: inset 0 0 0 1px #c9cbce;
2079
2114
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
2080
2115
  transition: box-shadow 0.3s ease-in-out;
2081
2116
  }
@@ -2089,7 +2124,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2089
2124
  .np-theme-personal .form-control:not(.disabled):not(:disabled):hover,
2090
2125
  .np-theme-personal .radio > label:not(.disabled):not(:disabled):hover,
2091
2126
  .np-theme-personal .checkbox > label:not(.disabled):not(:disabled):hover {
2092
- box-shadow: inset 0 0 0 2px #6c6c6b;
2127
+ box-shadow: inset 0 0 0 2px #b5b7ba;
2093
2128
  box-shadow: inset 0 0 0 2px var(--color-interactive-secondary-hover);
2094
2129
  }
2095
2130
  .np-theme-personal .btn-input:not(.disabled):not(:disabled):hover:has(:checked, .checked),
@@ -2097,7 +2132,6 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2097
2132
  .np-theme-personal .form-control:not(.disabled):not(:disabled):hover:has(:checked, .checked),
2098
2133
  .np-theme-personal .radio > label:not(.disabled):not(:disabled):hover:has(:checked, .checked),
2099
2134
  .np-theme-personal .checkbox > label:not(.disabled):not(:disabled):hover:has(:checked, .checked) {
2100
- box-shadow: inset 0 0 0 2px #0d1f00;
2101
2135
  box-shadow: inset 0 0 0 2px var(--color-interactive-primary-hover);
2102
2136
  }
2103
2137
  .np-theme-personal .btn-input:not(.disabled):not(:disabled):focus-visible,
@@ -2110,7 +2144,6 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2110
2144
  .np-theme-personal .radio > label:not(.disabled):not(:disabled):has(:focus-visible),
2111
2145
  .np-theme-personal .checkbox > label:not(.disabled):not(:disabled):focus-visible,
2112
2146
  .np-theme-personal .checkbox > label:not(.disabled):not(:disabled):has(:focus-visible) {
2113
- box-shadow: inset 0 0 0 3px #163300;
2114
2147
  box-shadow: inset 0 0 0 3px var(--color-interactive-primary);
2115
2148
  }
2116
2149
  .np-theme-personal .has-error .btn-input,
@@ -2118,14 +2151,12 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2118
2151
  .np-theme-personal .has-error .form-control,
2119
2152
  .np-theme-personal .has-error .radio > label,
2120
2153
  .np-theme-personal .has-error .checkbox > label {
2121
- box-shadow: inset 0 0 0 2px #a8200d;
2122
2154
  box-shadow: inset 0 0 0 2px var(--color-sentiment-negative);
2123
2155
  }
2124
2156
  .np-theme-personal .has-error .input-group:not(.disabled):not(:disabled):hover,
2125
2157
  .np-theme-personal .has-error .form-control:not(.disabled):not(:disabled):hover,
2126
2158
  .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled):hover,
2127
2159
  .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):hover {
2128
- box-shadow: inset 0 0 0 2px #8e1b0b;
2129
2160
  box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-hover);
2130
2161
  }
2131
2162
  .np-theme-personal .has-error .input-group:not(.disabled):not(:disabled):active,
@@ -2140,19 +2171,15 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2140
2171
  .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):active,
2141
2172
  .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):focus-visible,
2142
2173
  .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):has(:focus-visible) {
2143
- box-shadow: inset 0 0 0 3px #a8200d;
2144
2174
  box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
2145
2175
  }
2146
2176
  .np-theme-personal .has-error .tw-radio-button {
2147
- border-color: #a8200d !important;
2148
2177
  border-color: var(--color-sentiment-negative) !important;
2149
2178
  }
2150
2179
  .np-theme-personal .has-error .tw-radio-button.checked {
2151
- box-shadow: inset 0 0 0 1px #a8200d;
2152
2180
  box-shadow: inset 0 0 0 1px var(--color-sentiment-negative);
2153
2181
  }
2154
2182
  .np-theme-personal .has-error .tw-radio-button.checked .tw-radio-check {
2155
- background: #a8200d !important;
2156
2183
  background: var(--color-sentiment-negative) !important;
2157
2184
  }
2158
2185
  .np-theme-personal .has-error .checkbox:hover .tw-checkbox-button,
@@ -2161,7 +2188,6 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2161
2188
  .np-theme-personal .has-error input[type=checkbox]:hover + .tw-checkbox-button,
2162
2189
  .np-theme-personal .has-error input[type=radio]:not(.disabled):not(:disabled):hover + .tw-radio-button,
2163
2190
  .np-theme-personal .has-error input[type=checkbox]:not(.disabled):not(:disabled):hover + .tw-checkbox-button {
2164
- box-shadow: inset 0 0 0 2px #8e1b0b;
2165
2191
  box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-hover);
2166
2192
  }
2167
2193
  .np-theme-personal .has-error .tw-checkbox-button.checked,
@@ -2170,15 +2196,12 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2170
2196
  .np-theme-personal .has-error .tw-checkbox-button.checked:hover,
2171
2197
  .np-theme-personal .has-error .tw-checkbox-button:checked:hover,
2172
2198
  .np-theme-personal .has-error input[type=checkbox]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button {
2173
- box-shadow: inset 0 0 0 3px #a8200d;
2174
2199
  box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
2175
- background: #a8200d;
2176
2200
  background: var(--color-sentiment-negative);
2177
2201
  }
2178
2202
  .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):active input[type=checkbox] + .tw-checkbox-button,
2179
2203
  .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):focus-visible input[type=checkbox] + .tw-checkbox-button,
2180
2204
  .np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):has(:focus-visible) input[type=checkbox] + .tw-checkbox-button {
2181
- box-shadow: inset 0 0 0 2px #761709;
2182
2205
  box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-active);
2183
2206
  }
2184
2207
  .np-theme-personal .tw-radio-button,
@@ -2198,6 +2221,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2198
2221
  background-color: initial !important;
2199
2222
  }
2200
2223
  .np-theme-personal .form-group label {
2224
+ margin-bottom: 8px;
2201
2225
  margin-bottom: var(--padding-x-small);
2202
2226
  }
2203
2227
  .np-theme-personal .form-group .np-upload-input label {
@@ -2209,12 +2233,11 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2209
2233
  .np-theme-personal .has-warning label,
2210
2234
  .np-theme-personal .has-success .control-label,
2211
2235
  .np-theme-personal .has-success label {
2212
- color: #454745 !important;
2236
+ color: #5d7079 !important;
2213
2237
  color: var(--color-content-secondary) !important;
2214
2238
  }
2215
2239
  .np-theme-personal .has-error .control-label,
2216
2240
  .np-theme-personal .has-error label {
2217
- color: #a8200d !important;
2218
2241
  color: var(--color-sentiment-negative) !important;
2219
2242
  }
2220
2243
  .np-theme-personal .form-group .alert:before,
@@ -2223,9 +2246,11 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2223
2246
  }
2224
2247
  .np-theme-personal .error-messages,
2225
2248
  .np-theme-personal .alert-detach {
2226
- color: #454745;
2249
+ color: #5d7079;
2227
2250
  color: var(--color-content-secondary);
2251
+ line-height: 1.2;
2228
2252
  line-height: var(--line-height-control);
2253
+ margin: 8px 0;
2229
2254
  margin: var(--padding-x-small) 0;
2230
2255
  padding: 0;
2231
2256
  background-color: transparent;
@@ -2233,20 +2258,20 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2233
2258
  }
2234
2259
  .np-theme-personal .has-error .error-messages,
2235
2260
  .np-theme-personal .has-error .alert-detach.alert-danger {
2236
- color: #a8200d;
2237
2261
  color: var(--color-sentiment-negative);
2238
2262
  display: flex;
2239
2263
  }
2240
2264
  .np-theme-personal .has-error .error-messages .tw-icon,
2241
2265
  .np-theme-personal .has-error .alert-detach.alert-danger .tw-icon {
2266
+ margin-right: 8px;
2242
2267
  margin-right: var(--padding-x-small);
2243
2268
  }
2244
2269
  .has-required::after {
2245
2270
  content: "\00a0*";
2271
+ color: #cf2929;
2246
2272
  color: var(--color-content-negative);
2247
2273
  }
2248
2274
  .np-theme-personal .has-required::after {
2249
- color: #a8200d;
2250
2275
  color: var(--color-sentiment-negative);
2251
2276
  }
2252
2277
  .input-group {
@@ -2268,7 +2293,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2268
2293
  float: left;
2269
2294
  width: 100%;
2270
2295
  margin-bottom: 0;
2271
- border-color: #868685;
2296
+ border-color: #c9cbce;
2272
2297
  border-color: var(--color-interactive-secondary);
2273
2298
  }
2274
2299
  [dir="rtl"] .input-group .form-control {
@@ -2313,18 +2338,23 @@ html:not([dir="rtl"]) .input-group .form-control:not(:last-child) {
2313
2338
  min-height: var(--input-height-large);
2314
2339
  padding: var(--input-padding-large);
2315
2340
  border-radius: 3px;
2341
+ font-weight: 400;
2316
2342
  font-weight: var(--font-weight-regular);
2343
+ font-size: 1rem;
2317
2344
  font-size: var(--font-size-16);
2318
2345
  line-height: 150%;
2319
2346
  letter-spacing: -0.011em;
2320
2347
  margin: 0;
2321
- color: #0e0f0c;
2348
+ color: #37517e;
2322
2349
  color: var(--color-content-primary);
2350
+ line-height: 1.2;
2323
2351
  line-height: var(--line-height-title);
2324
2352
  letter-spacing: 0;
2325
2353
  margin-bottom: 0;
2326
2354
  margin-bottom: initial;
2355
+ font-size: 1.375rem;
2327
2356
  font-size: var(--font-size-22);
2357
+ font-weight: 600;
2328
2358
  font-weight: var(--font-weight-semi-bold);
2329
2359
  letter-spacing: -0.018em;
2330
2360
  line-height: 125%;
@@ -2352,6 +2382,7 @@ select[multiple].input-group-lg > .input-group-btn .btn {
2352
2382
  .input-group-lg > .form-control + ol:not(.list-unstyled),
2353
2383
  .input-group-lg > .input-group-addon + ol:not(.list-unstyled),
2354
2384
  .input-group-lg > .input-group-btn .btn + ol:not(.list-unstyled) {
2385
+ margin-top: 8px;
2355
2386
  margin-top: var(--size-8);
2356
2387
  }
2357
2388
  .input-group-sm > .form-control,
@@ -2361,9 +2392,11 @@ select[multiple].input-group-lg > .input-group-btn .btn {
2361
2392
  border-radius: 3px;
2362
2393
  font-size: 14px;
2363
2394
  line-height: 24px;
2395
+ font-size: 0.875rem;
2364
2396
  font-size: var(--font-size-14);
2365
2397
  line-height: 155%;
2366
2398
  letter-spacing: -0.006em;
2399
+ font-weight: 400;
2367
2400
  font-weight: var(--font-weight-regular);
2368
2401
  }
2369
2402
  select.input-group-sm > .form-control,
@@ -2378,6 +2411,7 @@ select[multiple].input-group-sm > .input-group-addon {
2378
2411
  }
2379
2412
  .input-group-sm > .form-control .icon,
2380
2413
  .input-group-sm > .input-group-addon .icon {
2414
+ font-size: 1.25rem;
2381
2415
  font-size: var(--font-size-20);
2382
2416
  }
2383
2417
  .input-group-sm > .input-group-btn > .btn {
@@ -2399,14 +2433,16 @@ select[multiple].input-group-sm > .input-group-addon {
2399
2433
  }
2400
2434
  .input-group-addon {
2401
2435
  padding: var(--input-group-addon-padding);
2436
+ font-size: 1rem;
2402
2437
  font-size: var(--font-size-16);
2438
+ line-height: 1.5;
2403
2439
  line-height: var(--line-height-body);
2404
- color: #454745;
2440
+ color: #5d7079;
2405
2441
  color: var(--color-content-secondary);
2406
2442
  text-align: center;
2407
2443
  background-color: #ffffff;
2408
2444
  background-color: var(--color-background-screen);
2409
- border: 1px solid #868685;
2445
+ border: 1px solid #c9cbce;
2410
2446
  border: 1px solid var(--color-interactive-secondary);
2411
2447
  }
2412
2448
  .input-group-addon.input-sm {
@@ -2547,12 +2583,16 @@ html:not([dir="rtl"]) .input-group > :first-child .btn-group {
2547
2583
  }
2548
2584
  [dir="rtl"] .np-theme-personal .input-group > :first-child .btn,
2549
2585
  [dir="rtl"] .np-theme-personal .input-group > :first-child .btn-group {
2586
+ border-bottom-right-radius: 10px;
2550
2587
  border-bottom-right-radius: var(--radius-small);
2588
+ border-top-right-radius: 10px;
2551
2589
  border-top-right-radius: var(--radius-small);
2552
2590
  }
2553
2591
  html:not([dir="rtl"]) .np-theme-personal .input-group > :first-child .btn,
2554
2592
  html:not([dir="rtl"]) .np-theme-personal .input-group > :first-child .btn-group {
2593
+ border-bottom-left-radius: 10px;
2555
2594
  border-bottom-left-radius: var(--radius-small);
2595
+ border-top-left-radius: 10px;
2556
2596
  border-top-left-radius: var(--radius-small);
2557
2597
  }
2558
2598
  [dir="rtl"] .input-group > :last-child .btn,
@@ -2567,12 +2607,16 @@ html:not([dir="rtl"]) .input-group > :last-child .btn-group {
2567
2607
  }
2568
2608
  [dir="rtl"] .np-theme-personal .input-group > :last-child .btn,
2569
2609
  [dir="rtl"] .np-theme-personal .input-group > :last-child .btn-group {
2610
+ border-bottom-right-radius: 10px;
2570
2611
  border-bottom-right-radius: var(--radius-small);
2612
+ border-top-right-radius: 10px;
2571
2613
  border-top-right-radius: var(--radius-small);
2572
2614
  }
2573
2615
  html:not([dir="rtl"]) .np-theme-personal .input-group > :last-child .btn,
2574
2616
  html:not([dir="rtl"]) .np-theme-personal .input-group > :last-child .btn-group {
2617
+ border-bottom-left-radius: 10px;
2575
2618
  border-bottom-left-radius: var(--radius-small);
2619
+ border-top-left-radius: 10px;
2576
2620
  border-top-left-radius: var(--radius-small);
2577
2621
  }
2578
2622
  .input-group-btn {
@@ -2610,41 +2654,43 @@ html:not([dir="rtl"]) .np-theme-personal .input-group > :last-child .btn-group {
2610
2654
  .input-group:hover:not(.disabled):not(:disabled) .input-group-addon,
2611
2655
  .input-group:hover:not(.disabled):not(:disabled) .btn-input,
2612
2656
  .input-group:hover:not(.disabled):not(:disabled) .bootstrap-select .btn-default {
2613
- border-color: #6c6c6b;
2657
+ border-color: #b5b7ba;
2614
2658
  border-color: var(--color-interactive-secondary-hover);
2615
2659
  }
2616
2660
  .form-control:hover:not(.disabled):not(:disabled) {
2617
- border-color: #6c6c6b;
2661
+ border-color: #b5b7ba;
2618
2662
  border-color: var(--color-interactive-secondary-hover);
2619
2663
  }
2620
2664
  .input-group:focus-within:not(.disabled):not(:disabled) .form-control,
2621
2665
  .input-group:focus-within:not(.disabled):not(:disabled) .input-group-addon,
2622
2666
  .input-group:focus-within:not(.disabled):not(:disabled) .btn-input,
2623
2667
  .input-group:focus-within:not(.disabled):not(:disabled) .bootstrap-select .btn-default {
2624
- border-color: #9fe870;
2668
+ border-color: #00a2dd;
2625
2669
  border-color: var(--color-interactive-accent);
2626
2670
  }
2627
2671
  .np-theme-personal .input-group:focus-within:not(.disabled):not(:disabled) .form-control,
2628
2672
  .np-theme-personal .input-group:focus-within:not(.disabled):not(:disabled) .input-group-addon,
2629
2673
  .np-theme-personal .input-group:focus-within:not(.disabled):not(:disabled) .btn-input,
2630
2674
  .np-theme-personal .input-group:focus-within:not(.disabled):not(:disabled) .bootstrap-select .btn-default {
2631
- border-color: #868685;
2675
+ border-color: #c9cbce;
2632
2676
  border-color: var(--color-interactive-secondary);
2633
2677
  }
2634
2678
  .form-control:focus-within:not(.disabled):not(:disabled) {
2635
- border-color: #9fe870;
2679
+ border-color: #00a2dd;
2636
2680
  border-color: var(--color-interactive-accent);
2637
2681
  }
2638
2682
  .np-theme-personal .form-control:focus-within:not(.disabled):not(:disabled) {
2639
- border-color: #868685;
2683
+ border-color: #c9cbce;
2640
2684
  border-color: var(--color-interactive-secondary);
2641
2685
  }
2642
2686
  .has-error .input-group .form-control,
2643
2687
  .has-error .input-group .input-group-addon {
2688
+ border-color: #e74848;
2644
2689
  border-color: var(--color-interactive-negative);
2645
2690
  }
2646
2691
  .has-error .input-group .form-control:hover,
2647
2692
  .has-error .input-group .input-group-addon:hover {
2693
+ border-color: #d03238;
2648
2694
  border-color: var(--color-interactive-negative-hover);
2649
2695
  }
2650
2696
  .dropdown-menu .input-group-addon {