@inera/ids-design 7.2.3 → 8.0.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.
Files changed (200) hide show
  1. package/components/accordion/accordion-lit.js +1 -1
  2. package/components/accordion/accordion.css +157 -11
  3. package/components/alert/alert-lit.js +1 -1
  4. package/components/alert/alert.css +275 -77
  5. package/components/badge/badge-lit.js +1 -1
  6. package/components/badge/badge.css +17 -11
  7. package/components/box-link/box-link-lit.js +1 -1
  8. package/components/box-link/box-link.css +16 -28
  9. package/components/breadcrumbs/breadcrumbs-lit.js +1 -1
  10. package/components/breadcrumbs/breadcrumbs.css +11 -6
  11. package/components/button-group/button-group-lit.js +1 -1
  12. package/components/button-group/button-group.css +4 -0
  13. package/components/card/card-lit.js +1 -1
  14. package/components/card/card.css +162 -33
  15. package/components/carousel/carousel-item-lit.js +1 -1
  16. package/components/carousel/carousel-item.css +169 -7
  17. package/components/carousel/carousel-lit.js +1 -1
  18. package/components/carousel/carousel.css +18 -12
  19. package/components/data-table/data-table-lit.js +1 -1
  20. package/components/data-table/data-table.css +14 -6
  21. package/components/date-label/date-label-lit.js +1 -1
  22. package/components/date-label/date-label.css +35 -14
  23. package/components/dialog/dialog-lit.js +1 -1
  24. package/components/dialog/dialog.css +34 -38
  25. package/components/dropdown/dropdown-lit.js +1 -1
  26. package/components/dropdown/dropdown.css +87 -28
  27. package/components/footer-1177/footer-1177-lit.js +1 -1
  28. package/components/footer-1177/footer-1177.css +226 -121
  29. package/components/footer-1177-admin/footer-1177-admin-lit.js +1 -1
  30. package/components/footer-1177-admin/footer-1177-admin.css +293 -140
  31. package/components/footer-1177-pro/footer-1177-pro-lit.js +1 -1
  32. package/components/footer-1177-pro/footer-1177-pro.css +390 -104
  33. package/components/footer-inera/footer-inera-lit.js +1 -1
  34. package/components/footer-inera/footer-inera.css +280 -164
  35. package/components/footer-inera-admin/footer-inera-admin-lit.js +1 -1
  36. package/components/footer-inera-admin/footer-inera-admin.css +339 -188
  37. package/components/form/error-message/error-message-lit.js +1 -1
  38. package/components/form/error-message/error-message.css +10 -6
  39. package/components/form/group/group-lit.js +1 -1
  40. package/components/form/group/group.css +148 -1
  41. package/components/form/range/range-lit.js +1 -1
  42. package/components/form/range/range.css +225 -2
  43. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  44. package/components/form/select-multiple/select-multiple.css +37 -33
  45. package/components/form/spinner/spinner-lit.js +1 -1
  46. package/components/form/spinner/spinner.css +6 -11
  47. package/components/global-alert/global-alert-lit.js +9 -0
  48. package/components/global-alert/global-alert.css +354 -0
  49. package/components/grid/container/container-lit.js +1 -1
  50. package/components/grid/container/container.css +2 -9
  51. package/components/header-1177/composite-header-1177.css +1105 -974
  52. package/components/header-1177/header-1177-avatar-lit.js +1 -1
  53. package/components/header-1177/header-1177-avatar.css +406 -191
  54. package/components/header-1177/header-1177-item-lit.js +1 -1
  55. package/components/header-1177/header-1177-item.css +125 -75
  56. package/components/header-1177/header-1177-lit.js +1 -1
  57. package/components/header-1177/header-1177-menu-mobile-lit.js +1 -1
  58. package/components/header-1177/header-1177-menu-mobile.css +14 -9
  59. package/components/header-1177/header-1177-nav-item-lit.js +1 -1
  60. package/components/header-1177/header-1177-nav-item-mobile-lit.js +1 -1
  61. package/components/header-1177/header-1177-nav-item-mobile.css +107 -164
  62. package/components/header-1177/header-1177-nav-item.css +109 -88
  63. package/components/header-1177/header-1177-nav-lit.js +1 -1
  64. package/components/header-1177/header-1177-nav.css +100 -45
  65. package/components/header-1177/header-1177-region-picker-lit.d.ts +2 -0
  66. package/components/header-1177/header-1177-region-picker-lit.js +7 -0
  67. package/components/header-1177/header-1177-region-picker-mobile-lit.d.ts +2 -0
  68. package/components/header-1177/header-1177-region-picker-mobile-lit.js +9 -0
  69. package/components/header-1177/header-1177-region-picker-mobile.css +112 -0
  70. package/components/header-1177/header-1177-region-picker.css +107 -0
  71. package/components/header-1177/header-1177.css +125 -450
  72. package/components/header-1177-admin/header-1177-admin-avatar-lit.js +1 -1
  73. package/components/header-1177-admin/header-1177-admin-avatar-mobile-lit.js +1 -1
  74. package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +170 -29
  75. package/components/header-1177-admin/header-1177-admin-avatar.css +490 -278
  76. package/components/header-1177-admin/header-1177-admin-item-lit.js +1 -1
  77. package/components/header-1177-admin/header-1177-admin-item.css +131 -89
  78. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  79. package/components/header-1177-admin/header-1177-admin-menu-mobile-lit.js +7 -0
  80. package/components/header-1177-admin/header-1177-admin-menu-mobile.css +145 -0
  81. package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
  82. package/components/header-1177-admin/header-1177-admin-nav-item.css +163 -134
  83. package/components/header-1177-admin/header-1177-admin-nav-lit.js +1 -1
  84. package/components/header-1177-admin/header-1177-admin-nav.css +76 -47
  85. package/components/header-1177-admin/header-1177-admin.css +91 -285
  86. package/components/header-1177-pro/header-1177-pro-avatar-lit.js +1 -1
  87. package/components/header-1177-pro/header-1177-pro-avatar-mobile-lit.js +1 -1
  88. package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +146 -74
  89. package/components/header-1177-pro/header-1177-pro-avatar.css +448 -275
  90. package/components/header-1177-pro/header-1177-pro-item-lit.js +1 -1
  91. package/components/header-1177-pro/header-1177-pro-item.css +169 -103
  92. package/components/header-1177-pro/header-1177-pro-lit.js +1 -1
  93. package/components/header-1177-pro/header-1177-pro-menu-mobile-lit.js +7 -0
  94. package/components/header-1177-pro/header-1177-pro-menu-mobile.css +146 -0
  95. package/components/header-1177-pro/header-1177-pro-nav-item-lit.js +1 -1
  96. package/components/header-1177-pro/header-1177-pro-nav-item.css +139 -122
  97. package/components/header-1177-pro/header-1177-pro-nav-lit.js +1 -1
  98. package/components/header-1177-pro/header-1177-pro-nav.css +75 -46
  99. package/components/header-1177-pro/header-1177-pro-region-picker-lit.js +1 -1
  100. package/components/header-1177-pro/header-1177-pro-region-picker-mobile-lit.js +9 -0
  101. package/components/header-1177-pro/header-1177-pro-region-picker-mobile.css +117 -0
  102. package/components/header-1177-pro/header-1177-pro-region-picker.css +38 -810
  103. package/components/header-1177-pro/header-1177-pro.css +140 -139
  104. package/components/header-inera/header-inera-item-lit.js +1 -1
  105. package/components/header-inera/header-inera-item.css +31 -21
  106. package/components/header-inera/header-inera-lit.js +1 -1
  107. package/components/header-inera/header-inera-menu-mobile-lit.d.ts +2 -0
  108. package/components/header-inera/header-inera-menu-mobile-lit.js +7 -0
  109. package/components/header-inera/header-inera-menu-mobile.css +136 -0
  110. package/components/header-inera/header-inera-nav-item-lit.js +1 -1
  111. package/components/header-inera/header-inera-nav-item.css +26 -23
  112. package/components/header-inera/header-inera-nav-lit.js +1 -1
  113. package/components/header-inera/header-inera-nav.css +11 -8
  114. package/components/header-inera/header-inera.css +50 -21
  115. package/components/header-inera-admin/composite-header-inera-admin.css +858 -245
  116. package/components/header-inera-admin/header-inera-admin-avatar-lit.js +1 -1
  117. package/components/header-inera-admin/header-inera-admin-avatar-mobile-lit.js +1 -1
  118. package/components/header-inera-admin/header-inera-admin-avatar-mobile.css +173 -44
  119. package/components/header-inera-admin/header-inera-admin-avatar.css +558 -100
  120. package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
  121. package/components/header-inera-admin/header-inera-admin-item.css +14 -7
  122. package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
  123. package/components/header-inera-admin/header-inera-admin-menu-mobile-lit.d.ts +2 -0
  124. package/components/header-inera-admin/header-inera-admin-menu-mobile-lit.js +7 -0
  125. package/components/header-inera-admin/header-inera-admin-menu-mobile.css +147 -0
  126. package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
  127. package/components/header-inera-admin/header-inera-admin-nav-item.css +28 -25
  128. package/components/header-inera-admin/header-inera-admin-nav-lit.js +1 -1
  129. package/components/header-inera-admin/header-inera-admin-nav.css +16 -16
  130. package/components/header-inera-admin/header-inera-admin.css +34 -24
  131. package/components/header-patient/header-patient-lit.js +1 -1
  132. package/components/header-patient/header-patient.css +166 -8
  133. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  134. package/components/mobile-menu/mobile-menu.css +340 -244
  135. package/components/navigation/content/navigation-content-lit.js +1 -1
  136. package/components/navigation/content/navigation-content.css +203 -16
  137. package/components/navigation/local/navigation-local-lit.js +1 -1
  138. package/components/navigation/local/navigation-local.css +37 -56
  139. package/components/notification-badge/notification-badge-lit.js +1 -1
  140. package/components/notification-badge/notification-badge.css +15 -13
  141. package/components/pagination/data-pagination/data-pagination-lit.js +1 -1
  142. package/components/pagination/data-pagination/data-pagination.css +206 -44
  143. package/components/pagination/list-pagination/list-pagination-lit.js +1 -1
  144. package/components/pagination/list-pagination/list-pagination.css +5 -5
  145. package/components/popover/popover-content-lit.js +1 -1
  146. package/components/popover/popover-content.css +262 -114
  147. package/components/progressbar/progressbar-lit.js +1 -1
  148. package/components/progressbar/progressbar.css +147 -4
  149. package/components/puff-list/puff-list-lit.js +1 -1
  150. package/components/puff-list/puff-list.css +258 -35
  151. package/components/region-icon/region-icon-lit.js +1 -1
  152. package/components/region-icon/region-icon.css +5 -5
  153. package/components/side-menu/side-menu-lit.js +1 -1
  154. package/components/side-menu/side-menu.css +6 -9
  155. package/components/side-panel/side-panel-lit.js +1 -1
  156. package/components/side-panel/side-panel.css +61 -26
  157. package/components/stepper/stepper-lit.js +1 -1
  158. package/components/stepper/stepper.css +170 -22
  159. package/components/table/table.css +6 -3
  160. package/components/tabs/tab-lit.js +1 -1
  161. package/components/tabs/tab-panel-lit.js +1 -1
  162. package/components/tabs/tab-panel.css +2 -0
  163. package/components/tabs/tab.css +26 -14
  164. package/components/tabs/tabs-lit.js +2 -2
  165. package/components/tabs/tabs.css +1 -1
  166. package/components/tag/tag-lit.js +1 -1
  167. package/components/tag/tag.css +10 -7
  168. package/components/tooltip/tooltip-lit.js +1 -1
  169. package/components/tooltip/tooltip.css +8 -5
  170. package/global/_partials.css +15 -0
  171. package/{themes/1177-pro/1177-pro.css → global/global.css} +3958 -3504
  172. package/global/icons/Inera-Design-Icons.eot +0 -0
  173. package/global/icons/Inera-Design-Icons.svg +9 -0
  174. package/global/icons/Inera-Design-Icons.ttf +0 -0
  175. package/global/icons/Inera-Design-Icons.woff +0 -0
  176. package/global/util/util.css +2745 -0
  177. package/package.json +1 -1
  178. package/reset.css +90 -0
  179. package/styles.css +8320 -0
  180. package/tokens/component-tokens.scss +86 -0
  181. package/tokens/themes/1177-admin-tokens.css +340 -263
  182. package/tokens/themes/1177-pro-tokens.css +340 -263
  183. package/tokens/themes/1177-tokens.css +340 -263
  184. package/tokens/themes/inera-admin-tokens.css +294 -252
  185. package/tokens/themes/inera-tokens.css +294 -252
  186. package/components/alert-global/alert-global-lit.js +0 -7
  187. package/components/alert-global/alert-global.css +0 -195
  188. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js +0 -7
  189. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +0 -304
  190. package/components/header-inera/header-inera-nav-mobile-lit.js +0 -7
  191. package/components/header-inera/header-inera-nav-mobile.css +0 -126
  192. package/components/header-inera-admin/header-inera-admin-nav-mobile-lit.js +0 -7
  193. package/components/header-inera-admin/header-inera-admin-nav-mobile.css +0 -126
  194. package/themes/1177/1177.css +0 -6196
  195. package/themes/inera/inera.css +0 -6220
  196. package/themes/inera-admin/inera-admin.css +0 -6293
  197. /package/components/{alert-global/alert-global-lit.d.ts → global-alert/global-alert-lit.d.ts} +0 -0
  198. /package/components/{header-1177-pro/header-1177-pro-nav-menu-mobile-lit.d.ts → header-1177-admin/header-1177-admin-menu-mobile-lit.d.ts} +0 -0
  199. /package/components/{header-inera-admin/header-inera-admin-nav-mobile-lit.d.ts → header-1177-pro/header-1177-pro-menu-mobile-lit.d.ts} +0 -0
  200. /package/components/{header-inera/header-inera-nav-mobile-lit.d.ts → header-1177-pro/header-1177-pro-region-picker-mobile-lit.d.ts} +0 -0
package/components/header-1177/composite-header-1177.css CHANGED
@@ -5,7 +5,7 @@
5
5
  * BUTTONS
6
6
  ********/
7
7
  /*******
8
- * SCROLLBARS
8
+ * SCROLLBAR
9
9
  ********/
10
10
  /*******
11
11
  * FORM
@@ -27,32 +27,84 @@
27
27
 
28
28
  header.ids-header-1177 {
29
29
  position: relative;
30
- box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
30
+ border-bottom: 0.0625rem solid var(--IDS-HEADER-1177__BORDER-COLOR);
31
31
  }
32
- header.ids-header-1177:not(.ids-header-1177--unresponsive) {
33
- --IDS-HEADER__REGION-PICKER-ICON: var(--IDS-COLOR-PRIMARY-35);
32
+ header.ids-header-1177 .ids-header-1177__skip-to-content {
33
+ position: relative;
34
+ z-index: 20;
35
+ }
36
+ header.ids-header-1177 .ids-header-1177__skip-to-content ::slotted(a),
37
+ header.ids-header-1177 .ids-header-1177__skip-to-content a {
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ padding: 0 1rem;
42
+ height: 3rem;
43
+ text-align: center;
44
+ background-color: var(--IDS-SKIP-TO-CONTENT-LINK__BACKGROUND-COLOR);
45
+ box-shadow: var(--IDS-BOX-SHADOW);
46
+ z-index: 20;
47
+ font-family: var(--IDS-LINK__FONT-FAMILY);
48
+ font-size: 1rem;
49
+ color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
50
+ text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
51
+ text-decoration: underline;
52
+ position: absolute;
53
+ right: 0;
54
+ left: 0;
55
+ transform: translateY(-300%);
56
+ transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
57
+ }
58
+ header.ids-header-1177 .ids-header-1177__skip-to-content ::slotted(a:focus),
59
+ header.ids-header-1177 .ids-header-1177__skip-to-content a:focus {
60
+ transform: translateY(0);
61
+ transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
62
+ color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
63
+ text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
64
+ outline-offset: -0.375rem !important;
65
+ }
66
+ header.ids-header-1177:not(.ids-header-1177--unresponsive):before {
67
+ content: "";
68
+ position: absolute;
69
+ top: 0;
70
+ left: 0;
71
+ right: 0;
72
+ height: 0.5rem;
73
+ z-index: 3;
74
+ background-color: var(--IDS-HEADER-1177__TOP-BORDER-COLOR);
34
75
  }
35
76
  @media (max-width: 1024px) {
36
- header.ids-header-1177:not(.ids-header-1177--unresponsive) {
37
- --IDS-HEADER__REGION-PICKER-ICON: var(--IDS-COLOR-NEUTRAL-100);
77
+ header.ids-header-1177:not(.ids-header-1177--unresponsive):before {
78
+ height: 0.25rem;
38
79
  }
39
80
  }
40
81
  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container {
41
- background: linear-gradient(90deg, var(--IDS-COLOR-PRIMARY-40) 50%, var(--IDS-COLOR-PRIMARY-90) 50%);
82
+ background-color: var(--IDS-HEADER-1177__BACKGROUND-COLOR);
42
83
  padding: 0;
43
84
  position: relative;
44
85
  z-index: 2;
86
+ display: flex;
87
+ align-items: center;
88
+ }
89
+ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__left,
90
+ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__right {
91
+ flex: 1 1 0;
92
+ min-width: 0;
93
+ height: 7.5rem;
94
+ }
95
+ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__left {
96
+ background-color: var(--IDS-HEADER-1177__LOGO-BACKGROUND-COLOR);
45
97
  }
46
98
  @media (max-width: 1024px) {
47
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container {
48
- box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
99
+ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__left,
100
+ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__right {
101
+ height: 3rem;
49
102
  }
50
103
  }
51
104
  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner {
105
+ flex-grow: 1;
106
+ flex: 0 1 auto;
52
107
  max-width: var(--IDS__MAX-WIDTH);
53
- margin-left: auto;
54
- margin-right: auto;
55
- background: var(--IDS-COLOR-PRIMARY-90);
56
108
  width: 100%;
57
109
  position: relative;
58
110
  display: flex;
@@ -60,11 +112,6 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
60
112
  align-items: center;
61
113
  flex-wrap: wrap;
62
114
  }
63
- @media (min-width: 1024px) {
64
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner {
65
- min-height: 7.5rem;
66
- }
67
- }
68
115
  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__inner-left {
69
116
  display: flex;
70
117
  position: relative;
@@ -72,13 +119,13 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
72
119
  }
73
120
  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__inner-right {
74
121
  display: flex;
75
- max-width: calc(100% - 6.5rem);
122
+ padding-right: var(--IDS__CONTAINER-MARGIN);
76
123
  flex-grow: 1;
77
124
  justify-content: flex-end;
78
- margin-left: auto;
125
+ align-items: center;
79
126
  }
80
127
  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper {
81
- background-color: var(--IDS-COLOR-PRIMARY-40);
128
+ background-color: var(--IDS-HEADER-1177__LOGO-BACKGROUND-COLOR);
82
129
  display: flex;
83
130
  align-items: center;
84
131
  position: relative;
@@ -86,12 +133,12 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
86
133
  min-height: 7.5rem;
87
134
  margin-left: 0 !important;
88
135
  margin-right: 0;
89
- padding-left: 0.75rem;
90
- padding-right: 2.25rem;
136
+ padding-left: var(--IDS__CONTAINER-MARGIN);
137
+ overflow-y: clip;
91
138
  }
92
139
  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper:after {
93
140
  content: "";
94
- background-color: var(--IDS-COLOR-PRIMARY-40);
141
+ background-color: var(--IDS-HEADER-1177__GRAPHICS-BACKGROUND-COLOR);
95
142
  position: absolute;
96
143
  z-index: 0;
97
144
  border-radius: 100%;
@@ -121,7 +168,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
121
168
  }
122
169
  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo .ids-header-1177__logo-link {
123
170
  cursor: pointer;
124
- height: 6.4375rem;
171
+ height: 5.625rem;
125
172
  width: 100%;
126
173
  position: relative;
127
174
  }
@@ -134,7 +181,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
134
181
  -webkit-font-smoothing: antialiased;
135
182
  -moz-osx-font-smoothing: grayscale;
136
183
  content: "\e91e";
137
- color: var(--IDS-COLOR-NEUTRAL-100);
184
+ color: var(--IDS-HEADER-1177__LOGO-COLOR);
138
185
  font-size: 6.625rem;
139
186
  }
140
187
  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a:focus,
@@ -147,7 +194,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
147
194
  display: flex;
148
195
  align-items: center;
149
196
  font-size: 6.625rem;
150
- color: var(--IDS-COLOR-NEUTRAL-100);
197
+ color: var(--IDS-HEADER-1177__LOGO-COLOR);
151
198
  }
152
199
  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo ::slotted([slot=logo]:focus) {
153
200
  outline: var(--IDS-FOCUS__OUTLINE--LIGHT) !important;
@@ -163,7 +210,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
163
210
  }
164
211
  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper:after {
165
212
  content: "";
166
- background-color: var(--IDS-COLOR-PRIMARY-40);
213
+ background-color: var(--IDS-HEADER-1177__GRAPHICS-BACKGROUND-COLOR);
167
214
  position: absolute;
168
215
  z-index: 0;
169
216
  border-radius: 100%;
@@ -199,220 +246,6 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
199
246
  font-size: 3rem;
200
247
  }
201
248
  }
202
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region {
203
- display: flex;
204
- flex-grow: 1;
205
- gap: 1rem;
206
- align-items: center;
207
- position: relative;
208
- }
209
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:after {
210
- content: "";
211
- background-color: var(--IDS-COLOR-PRIMARY-40);
212
- position: absolute;
213
- z-index: 0;
214
- border-radius: 100%;
215
- right: -0.5625rem;
216
- top: 0;
217
- left: auto;
218
- display: none;
219
- top: 0;
220
- margin-top: -7.81rem;
221
- clip: rect(7.8125rem, 18.75rem, 10.8125rem, 18.125rem);
222
- height: 18.75rem;
223
- width: 18.75rem;
224
- }
225
- @media (max-width: 1024px) {
226
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:after {
227
- display: block;
228
- }
229
- }
230
- @media (max-width: 1024px) {
231
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region {
232
- background-color: var(--IDS-COLOR-PRIMARY-40);
233
- justify-content: space-between;
234
- }
235
- }
236
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker {
237
- min-width: 7rem;
238
- box-sizing: content-box;
239
- }
240
- @media (max-width: 1024px) {
241
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker .ids-header-1177__region-picker__button:before {
242
- content: "";
243
- position: absolute;
244
- z-index: 1;
245
- left: -1.875rem;
246
- width: 0.063rem;
247
- min-height: 4rem;
248
- background-color: var(--IDS-COLOR-NEUTRAL-100);
249
- }
250
- }
251
- @media (max-width: 1024px) and (max-width: 1024px) {
252
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker .ids-header-1177__region-picker__button:before {
253
- left: 0;
254
- top: 50%;
255
- transform: translateY(-50%);
256
- min-height: 2rem;
257
- }
258
- }
259
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker .ids-header-1177__region-picker__text {
260
- font-size: 1rem;
261
- white-space: nowrap;
262
- }
263
- @media (max-width: 1024px) {
264
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-icon {
265
- display: none;
266
- }
267
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-icon:before {
268
- display: none;
269
- }
270
- }
271
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected {
272
- margin-left: -0.25rem;
273
- }
274
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-picker .ids-header-1177__region-picker__button {
275
- display: flex;
276
- justify-content: end;
277
- }
278
- @media (max-width: 1024px) {
279
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-picker .ids-header-1177__region-picker__text {
280
- display: none;
281
- }
282
- }
283
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon {
284
- padding-right: 0.5rem;
285
- }
286
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon:before {
287
- content: "";
288
- position: absolute;
289
- z-index: 1;
290
- left: -1.875rem;
291
- width: 0.063rem;
292
- min-height: 4rem;
293
- background-color: var(--IDS-COLOR-NEUTRAL-100);
294
- }
295
- @media (max-width: 1024px) {
296
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon:before {
297
- left: 0;
298
- top: 50%;
299
- transform: translateY(-50%);
300
- min-height: 2rem;
301
- }
302
- }
303
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon {
304
- background-color: var(--IDS-COLOR-PRIMARY-40);
305
- display: flex;
306
- position: relative;
307
- align-items: center;
308
- height: 100%;
309
- align-items: center;
310
- }
311
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon:after {
312
- content: "";
313
- background-color: var(--IDS-COLOR-PRIMARY-40);
314
- position: absolute;
315
- z-index: 0;
316
- border-radius: 100%;
317
- right: -0.5625rem;
318
- top: 0;
319
- left: auto;
320
- top: 50%;
321
- margin-top: -12.5rem;
322
- clip: rect(8.75rem, 25rem, 16.25rem, 24.375rem);
323
- height: 25rem;
324
- width: 25rem;
325
- }
326
- @media (max-width: 1024px) {
327
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon:after {
328
- display: none;
329
- }
330
- }
331
- @media (max-width: 1024px) {
332
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon {
333
- background-color: var(--IDS-COLOR-PRIMARY-40);
334
- justify-content: space-between;
335
- padding-left: 1rem;
336
- height: auto;
337
- align-items: normal;
338
- }
339
- }
340
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker {
341
- position: relative;
342
- align-items: center;
343
- position: relative;
344
- height: inherit;
345
- padding: 0 0.5rem;
346
- margin: 0 -0.4375rem 0 0.5rem;
347
- }
348
- @media (max-width: 1024px) {
349
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker {
350
- margin-left: 0;
351
- position: initial;
352
- height: 100%;
353
- justify-content: space-between;
354
- }
355
- }
356
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button {
357
- min-width: 1.5rem;
358
- min-height: 1.5rem;
359
- background: none;
360
- color: inherit;
361
- border: none;
362
- padding: 0;
363
- font: inherit;
364
- cursor: pointer;
365
- outline: inherit;
366
- -moz-user-select: -moz-none;
367
- -khtml-user-select: none;
368
- -webkit-user-select: none;
369
- -ms-user-select: none;
370
- user-select: none;
371
- border: none;
372
- background-color: none;
373
- display: flex;
374
- gap: 1rem;
375
- font-size: 0.875rem;
376
- color: var(--IDS-COLOR-PRIMARY-35);
377
- align-items: center;
378
- padding: 0 1.75rem 0 0.125rem;
379
- margin: 0 -0.5rem;
380
- position: relative;
381
- }
382
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button:focus {
383
- outline: var(--IDS-FOCUS__OUTLINE);
384
- outline-offset: 0.125rem !important;
385
- }
386
- @media (max-width: 1024px) {
387
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button {
388
- inset: 0;
389
- padding-right: 1.5rem;
390
- padding-left: 1.25rem;
391
- margin-right: 0.0625rem;
392
- position: absolute;
393
- justify-content: space-between;
394
- color: var(--IDS-COLOR-NEUTRAL-100);
395
- }
396
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button:focus {
397
- outline: var(--IDS-FOCUS__OUTLINE--LIGHT);
398
- outline-offset: -0.25rem !important;
399
- }
400
- }
401
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button:after {
402
- font: icon;
403
- font-family: "Inera-Design-Icons" !important;
404
- display: block;
405
- position: absolute;
406
- pointer-events: none;
407
- -webkit-font-smoothing: antialiased;
408
- -moz-osx-font-smoothing: grayscale;
409
- content: "\e936";
410
- color: var(--IDS-HEADER__REGION-PICKER-ICON);
411
- right: 0.125rem;
412
- }
413
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button.ids-header-1177__region-picker__button--expanded:after {
414
- content: "\e939";
415
- }
416
249
  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__items {
417
250
  display: flex;
418
251
  align-items: center;
@@ -426,9 +259,21 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
426
259
  margin-right: 0.5rem;
427
260
  }
428
261
  }
262
+ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region-picker {
263
+ display: flex;
264
+ flex-grow: 1;
265
+ align-items: center;
266
+ position: relative;
267
+ margin-left: 1.875rem;
268
+ }
269
+ @media (max-width: 1024px) {
270
+ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region-picker {
271
+ display: none;
272
+ }
273
+ }
429
274
  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile {
430
275
  display: none;
431
- background-color: var(--IDS-COLOR-PRIMARY-90);
276
+ background-color: var(--IDS-HEADER-1177__NAV-MOBILE-BACKGROUND-COLOR);
432
277
  flex-wrap: wrap;
433
278
  flex: 1 1 auto;
434
279
  box-sizing: border-box;
@@ -439,55 +284,37 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav
439
284
  display: flex;
440
285
  }
441
286
  }
442
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__skip-to-content ::slotted(a),
443
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__skip-to-content a {
444
- display: flex;
445
- align-items: center;
446
- justify-content: center;
447
- padding: 0 1rem;
448
- height: 3rem;
449
- text-align: center;
450
- background-color: var(--IDS-COLOR-NEUTRAL-100);
451
- box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.625rem 0;
452
- z-index: 20;
453
- font-family: var(--IDS-LINK__FONT-FAMILY);
454
- font-size: 1rem;
455
- color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
456
- text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
457
- text-decoration: underline;
287
+ header.ids-header-1177.ids-header-1177--unresponsive:before {
288
+ content: "";
458
289
  position: absolute;
459
- right: 0;
290
+ top: 0;
460
291
  left: 0;
461
- transform: translateY(-300%);
462
- transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
463
- }
464
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__skip-to-content ::slotted(a:focus),
465
- header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__skip-to-content a:focus {
466
- transform: translateY(0);
467
- transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
468
- color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
469
- text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
470
- outline-offset: -0.375rem !important;
471
- }
472
- @media (max-width: 1024px) {
473
- header.ids-header-1177:not(.ids-header-1177--unresponsive) {
474
- box-shadow: none;
475
- }
476
- }
477
- header.ids-header-1177.ids-header-1177--unresponsive {
478
- --IDS-HEADER__REGION-PICKER-ICON: var(--IDS-COLOR-PRIMARY-35);
292
+ right: 0;
293
+ height: 0.5rem;
294
+ z-index: 3;
295
+ background-color: var(--IDS-HEADER-1177__TOP-BORDER-COLOR);
479
296
  }
480
297
  header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container {
481
- background: linear-gradient(90deg, var(--IDS-COLOR-PRIMARY-40) 50%, var(--IDS-COLOR-PRIMARY-90) 50%);
298
+ background-color: var(--IDS-HEADER-1177__BACKGROUND-COLOR);
482
299
  padding: 0;
483
300
  position: relative;
484
301
  z-index: 2;
302
+ display: flex;
303
+ align-items: center;
304
+ }
305
+ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__left,
306
+ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__right {
307
+ flex: 1 1 0;
308
+ min-width: 0;
309
+ height: 7.5rem;
310
+ }
311
+ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__left {
312
+ background-color: var(--IDS-HEADER-1177__LOGO-BACKGROUND-COLOR);
485
313
  }
486
314
  header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner {
315
+ flex-grow: 1;
316
+ flex: 0 1 auto;
487
317
  max-width: var(--IDS__MAX-WIDTH);
488
- margin-left: auto;
489
- margin-right: auto;
490
- background: var(--IDS-COLOR-PRIMARY-90);
491
318
  width: 100%;
492
319
  position: relative;
493
320
  display: flex;
@@ -502,13 +329,13 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
502
329
  }
503
330
  header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__inner-right {
504
331
  display: flex;
505
- max-width: calc(100% - 6.5rem);
332
+ padding-right: var(--IDS__CONTAINER-MARGIN);
506
333
  flex-grow: 1;
507
334
  justify-content: flex-end;
508
- margin-left: auto;
335
+ align-items: center;
509
336
  }
510
337
  header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper {
511
- background-color: var(--IDS-COLOR-PRIMARY-40);
338
+ background-color: var(--IDS-HEADER-1177__LOGO-BACKGROUND-COLOR);
512
339
  display: flex;
513
340
  align-items: center;
514
341
  position: relative;
@@ -516,12 +343,12 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
516
343
  min-height: 7.5rem;
517
344
  margin-left: 0 !important;
518
345
  margin-right: 0;
519
- padding-left: 0.75rem;
520
- padding-right: 2.25rem;
346
+ padding-left: var(--IDS__CONTAINER-MARGIN);
347
+ overflow-y: clip;
521
348
  }
522
349
  header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper:after {
523
350
  content: "";
524
- background-color: var(--IDS-COLOR-PRIMARY-40);
351
+ background-color: var(--IDS-HEADER-1177__GRAPHICS-BACKGROUND-COLOR);
525
352
  position: absolute;
526
353
  z-index: 0;
527
354
  border-radius: 100%;
@@ -546,7 +373,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
546
373
  }
547
374
  header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo .ids-header-1177__logo-link {
548
375
  cursor: pointer;
549
- height: 6.4375rem;
376
+ height: 5.625rem;
550
377
  width: 100%;
551
378
  position: relative;
552
379
  }
@@ -559,7 +386,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
559
386
  -webkit-font-smoothing: antialiased;
560
387
  -moz-osx-font-smoothing: grayscale;
561
388
  content: "\e91e";
562
- color: var(--IDS-COLOR-NEUTRAL-100);
389
+ color: var(--IDS-HEADER-1177__LOGO-COLOR);
563
390
  font-size: 6.625rem;
564
391
  }
565
392
  header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo a:focus,
@@ -572,73 +399,94 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
572
399
  display: flex;
573
400
  align-items: center;
574
401
  font-size: 6.625rem;
575
- color: var(--IDS-COLOR-NEUTRAL-100);
402
+ color: var(--IDS-HEADER-1177__LOGO-COLOR);
576
403
  }
577
404
  header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper .ids-header-1177__logo ::slotted([slot=logo]:focus) {
578
405
  outline: var(--IDS-FOCUS__OUTLINE--LIGHT) !important;
579
406
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
580
407
  }
581
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region {
408
+ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__items {
409
+ display: flex;
410
+ align-items: center;
411
+ justify-content: flex-end;
412
+ margin-right: 1.25rem;
413
+ margin-left: 1rem;
414
+ }
415
+ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region-picker {
582
416
  display: flex;
583
417
  flex-grow: 1;
584
- gap: 1rem;
585
418
  align-items: center;
586
419
  position: relative;
420
+ margin-left: 1.875rem;
587
421
  }
588
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:after {
589
- content: "";
590
- background-color: var(--IDS-COLOR-PRIMARY-40);
591
- position: absolute;
592
- z-index: 0;
593
- border-radius: 100%;
594
- right: -0.5625rem;
595
- top: 0;
596
- left: auto;
422
+ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobile {
597
423
  display: none;
598
- top: 0;
599
- margin-top: -7.81rem;
600
- clip: rect(7.8125rem, 18.75rem, 10.8125rem, 18.125rem);
601
- height: 18.75rem;
602
- width: 18.75rem;
424
+ background-color: var(--IDS-HEADER-1177__NAV-MOBILE-BACKGROUND-COLOR);
425
+ flex-wrap: wrap;
426
+ flex: 1 1 auto;
427
+ box-sizing: border-box;
428
+ height: 3.125rem;
603
429
  }
604
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker {
605
- min-width: 7rem;
606
- box-sizing: content-box;
430
+
431
+ .ids-header-1177-region-picker {
432
+ display: flex;
433
+ flex-direction: row;
434
+ align-items: center;
607
435
  }
608
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region:not(.ids-header-1177__region--selected) .ids-header-1177__region-picker .ids-header-1177__region-picker__text {
609
- font-size: 1rem;
610
- white-space: nowrap;
436
+ .ids-header-1177-region-picker .ids-header-1177-region-picker__button {
437
+ border: none;
438
+ background-color: transparent;
439
+ cursor: pointer;
440
+ font-size: 0.875rem;
441
+ font-family: var(--IDS-FONT-FAMILY-HEADING);
442
+ color: var(--IDS-HEADER-1177-REGION-PICKER__TEXT-COLOR-DESKTOP);
443
+ align-items: center;
444
+ padding: 0 1.75rem 0 0.125rem;
445
+ position: relative;
611
446
  }
612
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected {
613
- margin-left: -0.25rem;
447
+ .ids-header-1177-region-picker .ids-header-1177-region-picker__button:focus {
448
+ outline: var(--IDS-FOCUS__OUTLINE);
449
+ outline-offset: 0.125rem !important;
614
450
  }
615
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-picker .ids-header-1177__region-picker__button {
616
- display: flex;
617
- justify-content: end;
451
+ .ids-header-1177-region-picker .ids-header-1177-region-picker__button:after {
452
+ font: icon;
453
+ font-family: "Inera-Design-Icons" !important;
454
+ display: block;
455
+ position: absolute;
456
+ pointer-events: none;
457
+ -webkit-font-smoothing: antialiased;
458
+ -moz-osx-font-smoothing: grayscale;
459
+ content: "\e936";
460
+ color: var(--IDS-HEADER-1177-REGION-PICKER__TEXT-COLOR-DESKTOP);
461
+ right: 0.125rem;
462
+ top: 50%;
463
+ transform: translateY(-50%);
618
464
  }
619
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon {
620
- padding-right: 0.5rem;
465
+ .ids-header-1177-region-picker .ids-header-1177-region-picker__button.ids-header-1177-region-picker__button--expanded:after {
466
+ content: "\e939";
621
467
  }
622
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region.ids-header-1177__region--selected .ids-header-1177__region-icon:before {
623
- content: "";
624
- position: absolute;
625
- z-index: 1;
626
- left: -1.875rem;
627
- width: 0.063rem;
628
- min-height: 4rem;
629
- background-color: var(--IDS-COLOR-NEUTRAL-100);
468
+ .ids-header-1177-region-picker .ids-header-1177-region-picker__button:hover {
469
+ color: var(--IDS-HEADER-1177-REGION-PICKER__TEXT-HOVER-COLOR-DESKTOP);
470
+ text-decoration: underline;
471
+ text-underline-offset: 0.125rem;
630
472
  }
631
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon {
632
- background-color: var(--IDS-COLOR-PRIMARY-40);
633
- display: flex;
473
+ .ids-header-1177-region-picker .ids-header-1177-region-picker__button:hover:after, .ids-header-1177-region-picker .ids-header-1177-region-picker__button:hover:before {
474
+ color: var(--IDS-HEADER-1177-REGION-PICKER__TEXT-HOVER-COLOR-DESKTOP);
475
+ }
476
+ .ids-header-1177-region-picker.ids-header-1177-region-picker--selected-region .ids-header-1177-region-picker__region-icon {
477
+ background-color: var(--IDS-HEADER-1177-REGION-PICKER__ICON-BACKGROUND-COLOR);
478
+ height: 7.5rem;
479
+ padding: 0 0.625rem 0 1.25rem;
480
+ margin-left: -1.875rem;
481
+ margin-right: 1.875rem;
634
482
  position: relative;
483
+ display: flex;
635
484
  align-items: center;
636
- height: 100%;
637
- align-items: center;
485
+ overflow-y: clip;
638
486
  }
639
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-icon:after {
487
+ .ids-header-1177-region-picker.ids-header-1177-region-picker--selected-region .ids-header-1177-region-picker__region-icon:after {
640
488
  content: "";
641
- background-color: var(--IDS-COLOR-PRIMARY-40);
489
+ background-color: var(--IDS-HEADER-1177__GRAPHICS-BACKGROUND-COLOR);
642
490
  position: absolute;
643
491
  z-index: 0;
644
492
  border-radius: 100%;
@@ -651,45 +499,56 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
651
499
  height: 25rem;
652
500
  width: 25rem;
653
501
  }
654
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker {
655
- position: relative;
502
+ .ids-header-1177-region-picker.ids-header-1177-region-picker--selected-region:before {
503
+ content: "";
504
+ position: absolute;
505
+ z-index: 1;
506
+ left: -1.875rem;
507
+ width: 0.0313rem;
508
+ min-height: 4rem;
509
+ background-color: var(--IDS-HEADER-1177-REGION-PICKER__SEPARATOR-COLOR);
510
+ }
511
+
512
+ .ids-header-1177-region-picker-mobile {
513
+ display: flex;
514
+ flex-grow: 1;
656
515
  align-items: center;
657
- position: relative;
658
- height: inherit;
659
- padding: 0 0.5rem;
660
- margin: 0 -0.4375rem 0 0.5rem;
661
516
  }
662
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button {
663
- min-width: 1.5rem;
664
- min-height: 1.5rem;
665
- background: none;
666
- color: inherit;
517
+ .ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button {
667
518
  border: none;
668
- padding: 0;
669
- font: inherit;
519
+ background-color: transparent;
670
520
  cursor: pointer;
671
- outline: inherit;
672
- -moz-user-select: -moz-none;
673
- -khtml-user-select: none;
674
- -webkit-user-select: none;
675
- -ms-user-select: none;
676
- user-select: none;
677
- border: none;
678
- background-color: none;
679
- display: flex;
680
- gap: 1rem;
681
521
  font-size: 0.875rem;
682
- color: var(--IDS-COLOR-PRIMARY-35);
522
+ font-family: var(--IDS-FONT-FAMILY-HEADING);
523
+ color: var(--IDS-HEADER-1177-REGION-PICKER__TEXT-COLOR-MOBILE);
683
524
  align-items: center;
684
- padding: 0 1.75rem 0 0.125rem;
685
- margin: 0 -0.5rem;
525
+ justify-content: center;
526
+ height: 2.375rem;
527
+ padding-right: 1.875rem;
528
+ padding-left: 2rem;
686
529
  position: relative;
530
+ white-space: nowrap;
687
531
  }
688
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button:focus {
532
+ .ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button:focus {
689
533
  outline: var(--IDS-FOCUS__OUTLINE);
690
534
  outline-offset: 0.125rem !important;
691
535
  }
692
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button:after {
536
+ .ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button:before {
537
+ font: icon;
538
+ font-family: "Inera-Design-Icons" !important;
539
+ display: block;
540
+ position: absolute;
541
+ pointer-events: none;
542
+ -webkit-font-smoothing: antialiased;
543
+ -moz-osx-font-smoothing: grayscale;
544
+ content: "\e921";
545
+ font-size: 1.5rem;
546
+ color: var(--IDS-HEADER-1177-REGION-PICKER__TEXT-COLOR-MOBILE);
547
+ left: 0;
548
+ top: 50%;
549
+ transform: translateY(-50%);
550
+ }
551
+ .ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button:after {
693
552
  font: icon;
694
553
  font-family: "Inera-Design-Icons" !important;
695
554
  display: block;
@@ -698,62 +557,45 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
698
557
  -webkit-font-smoothing: antialiased;
699
558
  -moz-osx-font-smoothing: grayscale;
700
559
  content: "\e936";
701
- color: var(--IDS-HEADER__REGION-PICKER-ICON);
560
+ color: var(--IDS-HEADER-1177-REGION-PICKER__TEXT-COLOR-MOBILE);
702
561
  right: 0.125rem;
562
+ top: 50%;
563
+ transform: translateY(-50%);
703
564
  }
704
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region .ids-header-1177__region-picker .ids-header-1177__region-picker__button.ids-header-1177__region-picker__button--expanded:after {
565
+ .ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button:hover .ids-header-1177-region-picker-mobile__button-text {
566
+ text-decoration: underline;
567
+ text-underline-offset: 0.125rem;
568
+ }
569
+ .ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__button.ids-header-1177-region-picker-mobile__button--expanded:after {
705
570
  content: "\e939";
706
571
  }
707
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__items {
708
- display: flex;
709
- align-items: center;
710
- justify-content: flex-end;
711
- margin-right: 1.25rem;
712
- margin-left: 1rem;
572
+ .ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__region-icon {
573
+ background-color: transparent;
574
+ padding: 0;
713
575
  }
714
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobile {
576
+ .ids-header-1177-region-picker-mobile .ids-header-1177-region-picker-mobile__region-icon::after {
715
577
  display: none;
716
- background-color: var(--IDS-COLOR-PRIMARY-90);
717
- flex-wrap: wrap;
718
- flex: 1 1 auto;
719
- box-sizing: border-box;
720
- height: 3.125rem;
721
578
  }
722
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__skip-to-content ::slotted(a),
723
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__skip-to-content a {
724
- display: flex;
725
- align-items: center;
726
- justify-content: center;
727
- padding: 0 1rem;
728
- height: 3rem;
729
- text-align: center;
730
- background-color: var(--IDS-COLOR-NEUTRAL-100);
731
- box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.625rem 0;
732
- z-index: 20;
733
- font-family: var(--IDS-LINK__FONT-FAMILY);
734
- font-size: 1rem;
735
- color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
736
- text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
737
- text-decoration: underline;
738
- position: absolute;
739
- right: 0;
740
- left: 0;
741
- transform: translateY(-300%);
742
- transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
579
+ .ids-header-1177-region-picker-mobile.ids-header-1177-region-picker-mobile--selected-region .ids-header-1177-region-picker-mobile__button {
580
+ color: var(--IDS-HEADER-1177-REGION-PICKER--SELECTED__TEXT-COLOR-MOBILE);
581
+ padding: 0 1.75rem 0 0.25rem;
743
582
  }
744
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__skip-to-content ::slotted(a:focus),
745
- header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__skip-to-content a:focus {
746
- transform: translateY(0);
747
- transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
748
- color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
749
- text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
750
- outline-offset: -0.375rem !important;
583
+ .ids-header-1177-region-picker-mobile.ids-header-1177-region-picker-mobile--selected-region .ids-header-1177-region-picker-mobile__button::before {
584
+ display: none;
585
+ }
586
+ .ids-header-1177-region-picker-mobile.ids-header-1177-region-picker-mobile--selected-region .ids-header-1177-region-picker-mobile__button::after {
587
+ color: var(--IDS-HEADER-1177-REGION-PICKER--SELECTED__TEXT-COLOR-MOBILE);
751
588
  }
752
- header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-header-1177__inner {
753
- max-width: 100% !important;
589
+ .ids-header-1177-region-picker-mobile.ids-header-1177-region-picker-mobile--selected-region .ids-header-1177-region-picker-mobile__button .ids-header-1177-region-picker-mobile__button-text {
590
+ display: none;
591
+ }
592
+ @media (min-width: 1024px) {
593
+ .ids-header-1177-region-picker-mobile {
594
+ display: none;
595
+ }
754
596
  }
755
597
 
756
- .ids-header-1177--unresponsive .ids-header-1177__items__item {
598
+ .ids-header-1177--unresponsive .ids-header-1177-item {
757
599
  display: flex;
758
600
  flex-direction: column;
759
601
  align-items: center;
@@ -764,40 +606,47 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
764
606
  position: relative;
765
607
  background-color: transparent;
766
608
  border: 0;
767
- min-height: 2rem;
768
609
  cursor: pointer;
769
610
  }
770
- .ids-header-1177--unresponsive .ids-header-1177__items__item:focus-within {
611
+ .ids-header-1177--unresponsive .ids-header-1177-item:focus-within {
771
612
  outline: var(--IDS-FOCUS__OUTLINE);
772
613
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
773
614
  }
774
- .ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-icon {
615
+ .ids-header-1177--unresponsive .ids-header-1177-item .ids-header-1177-item-icon {
775
616
  max-width: 1.5rem;
776
617
  max-height: 1.5rem;
777
618
  margin-left: 0.25rem;
778
619
  margin-right: 0.25rem;
779
620
  display: flex;
780
621
  }
781
- .ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
782
- .ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-icon [class^=ids-icon-] {
622
+ .ids-header-1177--unresponsive .ids-header-1177-item .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
623
+ .ids-header-1177--unresponsive .ids-header-1177-item .ids-header-1177-item-icon [class^=ids-icon-] {
783
624
  font-size: 1.5rem;
784
- color: var(--IDS-COLOR-PRIMARY-40);
625
+ color: var(--IDS-HEADER-1177-ITEM__ICON-COLOR);
785
626
  }
786
- .ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-text {
787
- color: var(--IDS-COLOR-PRIMARY-35);
627
+ .ids-header-1177--unresponsive .ids-header-1177-item .ids-header-1177-item-text {
628
+ color: var(--IDS-HEADER-1177-ITEM__COLOR);
788
629
  font-size: 1.125rem;
789
630
  text-align: center;
790
631
  margin-top: 0.5rem;
791
632
  }
792
- .ids-header-1177--unresponsive .ids-header-1177__items__item:hover {
793
- color: var(--IDS-COLOR-PRIMARY-35);
633
+ .ids-header-1177--unresponsive .ids-header-1177-item:hover {
634
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
635
+ }
636
+ .ids-header-1177--unresponsive .ids-header-1177-item:hover .ids-header-1177-item-text {
637
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
638
+ text-underline-offset: 0.125rem;
639
+ text-decoration: underline;
640
+ }
641
+ .ids-header-1177--unresponsive .ids-header-1177-item:hover .ids-header-1177-item-icon {
642
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
794
643
  }
795
- .ids-header-1177--unresponsive .ids-header-1177__items__item:hover .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]):before,
796
- .ids-header-1177--unresponsive .ids-header-1177__items__item:hover .ids-header-1177__items__item-icon [class^=ids-icon-]:before {
797
- color: var(--IDS-COLOR-PRIMARY-35);
644
+ .ids-header-1177--unresponsive .ids-header-1177-item:hover .ids-header-1177-item-icon ::slotted([class^=ids-icon-]):before,
645
+ .ids-header-1177--unresponsive .ids-header-1177-item:hover .ids-header-1177-item-icon [class^=ids-icon-]:before {
646
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
798
647
  }
799
648
 
800
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item {
649
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item {
801
650
  display: flex;
802
651
  flex-direction: column;
803
652
  align-items: center;
@@ -808,69 +657,87 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
808
657
  position: relative;
809
658
  background-color: transparent;
810
659
  border: 0;
811
- min-height: 2rem;
812
660
  cursor: pointer;
813
661
  }
814
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item:focus-within {
662
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:focus-within {
815
663
  outline: var(--IDS-FOCUS__OUTLINE);
816
664
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
817
665
  }
818
666
  @media (max-width: 1024px) {
819
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item {
820
- margin-left: 0.5rem;
667
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item {
668
+ gap: 0.5rem;
669
+ margin-left: 0.75rem;
670
+ flex-direction: row;
671
+ box-sizing: border-box;
672
+ height: 2rem;
821
673
  }
822
674
  }
823
675
  @media (max-width: 1024px) {
824
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item:not(.ids-header-1177__items__item--mobile) {
825
- outline: var(--IDS-FOCUS__OUTLINE);
826
- outline-offset: -0.25rem !important;
676
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:not(.ids-header-1177-item--mobile) {
827
677
  display: none;
828
678
  }
829
679
  }
830
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon {
680
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon {
831
681
  max-width: 1.5rem;
832
682
  max-height: 1.5rem;
833
683
  margin-left: 0.25rem;
834
684
  margin-right: 0.25rem;
835
685
  display: flex;
836
686
  }
837
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
838
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon [class^=ids-icon-] {
687
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
688
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon [class^=ids-icon-] {
839
689
  font-size: 1.5rem;
840
- color: var(--IDS-COLOR-PRIMARY-40);
690
+ color: var(--IDS-HEADER-1177-ITEM__ICON-COLOR);
841
691
  }
842
692
  @media (min-width: 1024px) {
843
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon {
693
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon {
844
694
  max-width: 2rem;
845
695
  max-height: 2rem;
846
696
  margin-left: 0;
847
697
  margin-right: 0;
848
698
  }
849
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
850
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon [class^=ids-icon-] {
699
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
700
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-icon [class^=ids-icon-] {
851
701
  font-size: 2rem;
852
702
  }
853
703
  }
854
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-text {
855
- color: var(--IDS-COLOR-PRIMARY-35);
704
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-text {
705
+ color: var(--IDS-HEADER-1177-ITEM__COLOR);
856
706
  font-size: 1.125rem;
857
707
  text-align: center;
858
708
  margin-top: 0.5rem;
859
709
  }
860
710
  @media (max-width: 1024px) {
861
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-text {
711
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item .ids-header-1177-item-text {
712
+ margin-top: 0;
713
+ font-size: 0.875rem;
714
+ }
715
+ }
716
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:not(.ids-header-1177-item--keep-text) {
717
+ gap: 0;
718
+ }
719
+ @media (max-width: 1024px) {
720
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:not(.ids-header-1177-item--keep-text) .ids-header-1177-item-text {
862
721
  display: none;
863
722
  }
864
723
  }
865
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item:hover {
866
- color: var(--IDS-COLOR-PRIMARY-35);
724
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:hover {
725
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
867
726
  }
868
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item:hover .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]):before,
869
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item:hover .ids-header-1177__items__item-icon [class^=ids-icon-]:before {
870
- color: var(--IDS-COLOR-PRIMARY-35);
727
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:hover .ids-header-1177-item-text {
728
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
729
+ text-underline-offset: 0.125rem;
730
+ text-decoration: underline;
731
+ }
732
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:hover .ids-header-1177-item-icon {
733
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
734
+ }
735
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:hover .ids-header-1177-item-icon ::slotted([class^=ids-icon-]):before,
736
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-item:hover .ids-header-1177-item-icon [class^=ids-icon-]:before {
737
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
871
738
  }
872
739
 
873
- :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) {
740
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) {
874
741
  display: flex;
875
742
  flex-direction: column;
876
743
  align-items: center;
@@ -881,68 +748,86 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
881
748
  position: relative;
882
749
  background-color: transparent;
883
750
  border: 0;
884
- min-height: 2rem;
885
751
  cursor: pointer;
886
752
  }
887
- :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive):focus-within {
753
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):focus-within {
888
754
  outline: var(--IDS-FOCUS__OUTLINE);
889
755
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
890
756
  }
891
757
  @media (max-width: 1024px) {
892
- :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) {
893
- margin-left: 0.5rem;
758
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) {
759
+ gap: 0.5rem;
760
+ margin-left: 0.75rem;
761
+ flex-direction: row;
762
+ box-sizing: border-box;
763
+ height: 2rem;
894
764
  }
895
765
  }
896
766
  @media (max-width: 1024px) {
897
- :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive):not(.ids-header-1177__items__item--mobile) {
898
- outline: var(--IDS-FOCUS__OUTLINE);
899
- outline-offset: -0.25rem !important;
767
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):not(.ids-header-1177-item--mobile) {
900
768
  display: none;
901
769
  }
902
770
  }
903
- :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon {
771
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon {
904
772
  max-width: 1.5rem;
905
773
  max-height: 1.5rem;
906
774
  margin-left: 0.25rem;
907
775
  margin-right: 0.25rem;
908
776
  display: flex;
909
777
  }
910
- :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
911
- :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon [class^=ids-icon-] {
778
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
779
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon [class^=ids-icon-] {
912
780
  font-size: 1.5rem;
913
- color: var(--IDS-COLOR-PRIMARY-40);
781
+ color: var(--IDS-HEADER-1177-ITEM__ICON-COLOR);
914
782
  }
915
783
  @media (min-width: 1024px) {
916
- :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon {
784
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon {
917
785
  max-width: 2rem;
918
786
  max-height: 2rem;
919
787
  margin-left: 0;
920
788
  margin-right: 0;
921
789
  }
922
- :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
923
- :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon [class^=ids-icon-] {
790
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
791
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-icon [class^=ids-icon-] {
924
792
  font-size: 2rem;
925
793
  }
926
794
  }
927
- :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-text {
928
- color: var(--IDS-COLOR-PRIMARY-35);
795
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-text {
796
+ color: var(--IDS-HEADER-1177-ITEM__COLOR);
929
797
  font-size: 1.125rem;
930
798
  text-align: center;
931
799
  margin-top: 0.5rem;
932
800
  }
933
801
  @media (max-width: 1024px) {
934
- :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-text {
802
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive) .ids-header-1177-item-text {
803
+ margin-top: 0;
804
+ font-size: 0.875rem;
805
+ }
806
+ }
807
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):not(.ids-header-1177-item--keep-text) {
808
+ gap: 0;
809
+ }
810
+ @media (max-width: 1024px) {
811
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):not(.ids-header-1177-item--keep-text) .ids-header-1177-item-text {
935
812
  display: none;
936
813
  }
937
814
  }
938
- :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive):hover {
939
- color: var(--IDS-COLOR-PRIMARY-35);
815
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover {
816
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
817
+ }
818
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-text {
819
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
820
+ text-underline-offset: 0.125rem;
821
+ text-decoration: underline;
822
+ }
823
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-icon {
824
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
940
825
  }
941
- :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive):hover .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]):before,
942
- :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive):hover .ids-header-1177__items__item-icon [class^=ids-icon-]:before {
943
- color: var(--IDS-COLOR-PRIMARY-35);
826
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-icon ::slotted([class^=ids-icon-]):before,
827
+ :host .ids-header-1177-item:not(.ids-header-1177-item--unresponsive):hover .ids-header-1177-item-icon [class^=ids-icon-]:before {
828
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
944
829
  }
945
- :host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive {
830
+ :host .ids-header-1177-item.ids-header-1177-item--unresponsive {
946
831
  display: flex;
947
832
  flex-direction: column;
948
833
  align-items: center;
@@ -953,44 +838,216 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
953
838
  position: relative;
954
839
  background-color: transparent;
955
840
  border: 0;
956
- min-height: 2rem;
957
841
  cursor: pointer;
958
842
  }
959
- :host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive:focus-within {
843
+ :host .ids-header-1177-item.ids-header-1177-item--unresponsive:focus-within {
960
844
  outline: var(--IDS-FOCUS__OUTLINE);
961
845
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
962
846
  }
963
- :host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-icon {
847
+ :host .ids-header-1177-item.ids-header-1177-item--unresponsive .ids-header-1177-item-icon {
964
848
  max-width: 1.5rem;
965
849
  max-height: 1.5rem;
966
850
  margin-left: 0.25rem;
967
851
  margin-right: 0.25rem;
968
852
  display: flex;
969
853
  }
970
- :host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
971
- :host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-icon [class^=ids-icon-] {
854
+ :host .ids-header-1177-item.ids-header-1177-item--unresponsive .ids-header-1177-item-icon ::slotted([class^=ids-icon-]),
855
+ :host .ids-header-1177-item.ids-header-1177-item--unresponsive .ids-header-1177-item-icon [class^=ids-icon-] {
972
856
  font-size: 1.5rem;
973
- color: var(--IDS-COLOR-PRIMARY-40);
857
+ color: var(--IDS-HEADER-1177-ITEM__ICON-COLOR);
974
858
  }
975
- :host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-text {
976
- color: var(--IDS-COLOR-PRIMARY-35);
859
+ :host .ids-header-1177-item.ids-header-1177-item--unresponsive .ids-header-1177-item-text {
860
+ color: var(--IDS-HEADER-1177-ITEM__COLOR);
977
861
  font-size: 1.125rem;
978
862
  text-align: center;
979
863
  margin-top: 0.5rem;
980
864
  }
981
- :host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive:hover {
982
- color: var(--IDS-COLOR-PRIMARY-35);
865
+ :host .ids-header-1177-item.ids-header-1177-item--unresponsive:hover {
866
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
867
+ }
868
+ :host .ids-header-1177-item.ids-header-1177-item--unresponsive:hover .ids-header-1177-item-text {
869
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
870
+ text-underline-offset: 0.125rem;
871
+ text-decoration: underline;
983
872
  }
984
- :host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive:hover .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]):before,
985
- :host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive:hover .ids-header-1177__items__item-icon [class^=ids-icon-]:before {
986
- color: var(--IDS-COLOR-PRIMARY-35);
873
+ :host .ids-header-1177-item.ids-header-1177-item--unresponsive:hover .ids-header-1177-item-icon {
874
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
875
+ }
876
+ :host .ids-header-1177-item.ids-header-1177-item--unresponsive:hover .ids-header-1177-item-icon ::slotted([class^=ids-icon-]):before,
877
+ :host .ids-header-1177-item.ids-header-1177-item--unresponsive:hover .ids-header-1177-item-icon [class^=ids-icon-]:before {
878
+ color: var(--IDS-HEADER-1177-ITEM__HOVER-COLOR);
879
+ }
880
+
881
+ :root {
882
+ --IDS-FONT-FAMILY-BASE: "Open Sans";
883
+ --IDS-FONT-FAMILY-HEADING: "Inter";
884
+ --IDS-FONT-COLOR: var(--ids-color-surface-text-on-default);
885
+ --IDS-HEADING-XXL__COLOR: var(--ids-color-heading-text-xxl);
886
+ --IDS-HEADING-XXL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
887
+ --IDS-HEADING-XXL__FONT-SIZE: 2rem;
888
+ --IDS-HEADING-XXL__LINE-HEIGHT: 2.5rem;
889
+ --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 3rem;
890
+ --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.25rem;
891
+ --IDS-HEADING-XXL__FONT-WEIGHT: 700;
892
+ --IDS-HEADING-XXL__LETTER-SPACING: -0.052rem;
893
+ --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: -0.078rem;
894
+ --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.875rem;
895
+ --IDS-HEADING-XL__COLOR: var(--ids-color-heading-text-xl);
896
+ --IDS-HEADING-XL__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
897
+ --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
898
+ --IDS-HEADING-XL__LINE-HEIGHT: 2.125rem;
899
+ --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2.25rem;
900
+ --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.625rem;
901
+ --IDS-HEADING-XL__FONT-WEIGHT: 700;
902
+ --IDS-HEADING-XL__LETTER-SPACING: -0.031rem;
903
+ --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: -0.063rem;
904
+ --IDS-HEADING-XL__MARGIN-BOTTOM: 1.875rem;
905
+ --IDS-HEADING-L__COLOR: var(--ids-color-heading-text-l);
906
+ --IDS-HEADING-L__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
907
+ --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
908
+ --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
909
+ --IDS-HEADING-L__FONT-SIZE: 1.5rem;
910
+ --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
911
+ --IDS-HEADING-L__FONT-WEIGHT: 700;
912
+ --IDS-HEADING-L__LETTER-SPACING: -0.025rem;
913
+ --IDS-HEADING-L__LETTER-SPACING-DESKTOP: -0.044rem;
914
+ --IDS-HEADING-L__MARGIN-BOTTOM: 1.875rem;
915
+ --IDS-HEADING-M__COLOR: var(--ids-color-heading-text-m);
916
+ --IDS-HEADING-M__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
917
+ --IDS-HEADING-M__FONT-SIZE: 1.375rem;
918
+ --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
919
+ --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
920
+ --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 1.875rem;
921
+ --IDS-HEADING-M__FONT-WEIGHT: 700;
922
+ --IDS-HEADING-M__LETTER-SPACING: -0.019rem;
923
+ --IDS-HEADING-M__LETTER-SPACING-DESKTOP: -0.031rem;
924
+ --IDS-HEADING-S__COLOR: var(--ids-color-heading-text-s);
925
+ --IDS-HEADING-S__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
926
+ --IDS-HEADING-S__FONT-SIZE: 1.25rem;
927
+ --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
928
+ --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
929
+ --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.5rem;
930
+ --IDS-HEADING-S__FONT-WEIGHT: 700;
931
+ --IDS-HEADING-S__LETTER-SPACING: -0.013rem;
932
+ --IDS-HEADING-S__LETTER-SPACING-DESKTOP: -0.025rem;
933
+ --IDS-HEADING-XS__COLOR: var(--ids-color-heading-text-xs);
934
+ --IDS-HEADING-XS__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
935
+ --IDS-HEADING-XS__FONT-SIZE: 1rem;
936
+ --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
937
+ --IDS-HEADING-XS__FONT-WEIGHT: 700;
938
+ --IDS-HEADING-XS__LETTER-SPACING: 0;
939
+ --IDS-ANCHOR__COLOR: var(--ids-color-interactive-text-default);
940
+ --IDS-ANCHOR__HOVER-COLOR: var(--ids-color-interactive-text-hover);
941
+ --IDS-PREAMBLE__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
942
+ --IDS-PREAMBLE__FONT-SIZE: 1.125rem;
943
+ --IDS-PREAMBLE__LINE-HEIGHT: 1.75rem;
944
+ --IDS-PREAMBLE__FONT-SIZE-DESKTOP: 1.375rem;
945
+ --IDS-PREAMBLE__LINE-HEIGHT-DESKTOP: 2.25rem;
946
+ --IDS-BODY__FONT-FAMILY: var(--IDS-FONT-FAMILY-BASE);
947
+ --IDS-BODY__FONT-SIZE: 1rem;
948
+ --IDS-BODY__LINE-HEIGHT: 1.5rem;
949
+ --IDS-BODY--DISABLED__COLOR: var(--ids-color-interactive-text-disabled);
950
+ --IDS-PAGE-LIST__COLOR: var(--ids-color-brand-text-primary);
951
+ --IDS-PAGE-LIST__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
952
+ --IDS-PAGE-LIST__FONT-SIZE: 1.25rem;
953
+ --IDS-PAGE-LIST__LINE-HEIGHT: 1.5rem;
954
+ --IDS-PAGE-LIST__FONT-WEIGHT: 700;
955
+ --IDS-PAGE-LIST__LETTER-SPACING: -0.025rem;
956
+ --IDS-BULLET-LIST__MARKER-COLOR: var(--ids-color-brand-text-primary);
957
+ --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: bold;
958
+ --IDS-BULLET-LIST__LINE-HEIGHT: 1.5rem;
959
+ --IDS-DIVIDER__COLOR: var(--ids-color-surface-border-default);
960
+ }
961
+ :root.ids--1177-pro, :root.ids--1177-admin {
962
+ --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
963
+ }
964
+ :root.ids--inera, :root.ids--inera-admin {
965
+ --IDS-FONT-FAMILY-BASE: "Open Sans";
966
+ --IDS-FONT-FAMILY-HEADING: "Poppins";
967
+ --IDS-HEADING-XXL__FONT-SIZE: 1.875rem;
968
+ --IDS-HEADING-XXL__LINE-HEIGHT: 2.375rem;
969
+ --IDS-HEADING-XXL__FONT-SIZE-DESKTOP: 2.5rem;
970
+ --IDS-HEADING-XXL__LINE-HEIGHT-DESKTOP: 3.125rem;
971
+ --IDS-HEADING-XXL__FONT-WEIGHT: 600;
972
+ --IDS-HEADING-XXL__LETTER-SPACING: inherit;
973
+ --IDS-HEADING-XXL__LETTER-SPACING-DESKTOP: inherit;
974
+ --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
975
+ --IDS-HEADING-XL__FONT-SIZE: 1.625rem;
976
+ --IDS-HEADING-XL__LINE-HEIGHT: 2rem;
977
+ --IDS-HEADING-XL__FONT-SIZE-DESKTOP: 2rem;
978
+ --IDS-HEADING-XL__LINE-HEIGHT-DESKTOP: 2.5rem;
979
+ --IDS-HEADING-XL__FONT-WEIGHT: 600;
980
+ --IDS-HEADING-XL__LETTER-SPACING: inherit;
981
+ --IDS-HEADING-XL__LETTER-SPACING-DESKTOP: inherit;
982
+ --IDS-HEADING-XL__MARGIN-BOTTOM: 1.25rem;
983
+ --IDS-HEADING-L__FONT-SIZE: 1.5rem;
984
+ --IDS-HEADING-L__LINE-HEIGHT: 1.875rem;
985
+ --IDS-HEADING-L__FONT-SIZE-DESKTOP: 1.75rem;
986
+ --IDS-HEADING-L__LINE-HEIGHT-DESKTOP: 2.25rem;
987
+ --IDS-HEADING-L__FONT-WEIGHT: 600;
988
+ --IDS-HEADING-L__LETTER-SPACING: inherit;
989
+ --IDS-HEADING-L__LETTER-SPACING-DESKTOP: inherit;
990
+ --IDS-HEADING-L__MARGIN-BOTTOM: 1.25rem;
991
+ --IDS-HEADING-M__FONT-SIZE: 1.375rem;
992
+ --IDS-HEADING-M__LINE-HEIGHT: 1.75rem;
993
+ --IDS-HEADING-M__FONT-SIZE-DESKTOP: 1.5rem;
994
+ --IDS-HEADING-M__LINE-HEIGHT-DESKTOP: 2rem;
995
+ --IDS-HEADING-M__FONT-WEIGHT: 600;
996
+ --IDS-HEADING-M__LETTER-SPACING: inherit;
997
+ --IDS-HEADING-M__LETTER-SPACING-DESKTOP: inherit;
998
+ --IDS-HEADING-S__FONT-SIZE: 1.25rem;
999
+ --IDS-HEADING-S__LINE-HEIGHT: 1.5rem;
1000
+ --IDS-HEADING-S__FONT-SIZE-DESKTOP: 1.25rem;
1001
+ --IDS-HEADING-S__LINE-HEIGHT-DESKTOP: 1.625rem;
1002
+ --IDS-HEADING-S__FONT-WEIGHT: 600;
1003
+ --IDS-HEADING-S__LETTER-SPACING: inherit;
1004
+ --IDS-HEADING-S__LETTER-SPACING-DESKTOP: inherit;
1005
+ --IDS-HEADING-XS__FONT-SIZE: 1rem;
1006
+ --IDS-HEADING-XS__LINE-HEIGHT: 1.25rem;
1007
+ --IDS-HEADING-XS__FONT-WEIGHT: 600;
1008
+ --IDS-HEADING-XS__LETTER-SPACING: inherit;
1009
+ --IDS-BODY__LINE-HEIGHT: 1.625rem;
1010
+ --IDS-BODY--DISABLED__COLOR: var(--ids-color-interactive-text-disabled);
1011
+ --IDS-PAGE-LIST__FONT-WEIGHT: 600;
1012
+ --IDS-PAGE-LIST__LETTER-SPACING: 0;
1013
+ --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: normal;
1014
+ --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
1015
+ --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
1016
+ }
1017
+ :root.ids--dark {
1018
+ --IDS-PAGE-LIST__COLOR: var(--ids-color-navigation-text-default);
1019
+ }
1020
+ :root.ids--dark.ids--1177-pro, :root.ids--dark.ids--1177-admin, :root.ids--dark.ids--inera, :root.ids--dark.ids--inera-admin {
1021
+ --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
987
1022
  }
988
1023
 
989
1024
  .ids-header-1177--unresponsive .ids-header-1177-avatar {
990
1025
  justify-self: flex-end;
1026
+ justify-content: flex-end;
991
1027
  display: flex;
992
1028
  align-items: center;
993
1029
  flex-wrap: wrap;
1030
+ flex-grow: 1;
1031
+ margin-left: 0.5rem;
1032
+ }
1033
+ .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__avatar {
1034
+ position: relative;
1035
+ justify-self: flex-end;
1036
+ justify-content: flex-end;
1037
+ display: flex;
1038
+ align-items: center;
1039
+ flex-wrap: wrap;
1040
+ flex-grow: 1;
1041
+ margin-top: 0.0625rem;
1042
+ }
1043
+ .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu-wrapper {
1044
+ position: absolute;
1045
+ left: 0;
1046
+ right: 0;
1047
+ top: 50%;
1048
+ transform: translateY(-50%);
1049
+ display: flex;
1050
+ justify-content: flex-end;
994
1051
  }
995
1052
  .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button {
996
1053
  position: relative;
@@ -998,13 +1055,12 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
998
1055
  align-items: center;
999
1056
  justify-content: center;
1000
1057
  min-width: 8.5rem;
1001
- max-width: 22rem;
1002
- gap: 1rem;
1058
+ max-width: 100%;
1003
1059
  padding: 0.75rem 1.25rem 0.75rem 1.75rem;
1004
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1060
+ background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
1005
1061
  border-radius: 2rem;
1006
1062
  overflow: hidden;
1007
- border: 0.0625rem solid var(--IDS-COLOR-NEUTRAL-90);
1063
+ border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__BORDER-COLOR);
1008
1064
  cursor: pointer;
1009
1065
  }
1010
1066
  .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:focus {
@@ -1021,7 +1077,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1021
1077
  -moz-osx-font-smoothing: grayscale;
1022
1078
  content: "\e923";
1023
1079
  font-size: 1.75rem;
1024
- color: var(--IDS-COLOR-PRIMARY-40);
1080
+ color: var(--IDS-HEADER-1177-AVATAR__ICON-COLOR);
1025
1081
  left: 1.5rem;
1026
1082
  top: 50%;
1027
1083
  transform: translateY(-50%);
@@ -1037,18 +1093,24 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1037
1093
  content: "\e936";
1038
1094
  font-size: 1rem;
1039
1095
  padding: 0.25rem;
1040
- color: var(--IDS-COLOR-PRIMARY-40);
1041
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1096
+ color: var(--IDS-HEADER-1177-AVATAR__ICON-COLOR);
1097
+ background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
1042
1098
  right: 1.25rem;
1043
1099
  top: 50%;
1044
1100
  transform: translateY(-50%);
1045
1101
  }
1102
+ .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:hover:before, .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:hover::after {
1103
+ color: var(--IDS-HEADER-1177-AVATAR__ICON-HOVER-COLOR);
1104
+ }
1105
+ .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button:focus {
1106
+ z-index: 20;
1107
+ }
1046
1108
  .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
1047
1109
  content: "\e939";
1048
1110
  }
1049
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button .ids-header-1177-avatar-content__name {
1111
+ .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
1050
1112
  text-align: start;
1051
- padding: 0 1.5rem 0 2rem;
1113
+ padding: 0 1.75rem 0 2rem;
1052
1114
  font-size: 1rem;
1053
1115
  line-height: 1.5rem;
1054
1116
  white-space: nowrap;
@@ -1056,62 +1118,82 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1056
1118
  position: relative;
1057
1119
  text-overflow: ellipsis;
1058
1120
  text-align: left;
1059
- color: var(--IDS-COLOR-NEUTRAL-20);
1121
+ color: var(--IDS-HEADER-1177-AVATAR__COLOR);
1060
1122
  }
1061
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__dropdown-wrapper {
1062
- position: relative;
1063
- }
1064
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__dropdown {
1123
+ .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu {
1065
1124
  display: none;
1066
1125
  position: absolute;
1067
- top: calc(100% + 0.25rem);
1126
+ top: calc(100% + 0.0625rem);
1068
1127
  left: auto;
1069
1128
  right: 0;
1070
1129
  z-index: 12;
1071
- width: 20rem;
1072
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1130
+ background-color: var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BACKGROUND-COLOR);
1131
+ border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BORDER-COLOR);
1073
1132
  padding: 1.25rem;
1074
1133
  box-sizing: border-box;
1075
1134
  border-radius: 0.625rem;
1076
- box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.3);
1135
+ box-shadow: var(--IDS-BOX-SHADOW-BOTTOM);
1136
+ width: 100%;
1137
+ max-width: 20rem;
1077
1138
  }
1078
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__dropdown.ids-header-1177-avatar__dropdown--expanded {
1139
+ .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
1079
1140
  display: block;
1080
1141
  }
1081
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__agent p,
1082
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__agent ::slotted(p) {
1142
+ .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p,
1143
+ .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent ::slotted(p) {
1083
1144
  font-style: normal;
1084
- color: var(--IDS-COLOR-NEUTRAL-20);
1145
+ color: var(--IDS-FONT-COLOR);
1085
1146
  font-family: var(--IDS-BODY__FONT-FAMILY);
1086
1147
  font-size: var(--IDS-BODY__FONT-SIZE);
1087
1148
  line-height: var(--IDS-BODY__LINE-HEIGHT);
1088
1149
  font-weight: 400;
1089
1150
  letter-spacing: 0;
1090
1151
  margin-top: 0.75rem !important;
1152
+ margin-bottom: 0.75rem !important;
1091
1153
  }
1092
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-separator {
1093
- height: 0.0625rem;
1094
- width: 100%;
1095
- background-color: var(--IDS-COLOR-NEUTRAL-50);
1096
- margin: 1.5rem 0;
1097
- }
1098
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-links {
1154
+ .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
1099
1155
  display: flex;
1100
1156
  flex-direction: column;
1101
- gap: 1rem;
1157
+ gap: 1.5rem;
1158
+ margin-top: 1.5rem;
1102
1159
  }
1103
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-links ::slotted(.ids-header-1177-avatar__menu-links-separator),
1104
- .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-links .ids-header-1177-avatar__menu-links-separator {
1105
- height: 0.0625rem;
1160
+ .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu hr,
1161
+ .ids-header-1177--unresponsive .ids-header-1177-avatar .ids-header-1177-avatar__menu ::slotted(hr) {
1106
1162
  width: 100%;
1107
- background-color: var(--IDS-COLOR-NEUTRAL-90);
1163
+ height: 0.0625rem;
1164
+ display: block;
1165
+ margin: 0;
1166
+ border: 0;
1167
+ border-top: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__MENU-SEPARATOR-COLOR);
1108
1168
  }
1109
1169
 
1110
1170
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar {
1111
1171
  justify-self: flex-end;
1172
+ justify-content: flex-end;
1173
+ display: flex;
1174
+ align-items: center;
1175
+ flex-wrap: wrap;
1176
+ flex-grow: 1;
1177
+ margin-left: 0.5rem;
1178
+ }
1179
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__avatar {
1180
+ position: relative;
1181
+ justify-self: flex-end;
1182
+ justify-content: flex-end;
1112
1183
  display: flex;
1113
1184
  align-items: center;
1114
1185
  flex-wrap: wrap;
1186
+ flex-grow: 1;
1187
+ margin-top: 0.0625rem;
1188
+ }
1189
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu-wrapper {
1190
+ position: absolute;
1191
+ left: 0;
1192
+ right: 0;
1193
+ top: 50%;
1194
+ transform: translateY(-50%);
1195
+ display: flex;
1196
+ justify-content: flex-end;
1115
1197
  }
1116
1198
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button {
1117
1199
  position: relative;
@@ -1119,13 +1201,12 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1119
1201
  align-items: center;
1120
1202
  justify-content: center;
1121
1203
  min-width: 8.5rem;
1122
- max-width: 22rem;
1123
- gap: 1rem;
1204
+ max-width: 100%;
1124
1205
  padding: 0.75rem 1.25rem 0.75rem 1.75rem;
1125
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1206
+ background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
1126
1207
  border-radius: 2rem;
1127
1208
  overflow: hidden;
1128
- border: 0.0625rem solid var(--IDS-COLOR-NEUTRAL-90);
1209
+ border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__BORDER-COLOR);
1129
1210
  cursor: pointer;
1130
1211
  }
1131
1212
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:focus {
@@ -1142,7 +1223,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1142
1223
  -moz-osx-font-smoothing: grayscale;
1143
1224
  content: "\e923";
1144
1225
  font-size: 1.75rem;
1145
- color: var(--IDS-COLOR-PRIMARY-40);
1226
+ color: var(--IDS-HEADER-1177-AVATAR__ICON-COLOR);
1146
1227
  left: 1.5rem;
1147
1228
  top: 50%;
1148
1229
  transform: translateY(-50%);
@@ -1158,12 +1239,18 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1158
1239
  content: "\e936";
1159
1240
  font-size: 1rem;
1160
1241
  padding: 0.25rem;
1161
- color: var(--IDS-COLOR-PRIMARY-40);
1162
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1242
+ color: var(--IDS-HEADER-1177-AVATAR__ICON-COLOR);
1243
+ background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
1163
1244
  right: 1.25rem;
1164
1245
  top: 50%;
1165
1246
  transform: translateY(-50%);
1166
1247
  }
1248
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:hover:before, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:hover::after {
1249
+ color: var(--IDS-HEADER-1177-AVATAR__ICON-HOVER-COLOR);
1250
+ }
1251
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:focus {
1252
+ z-index: 20;
1253
+ }
1167
1254
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
1168
1255
  content: "\e939";
1169
1256
  }
@@ -1174,8 +1261,6 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1174
1261
  padding: 0.375rem 0.5rem;
1175
1262
  margin-left: 0.75rem;
1176
1263
  margin-right: 0;
1177
- border: 0.0625rem solid transparent;
1178
- max-width: 18rem;
1179
1264
  }
1180
1265
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button:before {
1181
1266
  font-size: 1.25rem;
@@ -1185,24 +1270,9 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1185
1270
  right: 0.5rem;
1186
1271
  }
1187
1272
  }
1188
- @media (max-width: 640px) {
1189
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button {
1190
- max-width: 14rem;
1191
- }
1192
- }
1193
- @media (max-width: 480px) {
1194
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button {
1195
- max-width: 12rem;
1196
- }
1197
- }
1198
- @media (max-width: 360px) {
1199
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button {
1200
- max-width: 9rem;
1201
- }
1202
- }
1203
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button .ids-header-1177-avatar-content__name {
1273
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
1204
1274
  text-align: start;
1205
- padding: 0 1.5rem 0 2rem;
1275
+ padding: 0 1.75rem 0 2rem;
1206
1276
  font-size: 1rem;
1207
1277
  line-height: 1.5rem;
1208
1278
  white-space: nowrap;
@@ -1210,83 +1280,106 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1210
1280
  position: relative;
1211
1281
  text-overflow: ellipsis;
1212
1282
  text-align: left;
1213
- color: var(--IDS-COLOR-NEUTRAL-20);
1283
+ color: var(--IDS-HEADER-1177-AVATAR__COLOR);
1214
1284
  }
1215
1285
  @media (max-width: 1024px) {
1216
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button .ids-header-1177-avatar-content__name {
1286
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
1217
1287
  font-size: 0.875rem;
1218
1288
  line-height: 1.25rem;
1219
1289
  }
1220
1290
  }
1221
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__dropdown-wrapper {
1222
- position: relative;
1223
- }
1224
- @media (max-width: 1024px) {
1225
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__dropdown-wrapper {
1226
- position: initial;
1227
- }
1228
- }
1229
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__dropdown {
1291
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu {
1230
1292
  display: none;
1231
1293
  position: absolute;
1232
- top: calc(100% + 0.25rem);
1294
+ top: calc(100% + 0.0625rem);
1233
1295
  left: auto;
1234
1296
  right: 0;
1235
1297
  z-index: 12;
1236
- width: 20rem;
1237
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1298
+ background-color: var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BACKGROUND-COLOR);
1299
+ border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BORDER-COLOR);
1238
1300
  padding: 1.25rem;
1239
1301
  box-sizing: border-box;
1240
1302
  border-radius: 0.625rem;
1241
- box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.3);
1303
+ box-shadow: var(--IDS-BOX-SHADOW-BOTTOM);
1304
+ width: 100%;
1305
+ max-width: 20rem;
1242
1306
  }
1243
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__dropdown.ids-header-1177-avatar__dropdown--expanded {
1307
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
1244
1308
  display: block;
1245
1309
  }
1246
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__agent p,
1247
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__agent ::slotted(p) {
1310
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p,
1311
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent ::slotted(p) {
1248
1312
  font-style: normal;
1249
- color: var(--IDS-COLOR-NEUTRAL-20);
1313
+ color: var(--IDS-FONT-COLOR);
1250
1314
  font-family: var(--IDS-BODY__FONT-FAMILY);
1251
1315
  font-size: var(--IDS-BODY__FONT-SIZE);
1252
1316
  line-height: var(--IDS-BODY__LINE-HEIGHT);
1253
1317
  font-weight: 400;
1254
1318
  letter-spacing: 0;
1255
1319
  margin-top: 0.75rem !important;
1320
+ margin-bottom: 0.75rem !important;
1256
1321
  }
1257
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-separator {
1258
- height: 0.0625rem;
1259
- width: 100%;
1260
- background-color: var(--IDS-COLOR-NEUTRAL-50);
1261
- margin: 1.5rem 0;
1262
- }
1263
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-links {
1322
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
1264
1323
  display: flex;
1265
1324
  flex-direction: column;
1266
- gap: 1rem;
1325
+ gap: 1.5rem;
1326
+ margin-top: 1.5rem;
1267
1327
  }
1268
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-links ::slotted(.ids-header-1177-avatar__menu-links-separator),
1269
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-links .ids-header-1177-avatar__menu-links-separator {
1270
- height: 0.0625rem;
1328
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu hr,
1329
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu ::slotted(hr) {
1271
1330
  width: 100%;
1272
- background-color: var(--IDS-COLOR-NEUTRAL-90);
1331
+ height: 0.0625rem;
1332
+ display: block;
1333
+ margin: 0;
1334
+ border: 0;
1335
+ border-top: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__MENU-SEPARATOR-COLOR);
1273
1336
  }
1274
1337
  @media (max-width: 1024px) {
1275
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__dropdown {
1338
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu {
1276
1339
  border-top-left-radius: 0;
1277
1340
  border-top-right-radius: 0;
1278
- width: 100%;
1279
1341
  max-width: 30rem;
1280
- top: calc(100% + 0.0625rem);
1281
- right: 0;
1342
+ top: calc(100% + 0.4375rem);
1343
+ }
1344
+ }
1345
+ @media (max-width: 640px) {
1346
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu {
1347
+ width: 100vw;
1348
+ max-width: 100vw;
1349
+ right: -1.25rem;
1350
+ }
1351
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-avatar .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--mobile-menu {
1352
+ right: -3.75rem;
1282
1353
  }
1283
1354
  }
1284
1355
 
1285
1356
  :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) {
1286
1357
  justify-self: flex-end;
1358
+ justify-content: flex-end;
1359
+ display: flex;
1360
+ align-items: center;
1361
+ flex-wrap: wrap;
1362
+ flex-grow: 1;
1363
+ margin-left: 0.5rem;
1364
+ }
1365
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__avatar {
1366
+ position: relative;
1367
+ justify-self: flex-end;
1368
+ justify-content: flex-end;
1369
+ display: flex;
1370
+ align-items: center;
1371
+ flex-wrap: wrap;
1372
+ flex-grow: 1;
1373
+ margin-top: 0.0625rem;
1374
+ }
1375
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu-wrapper {
1376
+ position: absolute;
1377
+ left: 0;
1378
+ right: 0;
1379
+ top: 50%;
1380
+ transform: translateY(-50%);
1287
1381
  display: flex;
1288
- align-items: center;
1289
- flex-wrap: wrap;
1382
+ justify-content: flex-end;
1290
1383
  }
1291
1384
  :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button {
1292
1385
  position: relative;
@@ -1294,13 +1387,12 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1294
1387
  align-items: center;
1295
1388
  justify-content: center;
1296
1389
  min-width: 8.5rem;
1297
- max-width: 22rem;
1298
- gap: 1rem;
1390
+ max-width: 100%;
1299
1391
  padding: 0.75rem 1.25rem 0.75rem 1.75rem;
1300
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1392
+ background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
1301
1393
  border-radius: 2rem;
1302
1394
  overflow: hidden;
1303
- border: 0.0625rem solid var(--IDS-COLOR-NEUTRAL-90);
1395
+ border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__BORDER-COLOR);
1304
1396
  cursor: pointer;
1305
1397
  }
1306
1398
  :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:focus {
@@ -1317,7 +1409,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1317
1409
  -moz-osx-font-smoothing: grayscale;
1318
1410
  content: "\e923";
1319
1411
  font-size: 1.75rem;
1320
- color: var(--IDS-COLOR-PRIMARY-40);
1412
+ color: var(--IDS-HEADER-1177-AVATAR__ICON-COLOR);
1321
1413
  left: 1.5rem;
1322
1414
  top: 50%;
1323
1415
  transform: translateY(-50%);
@@ -1333,12 +1425,18 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1333
1425
  content: "\e936";
1334
1426
  font-size: 1rem;
1335
1427
  padding: 0.25rem;
1336
- color: var(--IDS-COLOR-PRIMARY-40);
1337
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1428
+ color: var(--IDS-HEADER-1177-AVATAR__ICON-COLOR);
1429
+ background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
1338
1430
  right: 1.25rem;
1339
1431
  top: 50%;
1340
1432
  transform: translateY(-50%);
1341
1433
  }
1434
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:hover:before, :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:hover::after {
1435
+ color: var(--IDS-HEADER-1177-AVATAR__ICON-HOVER-COLOR);
1436
+ }
1437
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:focus {
1438
+ z-index: 20;
1439
+ }
1342
1440
  :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
1343
1441
  content: "\e939";
1344
1442
  }
@@ -1349,8 +1447,6 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1349
1447
  padding: 0.375rem 0.5rem;
1350
1448
  margin-left: 0.75rem;
1351
1449
  margin-right: 0;
1352
- border: 0.0625rem solid transparent;
1353
- max-width: 18rem;
1354
1450
  }
1355
1451
  :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button:before {
1356
1452
  font-size: 1.25rem;
@@ -1360,24 +1456,9 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1360
1456
  right: 0.5rem;
1361
1457
  }
1362
1458
  }
1363
- @media (max-width: 640px) {
1364
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button {
1365
- max-width: 14rem;
1366
- }
1367
- }
1368
- @media (max-width: 480px) {
1369
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button {
1370
- max-width: 12rem;
1371
- }
1372
- }
1373
- @media (max-width: 360px) {
1374
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button {
1375
- max-width: 9rem;
1376
- }
1377
- }
1378
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button .ids-header-1177-avatar-content__name {
1459
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
1379
1460
  text-align: start;
1380
- padding: 0 1.5rem 0 2rem;
1461
+ padding: 0 1.75rem 0 2rem;
1381
1462
  font-size: 1rem;
1382
1463
  line-height: 1.5rem;
1383
1464
  white-space: nowrap;
@@ -1385,82 +1466,105 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1385
1466
  position: relative;
1386
1467
  text-overflow: ellipsis;
1387
1468
  text-align: left;
1388
- color: var(--IDS-COLOR-NEUTRAL-20);
1469
+ color: var(--IDS-HEADER-1177-AVATAR__COLOR);
1389
1470
  }
1390
1471
  @media (max-width: 1024px) {
1391
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button .ids-header-1177-avatar-content__name {
1472
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
1392
1473
  font-size: 0.875rem;
1393
1474
  line-height: 1.25rem;
1394
1475
  }
1395
1476
  }
1396
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__dropdown-wrapper {
1397
- position: relative;
1398
- }
1399
- @media (max-width: 1024px) {
1400
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__dropdown-wrapper {
1401
- position: initial;
1402
- }
1403
- }
1404
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__dropdown {
1477
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu {
1405
1478
  display: none;
1406
1479
  position: absolute;
1407
- top: calc(100% + 0.25rem);
1480
+ top: calc(100% + 0.0625rem);
1408
1481
  left: auto;
1409
1482
  right: 0;
1410
1483
  z-index: 12;
1411
- width: 20rem;
1412
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1484
+ background-color: var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BACKGROUND-COLOR);
1485
+ border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BORDER-COLOR);
1413
1486
  padding: 1.25rem;
1414
1487
  box-sizing: border-box;
1415
1488
  border-radius: 0.625rem;
1416
- box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.3);
1489
+ box-shadow: var(--IDS-BOX-SHADOW-BOTTOM);
1490
+ width: 100%;
1491
+ max-width: 20rem;
1417
1492
  }
1418
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__dropdown.ids-header-1177-avatar__dropdown--expanded {
1493
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
1419
1494
  display: block;
1420
1495
  }
1421
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__agent p,
1422
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__agent ::slotted(p) {
1496
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p,
1497
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent ::slotted(p) {
1423
1498
  font-style: normal;
1424
- color: var(--IDS-COLOR-NEUTRAL-20);
1499
+ color: var(--IDS-FONT-COLOR);
1425
1500
  font-family: var(--IDS-BODY__FONT-FAMILY);
1426
1501
  font-size: var(--IDS-BODY__FONT-SIZE);
1427
1502
  line-height: var(--IDS-BODY__LINE-HEIGHT);
1428
1503
  font-weight: 400;
1429
1504
  letter-spacing: 0;
1430
1505
  margin-top: 0.75rem !important;
1506
+ margin-bottom: 0.75rem !important;
1431
1507
  }
1432
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-separator {
1433
- height: 0.0625rem;
1434
- width: 100%;
1435
- background-color: var(--IDS-COLOR-NEUTRAL-50);
1436
- margin: 1.5rem 0;
1437
- }
1438
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-links {
1508
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
1439
1509
  display: flex;
1440
1510
  flex-direction: column;
1441
- gap: 1rem;
1511
+ gap: 1.5rem;
1512
+ margin-top: 1.5rem;
1442
1513
  }
1443
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-links ::slotted(.ids-header-1177-avatar__menu-links-separator),
1444
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-links .ids-header-1177-avatar__menu-links-separator {
1445
- height: 0.0625rem;
1514
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu hr,
1515
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu ::slotted(hr) {
1446
1516
  width: 100%;
1447
- background-color: var(--IDS-COLOR-NEUTRAL-90);
1517
+ height: 0.0625rem;
1518
+ display: block;
1519
+ margin: 0;
1520
+ border: 0;
1521
+ border-top: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__MENU-SEPARATOR-COLOR);
1448
1522
  }
1449
1523
  @media (max-width: 1024px) {
1450
- :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__dropdown {
1524
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu {
1451
1525
  border-top-left-radius: 0;
1452
1526
  border-top-right-radius: 0;
1453
- width: 100%;
1454
1527
  max-width: 30rem;
1455
- top: calc(100% + 0.0625rem);
1456
- right: 0;
1528
+ top: calc(100% + 0.4375rem);
1529
+ }
1530
+ }
1531
+ @media (max-width: 640px) {
1532
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu {
1533
+ width: 100vw;
1534
+ max-width: 100vw;
1535
+ right: -1.25rem;
1536
+ }
1537
+ :host .ids-header-1177-avatar:not(.ids-header-1177-avatar--unresponsive) .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--mobile-menu {
1538
+ right: -3.75rem;
1457
1539
  }
1458
1540
  }
1459
1541
  :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive {
1460
1542
  justify-self: flex-end;
1543
+ justify-content: flex-end;
1544
+ display: flex;
1545
+ align-items: center;
1546
+ flex-wrap: wrap;
1547
+ flex-grow: 1;
1548
+ margin-left: 0.5rem;
1549
+ }
1550
+ :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__avatar {
1551
+ position: relative;
1552
+ justify-self: flex-end;
1553
+ justify-content: flex-end;
1461
1554
  display: flex;
1462
1555
  align-items: center;
1463
1556
  flex-wrap: wrap;
1557
+ flex-grow: 1;
1558
+ margin-top: 0.0625rem;
1559
+ }
1560
+ :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu-wrapper {
1561
+ position: absolute;
1562
+ left: 0;
1563
+ right: 0;
1564
+ top: 50%;
1565
+ transform: translateY(-50%);
1566
+ display: flex;
1567
+ justify-content: flex-end;
1464
1568
  }
1465
1569
  :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button {
1466
1570
  position: relative;
@@ -1468,13 +1572,12 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1468
1572
  align-items: center;
1469
1573
  justify-content: center;
1470
1574
  min-width: 8.5rem;
1471
- max-width: 22rem;
1472
- gap: 1rem;
1575
+ max-width: 100%;
1473
1576
  padding: 0.75rem 1.25rem 0.75rem 1.75rem;
1474
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1577
+ background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
1475
1578
  border-radius: 2rem;
1476
1579
  overflow: hidden;
1477
- border: 0.0625rem solid var(--IDS-COLOR-NEUTRAL-90);
1580
+ border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__BORDER-COLOR);
1478
1581
  cursor: pointer;
1479
1582
  }
1480
1583
  :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:focus {
@@ -1491,7 +1594,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1491
1594
  -moz-osx-font-smoothing: grayscale;
1492
1595
  content: "\e923";
1493
1596
  font-size: 1.75rem;
1494
- color: var(--IDS-COLOR-PRIMARY-40);
1597
+ color: var(--IDS-HEADER-1177-AVATAR__ICON-COLOR);
1495
1598
  left: 1.5rem;
1496
1599
  top: 50%;
1497
1600
  transform: translateY(-50%);
@@ -1507,18 +1610,24 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1507
1610
  content: "\e936";
1508
1611
  font-size: 1rem;
1509
1612
  padding: 0.25rem;
1510
- color: var(--IDS-COLOR-PRIMARY-40);
1511
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1613
+ color: var(--IDS-HEADER-1177-AVATAR__ICON-COLOR);
1614
+ background-color: var(--IDS-HEADER-1177-AVATAR__BACKGROUND-COLOR);
1512
1615
  right: 1.25rem;
1513
1616
  top: 50%;
1514
1617
  transform: translateY(-50%);
1515
1618
  }
1619
+ :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:hover:before, :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:hover::after {
1620
+ color: var(--IDS-HEADER-1177-AVATAR__ICON-HOVER-COLOR);
1621
+ }
1622
+ :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button:focus {
1623
+ z-index: 20;
1624
+ }
1516
1625
  :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button.ids-header-1177-avatar__button--expanded:after {
1517
1626
  content: "\e939";
1518
1627
  }
1519
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button .ids-header-1177-avatar-content__name {
1628
+ :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__button .ids-header-1177-avatar__name {
1520
1629
  text-align: start;
1521
- padding: 0 1.5rem 0 2rem;
1630
+ padding: 0 1.75rem 0 2rem;
1522
1631
  font-size: 1rem;
1523
1632
  line-height: 1.5rem;
1524
1633
  white-space: nowrap;
@@ -1526,143 +1635,196 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1526
1635
  position: relative;
1527
1636
  text-overflow: ellipsis;
1528
1637
  text-align: left;
1529
- color: var(--IDS-COLOR-NEUTRAL-20);
1530
- }
1531
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__dropdown-wrapper {
1532
- position: relative;
1638
+ color: var(--IDS-HEADER-1177-AVATAR__COLOR);
1533
1639
  }
1534
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__dropdown {
1640
+ :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu {
1535
1641
  display: none;
1536
1642
  position: absolute;
1537
- top: calc(100% + 0.25rem);
1643
+ top: calc(100% + 0.0625rem);
1538
1644
  left: auto;
1539
1645
  right: 0;
1540
1646
  z-index: 12;
1541
- width: 20rem;
1542
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1647
+ background-color: var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BACKGROUND-COLOR);
1648
+ border: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__DROPDOWN-BORDER-COLOR);
1543
1649
  padding: 1.25rem;
1544
1650
  box-sizing: border-box;
1545
1651
  border-radius: 0.625rem;
1546
- box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.3);
1652
+ box-shadow: var(--IDS-BOX-SHADOW-BOTTOM);
1653
+ width: 100%;
1654
+ max-width: 20rem;
1547
1655
  }
1548
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__dropdown.ids-header-1177-avatar__dropdown--expanded {
1656
+ :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu.ids-header-1177-avatar__menu--expanded {
1549
1657
  display: block;
1550
1658
  }
1551
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__agent p,
1552
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__agent ::slotted(p) {
1659
+ :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent p,
1660
+ :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu .ids-header-1177-avatar__agent ::slotted(p) {
1553
1661
  font-style: normal;
1554
- color: var(--IDS-COLOR-NEUTRAL-20);
1662
+ color: var(--IDS-FONT-COLOR);
1555
1663
  font-family: var(--IDS-BODY__FONT-FAMILY);
1556
1664
  font-size: var(--IDS-BODY__FONT-SIZE);
1557
1665
  line-height: var(--IDS-BODY__LINE-HEIGHT);
1558
1666
  font-weight: 400;
1559
1667
  letter-spacing: 0;
1560
1668
  margin-top: 0.75rem !important;
1669
+ margin-bottom: 0.75rem !important;
1561
1670
  }
1562
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-separator {
1563
- height: 0.0625rem;
1564
- width: 100%;
1565
- background-color: var(--IDS-COLOR-NEUTRAL-50);
1566
- margin: 1.5rem 0;
1567
- }
1568
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-links {
1671
+ :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu .ids-header-1177-avatar__menu-links {
1569
1672
  display: flex;
1570
1673
  flex-direction: column;
1571
- gap: 1rem;
1674
+ gap: 1.5rem;
1675
+ margin-top: 1.5rem;
1572
1676
  }
1573
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-links ::slotted(.ids-header-1177-avatar__menu-links-separator),
1574
- :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__dropdown .ids-header-1177-avatar__menu-links .ids-header-1177-avatar__menu-links-separator {
1575
- height: 0.0625rem;
1677
+ :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu hr,
1678
+ :host .ids-header-1177-avatar.ids-header-1177-avatar--unresponsive .ids-header-1177-avatar__menu ::slotted(hr) {
1576
1679
  width: 100%;
1577
- background-color: var(--IDS-COLOR-NEUTRAL-90);
1680
+ height: 0.0625rem;
1681
+ display: block;
1682
+ margin: 0;
1683
+ border: 0;
1684
+ border-top: 0.0625rem solid var(--IDS-HEADER-1177-AVATAR__MENU-SEPARATOR-COLOR);
1578
1685
  }
1579
1686
 
1580
1687
  .ids-header-1177--unresponsive nav.ids-header-1177__nav {
1688
+ background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1689
+ border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV__BORDER-COLOR);
1581
1690
  position: relative;
1582
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1583
1691
  }
1584
1692
  .ids-header-1177--unresponsive nav.ids-header-1177__nav .ids-header-1177__nav-inner {
1585
1693
  max-width: var(--IDS__MAX-WIDTH);
1694
+ padding: var(--IDS__CONTAINER-PADDING);
1695
+ box-sizing: border-box;
1696
+ background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1586
1697
  display: flex;
1587
1698
  flex-wrap: wrap;
1588
- align-items: center;
1589
- margin-top: 0;
1590
- margin-bottom: 0;
1591
- margin-left: auto;
1592
- margin-right: auto;
1593
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1699
+ align-items: flex-start;
1700
+ margin: 0 auto;
1701
+ }
1702
+ .ids-header-1177--unresponsive nav.ids-header-1177__nav .ids-header-1177__nav-inner .ids-header-1177__nav-content {
1703
+ display: flex;
1704
+ width: 100%;
1705
+ justify-content: flex-start;
1706
+ }
1707
+ .ids-header-1177--unresponsive nav.ids-header-1177__nav .ids-header-1177__nav-inner-mobile {
1708
+ display: none;
1594
1709
  }
1595
1710
 
1596
1711
  .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav {
1712
+ background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1713
+ border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV__BORDER-COLOR);
1597
1714
  position: relative;
1598
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1599
1715
  }
1600
1716
  .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner {
1601
1717
  max-width: var(--IDS__MAX-WIDTH);
1718
+ padding: var(--IDS__CONTAINER-PADDING);
1719
+ box-sizing: border-box;
1720
+ background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1602
1721
  display: flex;
1603
1722
  flex-wrap: wrap;
1604
- align-items: center;
1605
- margin-top: 0;
1606
- margin-bottom: 0;
1607
- margin-left: auto;
1608
- margin-right: auto;
1609
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1723
+ align-items: flex-start;
1724
+ margin: 0 auto;
1725
+ }
1726
+ .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner .ids-header-1177__nav-content {
1727
+ display: flex;
1728
+ width: 100%;
1729
+ justify-content: flex-start;
1730
+ }
1731
+ .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner-mobile {
1732
+ display: none;
1610
1733
  }
1611
1734
  @media (max-width: 1024px) {
1612
- .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner {
1613
- box-shadow: rgba(0, 0, 0, 0.2) 0 0 0.625rem 0;
1614
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1615
- flex-wrap: wrap;
1616
- flex: 1 1 auto;
1735
+ .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav {
1736
+ border-bottom: none;
1737
+ }
1738
+ .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner-mobile {
1739
+ background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1740
+ display: flex;
1741
+ align-items: center;
1742
+ justify-content: space-between;
1617
1743
  box-sizing: border-box;
1744
+ min-height: 3rem;
1745
+ }
1746
+ .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner-mobile-left {
1747
+ justify-content: flex-start;
1748
+ margin-left: 1rem;
1749
+ }
1750
+ .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-inner-mobile-right {
1751
+ justify-content: flex-end;
1752
+ margin-right: 1rem;
1753
+ }
1754
+ .ids-header-1177:not(.ids-header-1177--unresponsive) nav.ids-header-1177__nav .ids-header-1177__nav-content {
1755
+ margin: 0 1.25rem;
1618
1756
  }
1619
- }
1620
-
1621
- .ids-header-1177--fluid .ids-header-1177__container .ids-header-1177__nav-inner {
1622
- max-width: 100% !important;
1623
1757
  }
1624
1758
 
1625
1759
  :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) {
1760
+ background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1761
+ border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV__BORDER-COLOR);
1626
1762
  position: relative;
1627
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1628
1763
  }
1629
1764
  :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner {
1630
1765
  max-width: var(--IDS__MAX-WIDTH);
1766
+ padding: var(--IDS__CONTAINER-PADDING);
1767
+ box-sizing: border-box;
1768
+ background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1631
1769
  display: flex;
1632
1770
  flex-wrap: wrap;
1633
- align-items: center;
1634
- margin-top: 0;
1635
- margin-bottom: 0;
1636
- margin-left: auto;
1637
- margin-right: auto;
1638
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1771
+ align-items: flex-start;
1772
+ margin: 0 auto;
1773
+ }
1774
+ :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner .ids-header-1177__nav-content {
1775
+ display: flex;
1776
+ width: 100%;
1777
+ justify-content: flex-start;
1778
+ }
1779
+ :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner-mobile {
1780
+ display: none;
1639
1781
  }
1640
1782
  @media (max-width: 1024px) {
1641
- :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner {
1642
- box-shadow: rgba(0, 0, 0, 0.2) 0 0 0.625rem 0;
1643
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1644
- flex-wrap: wrap;
1645
- flex: 1 1 auto;
1783
+ :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) {
1784
+ border-bottom: none;
1785
+ }
1786
+ :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner-mobile {
1787
+ background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1788
+ display: flex;
1789
+ align-items: center;
1790
+ justify-content: space-between;
1646
1791
  box-sizing: border-box;
1792
+ min-height: 3rem;
1793
+ }
1794
+ :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner-mobile-left {
1795
+ justify-content: flex-start;
1796
+ margin-left: 1rem;
1797
+ }
1798
+ :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-inner-mobile-right {
1799
+ justify-content: flex-end;
1800
+ margin-right: 1rem;
1801
+ }
1802
+ :host nav.ids-header-1177__nav:not(.ids-header-1177__nav--unresponsive) .ids-header-1177__nav-content {
1803
+ margin: 0 1.25rem;
1647
1804
  }
1648
1805
  }
1649
1806
  :host nav.ids-header-1177__nav.ids-header-1177__nav--unresponsive {
1807
+ background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1808
+ border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV__BORDER-COLOR);
1650
1809
  position: relative;
1651
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1652
1810
  }
1653
1811
  :host nav.ids-header-1177__nav.ids-header-1177__nav--unresponsive .ids-header-1177__nav-inner {
1654
1812
  max-width: var(--IDS__MAX-WIDTH);
1813
+ padding: var(--IDS__CONTAINER-PADDING);
1814
+ box-sizing: border-box;
1815
+ background-color: var(--IDS-HEADER-1177-NAV__BACKGROUND-COLOR);
1655
1816
  display: flex;
1656
1817
  flex-wrap: wrap;
1657
- align-items: center;
1658
- margin-top: 0;
1659
- margin-bottom: 0;
1660
- margin-left: auto;
1661
- margin-right: auto;
1662
- background-color: var(--IDS-COLOR-NEUTRAL-100);
1818
+ align-items: flex-start;
1819
+ margin: 0 auto;
1663
1820
  }
1664
- :host nav.ids-header-1177__nav.ids-header-1177__nav--fluid .ids-header-1177__nav-inner {
1665
- max-width: 100%;
1821
+ :host nav.ids-header-1177__nav.ids-header-1177__nav--unresponsive .ids-header-1177__nav-inner .ids-header-1177__nav-content {
1822
+ display: flex;
1823
+ width: 100%;
1824
+ justify-content: flex-start;
1825
+ }
1826
+ :host nav.ids-header-1177__nav.ids-header-1177__nav--unresponsive .ids-header-1177__nav-inner-mobile {
1827
+ display: none;
1666
1828
  }
1667
1829
  @media (max-width: 1024px) {
1668
1830
  :host nav.ids-header-1177__nav.ids-header-1177__nav--hide-on-tablet {
@@ -1685,7 +1847,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1685
1847
  background-color: transparent !important;
1686
1848
  font-size: 1.25rem !important;
1687
1849
  font-family: var(--IDS-FONT-FAMILY-HEADING);
1688
- color: var(--IDS-COLOR-PRIMARY-35);
1850
+ color: var(--IDS-HEADER-1177-NAV-ITEM__COLOR);
1689
1851
  border-radius: 0;
1690
1852
  border: none;
1691
1853
  }
@@ -1702,7 +1864,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1702
1864
  right: 0;
1703
1865
  }
1704
1866
  .ids-header-1177--unresponsive .ids-header-1177__nav-item > a:after, .ids-header-1177--unresponsive .ids-header-1177__nav-item > button:after {
1705
- background: var(--IDS-COLOR-PRIMARY-40);
1867
+ background: var(--IDS-HEADER-1177-NAV-ITEM__BOTTOM-BORDER-COLOR);
1706
1868
  bottom: 0;
1707
1869
  content: "";
1708
1870
  display: block;
@@ -1716,7 +1878,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1716
1878
  margin-right: 0.625rem;
1717
1879
  }
1718
1880
  .ids-header-1177--unresponsive .ids-header-1177__nav-item ::slotted(a):after {
1719
- background: var(--IDS-COLOR-PRIMARY-40);
1881
+ background: var(--IDS-HEADER-1177-NAV-ITEM__BOTTOM-BORDER-COLOR);
1720
1882
  bottom: 0;
1721
1883
  content: "";
1722
1884
  display: block;
@@ -1733,49 +1895,56 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1733
1895
  outline: var(--IDS-FOCUS__OUTLINE);
1734
1896
  outline-offset: -0.125rem !important;
1735
1897
  }
1736
- .ids-header-1177--unresponsive .ids-header-1177__nav-item.ids-header-1177__nav-item--active button:after, .ids-header-1177--unresponsive .ids-header-1177__nav-item.ids-header-1177__nav-item--active a:after, .ids-header-1177--unresponsive .ids-header-1177__nav-item.ids-header-1177__nav-item--active ::slotted(a):after,
1898
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item.ids-header-1177__nav-item--expanded button:after, .ids-header-1177--unresponsive .ids-header-1177__nav-item.ids-header-1177__nav-item--active button:after, .ids-header-1177--unresponsive .ids-header-1177__nav-item.ids-header-1177__nav-item--active a:after, .ids-header-1177--unresponsive .ids-header-1177__nav-item.ids-header-1177__nav-item--active ::slotted(a):after,
1737
1899
  .ids-header-1177--unresponsive .ids-header-1177__nav-item ::slotted(a:focus):after,
1738
1900
  .ids-header-1177--unresponsive .ids-header-1177__nav-item ::slotted(a:hover):after {
1739
1901
  width: auto;
1740
1902
  right: 0;
1741
1903
  }
1742
- .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown {
1743
- background-color: var(--IDS-COLOR-PRIMARY-90);
1904
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177-nav-item__menu {
1905
+ border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV-ITEM-MENU__BORDER-COLOR);
1906
+ background-color: var(--IDS-HEADER-1177-NAV-ITEM-MENU__BACKGROUND-COLOR);
1907
+ box-shadow: var(--IDS-BOX-SHADOW-BOTTOM);
1744
1908
  left: 0;
1745
1909
  min-height: 10.813rem;
1746
1910
  padding: 2.5rem 0.625rem 3.125rem;
1747
1911
  position: absolute;
1748
1912
  width: 100%;
1749
1913
  top: 100%;
1750
- z-index: 0;
1914
+ z-index: 2;
1751
1915
  box-sizing: border-box;
1752
- box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
1916
+ display: none;
1917
+ }
1918
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177-nav-item__menu.ids-header-1177-nav-item__menu--expanded {
1919
+ display: block;
1753
1920
  }
1754
- .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content {
1921
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content {
1755
1922
  max-width: var(--IDS__MAX-WIDTH);
1923
+ padding: var(--IDS__CONTAINER-PADDING);
1924
+ box-sizing: border-box;
1756
1925
  margin: 0 auto;
1757
1926
  width: 100%;
1758
1927
  display: flex;
1759
1928
  }
1760
- .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1,
1761
- .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2,
1762
- .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3,
1763
- .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-4 {
1929
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-1,
1930
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-2,
1931
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-3,
1932
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-4 {
1764
1933
  flex: 0 25%;
1765
1934
  }
1766
- .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1 .ids-header-1177__items-wrapper,
1767
- .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2 .ids-header-1177__items-wrapper,
1768
- .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3 .ids-header-1177__items-wrapper,
1769
- .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-1]),
1770
- .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-2]),
1771
- .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-3]) {
1935
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-1 .ids-header-1177-nav__menu-item-wrapper,
1936
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-2 .ids-header-1177-nav__menu-item-wrapper,
1937
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-3 .ids-header-1177-nav__menu-item-wrapper,
1938
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content ::slotted([slot=col-1]),
1939
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content ::slotted([slot=col-2]),
1940
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content ::slotted([slot=col-3]) {
1772
1941
  display: flex;
1773
1942
  margin-bottom: 0.625rem;
1774
1943
  margin-right: 2.5rem;
1775
1944
  font-size: 1rem;
1776
1945
  line-height: 1.5rem;
1777
1946
  padding-bottom: 0.625rem;
1778
- border-bottom: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
1947
+ border-bottom: 0.0313rem solid var(--IDS-HEADER-1177-NAV-ITEM-MENU__LINK-BORDER-COLOR);
1779
1948
  }
1780
1949
 
1781
1950
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > a, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > button,
@@ -1793,7 +1962,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1793
1962
  background-color: transparent !important;
1794
1963
  font-size: 1.25rem !important;
1795
1964
  font-family: var(--IDS-FONT-FAMILY-HEADING);
1796
- color: var(--IDS-COLOR-PRIMARY-35);
1965
+ color: var(--IDS-HEADER-1177-NAV-ITEM__COLOR);
1797
1966
  border-radius: 0;
1798
1967
  border: none;
1799
1968
  }
@@ -1810,7 +1979,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1810
1979
  right: 0;
1811
1980
  }
1812
1981
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > a:after, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > button:after {
1813
- background: var(--IDS-COLOR-PRIMARY-40);
1982
+ background: var(--IDS-HEADER-1177-NAV-ITEM__BOTTOM-BORDER-COLOR);
1814
1983
  bottom: 0;
1815
1984
  content: "";
1816
1985
  display: block;
@@ -1824,7 +1993,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1824
1993
  margin-right: 0.625rem;
1825
1994
  }
1826
1995
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item ::slotted(a):after {
1827
- background: var(--IDS-COLOR-PRIMARY-40);
1996
+ background: var(--IDS-HEADER-1177-NAV-ITEM__BOTTOM-BORDER-COLOR);
1828
1997
  bottom: 0;
1829
1998
  content: "";
1830
1999
  display: block;
@@ -1841,49 +2010,56 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1841
2010
  outline: var(--IDS-FOCUS__OUTLINE);
1842
2011
  outline-offset: -0.125rem !important;
1843
2012
  }
1844
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item.ids-header-1177__nav-item--active button:after, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item.ids-header-1177__nav-item--active a:after, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item.ids-header-1177__nav-item--active ::slotted(a):after,
2013
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item.ids-header-1177__nav-item--expanded button:after, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item.ids-header-1177__nav-item--active button:after, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item.ids-header-1177__nav-item--active a:after, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item.ids-header-1177__nav-item--active ::slotted(a):after,
1845
2014
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item ::slotted(a:focus):after,
1846
2015
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item ::slotted(a:hover):after {
1847
2016
  width: auto;
1848
2017
  right: 0;
1849
2018
  }
1850
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown {
1851
- background-color: var(--IDS-COLOR-PRIMARY-90);
2019
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177-nav-item__menu {
2020
+ border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV-ITEM-MENU__BORDER-COLOR);
2021
+ background-color: var(--IDS-HEADER-1177-NAV-ITEM-MENU__BACKGROUND-COLOR);
2022
+ box-shadow: var(--IDS-BOX-SHADOW-BOTTOM);
1852
2023
  left: 0;
1853
2024
  min-height: 10.813rem;
1854
2025
  padding: 2.5rem 0.625rem 3.125rem;
1855
2026
  position: absolute;
1856
2027
  width: 100%;
1857
2028
  top: 100%;
1858
- z-index: 0;
2029
+ z-index: 2;
1859
2030
  box-sizing: border-box;
1860
- box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
2031
+ display: none;
1861
2032
  }
1862
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content {
2033
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177-nav-item__menu.ids-header-1177-nav-item__menu--expanded {
2034
+ display: block;
2035
+ }
2036
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content {
1863
2037
  max-width: var(--IDS__MAX-WIDTH);
2038
+ padding: var(--IDS__CONTAINER-PADDING);
2039
+ box-sizing: border-box;
1864
2040
  margin: 0 auto;
1865
2041
  width: 100%;
1866
2042
  display: flex;
1867
2043
  }
1868
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1,
1869
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2,
1870
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3,
1871
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-4 {
2044
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-1,
2045
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-2,
2046
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-3,
2047
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-4 {
1872
2048
  flex: 0 25%;
1873
2049
  }
1874
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1 .ids-header-1177__items-wrapper,
1875
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2 .ids-header-1177__items-wrapper,
1876
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3 .ids-header-1177__items-wrapper,
1877
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-1]),
1878
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-2]),
1879
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-3]) {
2050
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-1 .ids-header-1177-nav__menu-item-wrapper,
2051
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-2 .ids-header-1177-nav__menu-item-wrapper,
2052
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-3 .ids-header-1177-nav__menu-item-wrapper,
2053
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content ::slotted([slot=col-1]),
2054
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content ::slotted([slot=col-2]),
2055
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content ::slotted([slot=col-3]) {
1880
2056
  display: flex;
1881
2057
  margin-bottom: 0.625rem;
1882
2058
  margin-right: 2.5rem;
1883
2059
  font-size: 1rem;
1884
2060
  line-height: 1.5rem;
1885
2061
  padding-bottom: 0.625rem;
1886
- border-bottom: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
2062
+ border-bottom: 0.0313rem solid var(--IDS-HEADER-1177-NAV-ITEM-MENU__LINK-BORDER-COLOR);
1887
2063
  }
1888
2064
  @media (max-width: 1024px) {
1889
2065
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item {
@@ -1891,10 +2067,6 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1891
2067
  }
1892
2068
  }
1893
2069
 
1894
- .ids-header-1177--fluid .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content {
1895
- max-width: 100% !important;
1896
- }
1897
-
1898
2070
  :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > a, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > button,
1899
2071
  :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) ::slotted(a) {
1900
2072
  display: flex;
@@ -1910,7 +2082,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1910
2082
  background-color: transparent !important;
1911
2083
  font-size: 1.25rem !important;
1912
2084
  font-family: var(--IDS-FONT-FAMILY-HEADING);
1913
- color: var(--IDS-COLOR-PRIMARY-35);
2085
+ color: var(--IDS-HEADER-1177-NAV-ITEM__COLOR);
1914
2086
  border-radius: 0;
1915
2087
  border: none;
1916
2088
  }
@@ -1927,7 +2099,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1927
2099
  right: 0;
1928
2100
  }
1929
2101
  :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > a:after, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > button:after {
1930
- background: var(--IDS-COLOR-PRIMARY-40);
2102
+ background: var(--IDS-HEADER-1177-NAV-ITEM__BOTTOM-BORDER-COLOR);
1931
2103
  bottom: 0;
1932
2104
  content: "";
1933
2105
  display: block;
@@ -1941,7 +2113,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1941
2113
  margin-right: 0.625rem;
1942
2114
  }
1943
2115
  :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) ::slotted(a):after {
1944
- background: var(--IDS-COLOR-PRIMARY-40);
2116
+ background: var(--IDS-HEADER-1177-NAV-ITEM__BOTTOM-BORDER-COLOR);
1945
2117
  bottom: 0;
1946
2118
  content: "";
1947
2119
  display: block;
@@ -1958,49 +2130,56 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
1958
2130
  outline: var(--IDS-FOCUS__OUTLINE);
1959
2131
  outline-offset: -0.125rem !important;
1960
2132
  }
1961
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive).ids-header-1177__nav-item--active button:after, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive).ids-header-1177__nav-item--active a:after, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive).ids-header-1177__nav-item--active ::slotted(a):after,
2133
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive).ids-header-1177__nav-item--expanded button:after, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive).ids-header-1177__nav-item--active button:after, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive).ids-header-1177__nav-item--active a:after, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive).ids-header-1177__nav-item--active ::slotted(a):after,
1962
2134
  :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) ::slotted(a:focus):after,
1963
2135
  :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) ::slotted(a:hover):after {
1964
2136
  width: auto;
1965
2137
  right: 0;
1966
2138
  }
1967
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown {
1968
- background-color: var(--IDS-COLOR-PRIMARY-90);
2139
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177-nav-item__menu {
2140
+ border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV-ITEM-MENU__BORDER-COLOR);
2141
+ background-color: var(--IDS-HEADER-1177-NAV-ITEM-MENU__BACKGROUND-COLOR);
2142
+ box-shadow: var(--IDS-BOX-SHADOW-BOTTOM);
1969
2143
  left: 0;
1970
2144
  min-height: 10.813rem;
1971
2145
  padding: 2.5rem 0.625rem 3.125rem;
1972
2146
  position: absolute;
1973
2147
  width: 100%;
1974
2148
  top: 100%;
1975
- z-index: 0;
2149
+ z-index: 2;
1976
2150
  box-sizing: border-box;
1977
- box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
2151
+ display: none;
1978
2152
  }
1979
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content {
2153
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177-nav-item__menu.ids-header-1177-nav-item__menu--expanded {
2154
+ display: block;
2155
+ }
2156
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content {
1980
2157
  max-width: var(--IDS__MAX-WIDTH);
2158
+ padding: var(--IDS__CONTAINER-PADDING);
2159
+ box-sizing: border-box;
1981
2160
  margin: 0 auto;
1982
2161
  width: 100%;
1983
2162
  display: flex;
1984
2163
  }
1985
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1,
1986
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2,
1987
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3,
1988
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-4 {
2164
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-1,
2165
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-2,
2166
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-3,
2167
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-4 {
1989
2168
  flex: 0 25%;
1990
2169
  }
1991
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1 .ids-header-1177__items-wrapper,
1992
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2 .ids-header-1177__items-wrapper,
1993
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3 .ids-header-1177__items-wrapper,
1994
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-1]),
1995
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-2]),
1996
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-3]) {
2170
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-1 .ids-header-1177-nav__menu-item-wrapper,
2171
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-2 .ids-header-1177-nav__menu-item-wrapper,
2172
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-3 .ids-header-1177-nav__menu-item-wrapper,
2173
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content ::slotted([slot=col-1]),
2174
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content ::slotted([slot=col-2]),
2175
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content ::slotted([slot=col-3]) {
1997
2176
  display: flex;
1998
2177
  margin-bottom: 0.625rem;
1999
2178
  margin-right: 2.5rem;
2000
2179
  font-size: 1rem;
2001
2180
  line-height: 1.5rem;
2002
2181
  padding-bottom: 0.625rem;
2003
- border-bottom: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
2182
+ border-bottom: 0.0313rem solid var(--IDS-HEADER-1177-NAV-ITEM-MENU__LINK-BORDER-COLOR);
2004
2183
  }
2005
2184
  @media (max-width: 1024px) {
2006
2185
  :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) {
@@ -2022,7 +2201,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
2022
2201
  background-color: transparent !important;
2023
2202
  font-size: 1.25rem !important;
2024
2203
  font-family: var(--IDS-FONT-FAMILY-HEADING);
2025
- color: var(--IDS-COLOR-PRIMARY-35);
2204
+ color: var(--IDS-HEADER-1177-NAV-ITEM__COLOR);
2026
2205
  border-radius: 0;
2027
2206
  border: none;
2028
2207
  }
@@ -2039,7 +2218,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
2039
2218
  right: 0;
2040
2219
  }
2041
2220
  :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > a:after, :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > button:after {
2042
- background: var(--IDS-COLOR-PRIMARY-40);
2221
+ background: var(--IDS-HEADER-1177-NAV-ITEM__BOTTOM-BORDER-COLOR);
2043
2222
  bottom: 0;
2044
2223
  content: "";
2045
2224
  display: block;
@@ -2053,7 +2232,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
2053
2232
  margin-right: 0.625rem;
2054
2233
  }
2055
2234
  :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive ::slotted(a):after {
2056
- background: var(--IDS-COLOR-PRIMARY-40);
2235
+ background: var(--IDS-HEADER-1177-NAV-ITEM__BOTTOM-BORDER-COLOR);
2057
2236
  bottom: 0;
2058
2237
  content: "";
2059
2238
  display: block;
@@ -2070,170 +2249,79 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
2070
2249
  outline: var(--IDS-FOCUS__OUTLINE);
2071
2250
  outline-offset: -0.125rem !important;
2072
2251
  }
2073
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive.ids-header-1177__nav-item--active button:after, :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive.ids-header-1177__nav-item--active a:after, :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive.ids-header-1177__nav-item--active ::slotted(a):after,
2252
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive.ids-header-1177__nav-item--expanded button:after, :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive.ids-header-1177__nav-item--active button:after, :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive.ids-header-1177__nav-item--active a:after, :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive.ids-header-1177__nav-item--active ::slotted(a):after,
2074
2253
  :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive ::slotted(a:focus):after,
2075
2254
  :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive ::slotted(a:hover):after {
2076
2255
  width: auto;
2077
2256
  right: 0;
2078
2257
  }
2079
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown {
2080
- background-color: var(--IDS-COLOR-PRIMARY-90);
2258
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177-nav-item__menu {
2259
+ border-top: 0.0625rem solid var(--IDS-HEADER-1177-NAV-ITEM-MENU__BORDER-COLOR);
2260
+ background-color: var(--IDS-HEADER-1177-NAV-ITEM-MENU__BACKGROUND-COLOR);
2261
+ box-shadow: var(--IDS-BOX-SHADOW-BOTTOM);
2081
2262
  left: 0;
2082
2263
  min-height: 10.813rem;
2083
2264
  padding: 2.5rem 0.625rem 3.125rem;
2084
2265
  position: absolute;
2085
2266
  width: 100%;
2086
2267
  top: 100%;
2087
- z-index: 0;
2268
+ z-index: 2;
2088
2269
  box-sizing: border-box;
2089
- box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
2270
+ display: none;
2271
+ }
2272
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177-nav-item__menu.ids-header-1177-nav-item__menu--expanded {
2273
+ display: block;
2090
2274
  }
2091
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content {
2275
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content {
2092
2276
  max-width: var(--IDS__MAX-WIDTH);
2277
+ padding: var(--IDS__CONTAINER-PADDING);
2278
+ box-sizing: border-box;
2093
2279
  margin: 0 auto;
2094
2280
  width: 100%;
2095
2281
  display: flex;
2096
2282
  }
2097
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1,
2098
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2,
2099
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3,
2100
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-4 {
2283
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-1,
2284
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-2,
2285
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-3,
2286
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-4 {
2101
2287
  flex: 0 25%;
2102
2288
  }
2103
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1 .ids-header-1177__items-wrapper,
2104
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2 .ids-header-1177__items-wrapper,
2105
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3 .ids-header-1177__items-wrapper,
2106
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-1]),
2107
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-2]),
2108
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-3]) {
2289
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-1 .ids-header-1177-nav__menu-item-wrapper,
2290
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-2 .ids-header-1177-nav__menu-item-wrapper,
2291
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content .ids-header-1177-nav-item__menu__content-col-3 .ids-header-1177-nav__menu-item-wrapper,
2292
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content ::slotted([slot=col-1]),
2293
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content ::slotted([slot=col-2]),
2294
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177-nav-item__menu .ids-header-1177-nav-item__menu__content ::slotted([slot=col-3]) {
2109
2295
  display: flex;
2110
2296
  margin-bottom: 0.625rem;
2111
2297
  margin-right: 2.5rem;
2112
2298
  font-size: 1rem;
2113
2299
  line-height: 1.5rem;
2114
2300
  padding-bottom: 0.625rem;
2115
- border-bottom: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
2116
- }
2117
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--fluid .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content {
2118
- max-width: 100% !important;
2119
- }
2120
-
2121
- .ids-header-1177__nav-mobile__menu {
2122
- background: none;
2123
- color: inherit;
2124
- border: none;
2125
- padding: 0;
2126
- font: inherit;
2127
- cursor: pointer;
2128
- outline: inherit;
2129
- color: var(--IDS-COLOR-PRIMARY-35);
2130
- font-size: 0.875rem;
2131
- border-right: none !important;
2132
- padding: 0 0.5rem;
2133
- cursor: pointer;
2134
- }
2135
- .ids-header-1177__nav-mobile__menu .ids-hamburger {
2136
- transition: all 0.2s;
2137
- cursor: pointer;
2138
- user-select: none;
2139
- position: relative;
2140
- }
2141
- .ids-header-1177__nav-mobile__menu .ids-hamburger__lines {
2142
- display: block;
2143
- cursor: pointer;
2144
- width: 1.3125rem;
2145
- border-radius: 0.125rem;
2146
- transition: all 0.2s;
2147
- background-color: var(--IDS-COLOR-PRIMARY-40);
2148
- position: relative;
2149
- height: 0.125rem;
2150
- width: 1.25rem;
2151
- }
2152
- .ids-header-1177__nav-mobile__menu .ids-hamburger__lines:before,
2153
- .ids-header-1177__nav-mobile__menu .ids-hamburger__lines:after {
2154
- display: inline-block;
2155
- width: 1.3125rem;
2156
- border-radius: 0.125rem;
2157
- transition: all 0.2s;
2158
- background-color: var(--IDS-COLOR-PRIMARY-40);
2159
- position: absolute;
2160
- left: 0;
2161
- content: "";
2162
- -webkit-transform-origin: 0.09375rem center;
2163
- transform-origin: 0.09375rem center;
2164
- }
2165
- .ids-header-1177__nav-mobile__menu .ids-hamburger__lines:before,
2166
- .ids-header-1177__nav-mobile__menu .ids-hamburger__lines:after {
2167
- height: 0.125rem;
2168
- width: 1.25rem;
2169
- }
2170
- .ids-header-1177__nav-mobile__menu .ids-hamburger__lines:before,
2171
- .ids-header-1177__nav-mobile__menu .ids-hamburger__lines:after {
2172
- -webkit-transform-origin: 0.13393rem center;
2173
- transform-origin: 0.13393rem center;
2174
- }
2175
- .ids-header-1177__nav-mobile__menu .ids-hamburger__lines:before {
2176
- top: 0.5rem;
2177
- }
2178
- .ids-header-1177__nav-mobile__menu .ids-hamburger__lines:after {
2179
- top: -0.5rem;
2180
- }
2181
- .ids-header-1177__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines {
2182
- background: transparent;
2183
- }
2184
- .ids-header-1177__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before, .ids-header-1177__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after {
2185
- -ms-transform-origin: 50% 50%;
2186
- -webkit-transform-origin: 50% 50%;
2187
- transform-origin: 50% 50%;
2188
- top: 0;
2189
- width: 1.5rem;
2190
- left: -0.1rem;
2191
- }
2192
- .ids-header-1177__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before {
2193
- -ms-transform: rotate(45deg);
2194
- -webkit-transform: rotate3d(0, 0, 1, 45deg);
2195
- transform: rotate3d(0, 0, 1, 45deg);
2196
- }
2197
- .ids-header-1177__nav-mobile__menu[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after {
2198
- -ms-transform: rotate(-45deg);
2199
- -webkit-transform: rotate3d(0, 0, 1, -45deg);
2200
- transform: rotate3d(0, 0, 1, -45deg);
2201
- }
2202
-
2203
- .ids-header-1177__nav-mobile__menu-items {
2204
- background-color: var(--IDS-COLOR-NEUTRAL-100);
2205
- display: none;
2206
- position: absolute;
2207
- left: 0;
2208
- right: 0;
2209
- z-index: 10;
2210
- top: 100%;
2211
- }
2212
- @media (max-width: 1024px) {
2213
- .ids-header-1177__nav-mobile__menu-items {
2214
- display: block;
2215
- }
2301
+ border-bottom: 0.0313rem solid var(--IDS-HEADER-1177-NAV-ITEM-MENU__LINK-BORDER-COLOR);
2216
2302
  }
2217
2303
 
2218
- .ids-header-1177--unresponsive .ids-header-1177__nav-mobile__item {
2304
+ .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile {
2219
2305
  display: none;
2220
2306
  gap: 0.5rem;
2221
2307
  align-items: center;
2222
2308
  justify-content: center;
2223
- flex-grow: 1;
2224
2309
  font-size: 0.875rem;
2225
- height: 3rem;
2310
+ padding: 0 0.25rem;
2311
+ margin-left: 0.75rem;
2312
+ height: 2.375rem;
2226
2313
  position: relative;
2227
- color: var(--IDS-COLOR-PRIMARY-35);
2314
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2315
+ cursor: pointer;
2228
2316
  }
2229
- .ids-header-1177--unresponsive .ids-header-1177__nav-mobile__item .ids-header-1177-nav-item-mobile__icon {
2317
+ .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile .ids-header-1177-nav-item-mobile__icon {
2230
2318
  font-size: 1.5rem;
2231
2319
  display: inline-block;
2232
2320
  margin-bottom: -0.1875rem;
2233
- color: var(--IDS-COLOR-PRIMARY-40);
2321
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2234
2322
  }
2235
- .ids-header-1177--unresponsive .ids-header-1177__nav-mobile__item a,
2236
- .ids-header-1177--unresponsive .ids-header-1177__nav-mobile__item button {
2323
+ .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile a,
2324
+ .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile button {
2237
2325
  display: flex;
2238
2326
  width: 100%;
2239
2327
  gap: 0.5rem;
@@ -2245,46 +2333,56 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
2245
2333
  font: inherit;
2246
2334
  cursor: pointer;
2247
2335
  outline: inherit;
2248
- color: var(--IDS-COLOR-PRIMARY-35);
2336
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2249
2337
  outline: none !important;
2250
2338
  align-items: center;
2251
2339
  justify-content: center;
2252
2340
  }
2253
- .ids-header-1177--unresponsive .ids-header-1177__nav-mobile__item:hover {
2254
- color: var(--IDS-ICON__COLOR-PRESET-2-2);
2341
+ .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile:hover {
2342
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2343
+ text-decoration: underline;
2344
+ text-underline-offset: 0.125rem;
2345
+ }
2346
+ .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile:hover .ids-header-1177-nav-item-mobile__icon {
2347
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2255
2348
  }
2256
- .ids-header-1177--unresponsive .ids-header-1177__nav-mobile__item:hover .ids-header-1177-nav-item-mobile__icon {
2257
- color: var(--IDS-ICON__COLOR-PRESET-2-2);
2349
+ .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile:hover a,
2350
+ .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile:hover button {
2351
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2352
+ text-decoration: underline;
2353
+ text-underline-offset: 0.125rem;
2258
2354
  }
2259
- .ids-header-1177--unresponsive .ids-header-1177__nav-mobile__item:focus-within {
2355
+ .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile:focus-within {
2260
2356
  outline: var(--IDS-FOCUS__OUTLINE);
2261
- outline-offset: -0.125rem !important;
2357
+ outline-offset: 0 !important;
2262
2358
  }
2263
- .ids-header-1177--unresponsive .ids-header-1177__nav-mobile__item ::slotted(a) {
2359
+ .ids-header-1177--unresponsive .ids-header-1177-nav-item-mobile ::slotted(a) {
2264
2360
  position: absolute;
2265
2361
  inset: 0;
2266
2362
  opacity: 0;
2267
2363
  }
2268
2364
 
2269
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile__item {
2365
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile {
2270
2366
  display: none;
2271
2367
  gap: 0.5rem;
2272
2368
  align-items: center;
2273
2369
  justify-content: center;
2274
- flex-grow: 1;
2275
2370
  font-size: 0.875rem;
2276
- height: 3rem;
2371
+ padding: 0 0.25rem;
2372
+ margin-left: 0.75rem;
2373
+ height: 2.375rem;
2277
2374
  position: relative;
2278
- color: var(--IDS-COLOR-PRIMARY-35);
2375
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2376
+ cursor: pointer;
2279
2377
  }
2280
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile__item .ids-header-1177-nav-item-mobile__icon {
2378
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile .ids-header-1177-nav-item-mobile__icon {
2281
2379
  font-size: 1.5rem;
2282
2380
  display: inline-block;
2283
2381
  margin-bottom: -0.1875rem;
2284
- color: var(--IDS-COLOR-PRIMARY-40);
2382
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2285
2383
  }
2286
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile__item a,
2287
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile__item button {
2384
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile a,
2385
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile button {
2288
2386
  display: flex;
2289
2387
  width: 100%;
2290
2388
  gap: 0.5rem;
@@ -2296,51 +2394,61 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
2296
2394
  font: inherit;
2297
2395
  cursor: pointer;
2298
2396
  outline: inherit;
2299
- color: var(--IDS-COLOR-PRIMARY-35);
2397
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2300
2398
  outline: none !important;
2301
2399
  align-items: center;
2302
2400
  justify-content: center;
2303
2401
  }
2304
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile__item:hover {
2305
- color: var(--IDS-ICON__COLOR-PRESET-2-2);
2402
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile:hover {
2403
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2404
+ text-decoration: underline;
2405
+ text-underline-offset: 0.125rem;
2406
+ }
2407
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile:hover .ids-header-1177-nav-item-mobile__icon {
2408
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2306
2409
  }
2307
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile__item:hover .ids-header-1177-nav-item-mobile__icon {
2308
- color: var(--IDS-ICON__COLOR-PRESET-2-2);
2410
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile:hover a,
2411
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile:hover button {
2412
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2413
+ text-decoration: underline;
2414
+ text-underline-offset: 0.125rem;
2309
2415
  }
2310
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile__item:focus-within {
2416
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile:focus-within {
2311
2417
  outline: var(--IDS-FOCUS__OUTLINE);
2312
- outline-offset: -0.125rem !important;
2418
+ outline-offset: 0 !important;
2313
2419
  }
2314
2420
  @media (max-width: 1024px) {
2315
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile__item {
2421
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile {
2316
2422
  display: flex;
2317
2423
  }
2318
2424
  }
2319
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile__item ::slotted(a) {
2425
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177-nav-item-mobile ::slotted(a) {
2320
2426
  position: absolute;
2321
2427
  inset: 0;
2322
2428
  opacity: 0;
2323
2429
  }
2324
2430
 
2325
- :host .ids-header-1177__nav-mobile__item:not(.ids-header-1177__nav-mobile__item--unresponsive) {
2431
+ :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive) {
2326
2432
  display: none;
2327
2433
  gap: 0.5rem;
2328
2434
  align-items: center;
2329
2435
  justify-content: center;
2330
- flex-grow: 1;
2331
2436
  font-size: 0.875rem;
2332
- height: 3rem;
2437
+ padding: 0 0.25rem;
2438
+ margin-left: 0.75rem;
2439
+ height: 2.375rem;
2333
2440
  position: relative;
2334
- color: var(--IDS-COLOR-PRIMARY-35);
2441
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2442
+ cursor: pointer;
2335
2443
  }
2336
- :host .ids-header-1177__nav-mobile__item:not(.ids-header-1177__nav-mobile__item--unresponsive) .ids-header-1177-nav-item-mobile__icon {
2444
+ :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive) .ids-header-1177-nav-item-mobile__icon {
2337
2445
  font-size: 1.5rem;
2338
2446
  display: inline-block;
2339
2447
  margin-bottom: -0.1875rem;
2340
- color: var(--IDS-COLOR-PRIMARY-40);
2448
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2341
2449
  }
2342
- :host .ids-header-1177__nav-mobile__item:not(.ids-header-1177__nav-mobile__item--unresponsive) a,
2343
- :host .ids-header-1177__nav-mobile__item:not(.ids-header-1177__nav-mobile__item--unresponsive) button {
2450
+ :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive) a,
2451
+ :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive) button {
2344
2452
  display: flex;
2345
2453
  width: 100%;
2346
2454
  gap: 0.5rem;
@@ -2352,50 +2460,60 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
2352
2460
  font: inherit;
2353
2461
  cursor: pointer;
2354
2462
  outline: inherit;
2355
- color: var(--IDS-COLOR-PRIMARY-35);
2463
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2356
2464
  outline: none !important;
2357
2465
  align-items: center;
2358
2466
  justify-content: center;
2359
2467
  }
2360
- :host .ids-header-1177__nav-mobile__item:not(.ids-header-1177__nav-mobile__item--unresponsive):hover {
2361
- color: var(--IDS-ICON__COLOR-PRESET-2-2);
2468
+ :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive):hover {
2469
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2470
+ text-decoration: underline;
2471
+ text-underline-offset: 0.125rem;
2472
+ }
2473
+ :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive):hover .ids-header-1177-nav-item-mobile__icon {
2474
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2362
2475
  }
2363
- :host .ids-header-1177__nav-mobile__item:not(.ids-header-1177__nav-mobile__item--unresponsive):hover .ids-header-1177-nav-item-mobile__icon {
2364
- color: var(--IDS-ICON__COLOR-PRESET-2-2);
2476
+ :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive):hover a,
2477
+ :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive):hover button {
2478
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2479
+ text-decoration: underline;
2480
+ text-underline-offset: 0.125rem;
2365
2481
  }
2366
- :host .ids-header-1177__nav-mobile__item:not(.ids-header-1177__nav-mobile__item--unresponsive):focus-within {
2482
+ :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive):focus-within {
2367
2483
  outline: var(--IDS-FOCUS__OUTLINE);
2368
- outline-offset: -0.125rem !important;
2484
+ outline-offset: 0 !important;
2369
2485
  }
2370
2486
  @media (max-width: 1024px) {
2371
- :host .ids-header-1177__nav-mobile__item:not(.ids-header-1177__nav-mobile__item--unresponsive) {
2487
+ :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive) {
2372
2488
  display: flex;
2373
2489
  }
2374
2490
  }
2375
- :host .ids-header-1177__nav-mobile__item:not(.ids-header-1177__nav-mobile__item--unresponsive) ::slotted(a) {
2491
+ :host .ids-header-1177-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive) ::slotted(a) {
2376
2492
  position: absolute;
2377
2493
  inset: 0;
2378
2494
  opacity: 0;
2379
2495
  }
2380
- :host .ids-header-1177__nav-mobile__item.ids-header-1177__nav-mobile__item--unresponsive {
2496
+ :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive {
2381
2497
  display: none;
2382
2498
  gap: 0.5rem;
2383
2499
  align-items: center;
2384
2500
  justify-content: center;
2385
- flex-grow: 1;
2386
2501
  font-size: 0.875rem;
2387
- height: 3rem;
2502
+ padding: 0 0.25rem;
2503
+ margin-left: 0.75rem;
2504
+ height: 2.375rem;
2388
2505
  position: relative;
2389
- color: var(--IDS-COLOR-PRIMARY-35);
2506
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2507
+ cursor: pointer;
2390
2508
  }
2391
- :host .ids-header-1177__nav-mobile__item.ids-header-1177__nav-mobile__item--unresponsive .ids-header-1177-nav-item-mobile__icon {
2509
+ :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive .ids-header-1177-nav-item-mobile__icon {
2392
2510
  font-size: 1.5rem;
2393
2511
  display: inline-block;
2394
2512
  margin-bottom: -0.1875rem;
2395
- color: var(--IDS-COLOR-PRIMARY-40);
2513
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2396
2514
  }
2397
- :host .ids-header-1177__nav-mobile__item.ids-header-1177__nav-mobile__item--unresponsive a,
2398
- :host .ids-header-1177__nav-mobile__item.ids-header-1177__nav-mobile__item--unresponsive button {
2515
+ :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive a,
2516
+ :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive button {
2399
2517
  display: flex;
2400
2518
  width: 100%;
2401
2519
  gap: 0.5rem;
@@ -2407,22 +2525,30 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
2407
2525
  font: inherit;
2408
2526
  cursor: pointer;
2409
2527
  outline: inherit;
2410
- color: var(--IDS-COLOR-PRIMARY-35);
2528
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__COLOR);
2411
2529
  outline: none !important;
2412
2530
  align-items: center;
2413
2531
  justify-content: center;
2414
2532
  }
2415
- :host .ids-header-1177__nav-mobile__item.ids-header-1177__nav-mobile__item--unresponsive:hover {
2416
- color: var(--IDS-ICON__COLOR-PRESET-2-2);
2533
+ :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive:hover {
2534
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2535
+ text-decoration: underline;
2536
+ text-underline-offset: 0.125rem;
2537
+ }
2538
+ :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive:hover .ids-header-1177-nav-item-mobile__icon {
2539
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2417
2540
  }
2418
- :host .ids-header-1177__nav-mobile__item.ids-header-1177__nav-mobile__item--unresponsive:hover .ids-header-1177-nav-item-mobile__icon {
2419
- color: var(--IDS-ICON__COLOR-PRESET-2-2);
2541
+ :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive:hover a,
2542
+ :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive:hover button {
2543
+ color: var(--IDS-HEADER-1177-NAV-ITEM-MOBILE__HOVER-COLOR);
2544
+ text-decoration: underline;
2545
+ text-underline-offset: 0.125rem;
2420
2546
  }
2421
- :host .ids-header-1177__nav-mobile__item.ids-header-1177__nav-mobile__item--unresponsive:focus-within {
2547
+ :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive:focus-within {
2422
2548
  outline: var(--IDS-FOCUS__OUTLINE);
2423
- outline-offset: -0.125rem !important;
2549
+ outline-offset: 0 !important;
2424
2550
  }
2425
- :host .ids-header-1177__nav-mobile__item.ids-header-1177__nav-mobile__item--unresponsive ::slotted(a) {
2551
+ :host .ids-header-1177-nav-item-mobile.ids-header-1177-nav-item-mobile--unresponsive ::slotted(a) {
2426
2552
  position: absolute;
2427
2553
  inset: 0;
2428
2554
  opacity: 0;
@@ -2442,11 +2568,9 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
2442
2568
  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
2443
2569
  }
2444
2570
  .ids-header-1177-menu-mobile {
2445
- color: var(--IDS-COLOR-PRIMARY-35);
2446
- font-size: 0.875rem;
2447
- padding: 0 0.5rem;
2448
- height: 2rem;
2449
- margin-right: 0.25rem;
2571
+ padding: 0.5rem;
2572
+ height: 1.75rem;
2573
+ margin-right: 0;
2450
2574
  margin-left: 0.5rem;
2451
2575
  cursor: pointer;
2452
2576
  }
@@ -2462,7 +2586,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
2462
2586
  width: 1.3125rem;
2463
2587
  border-radius: 0.125rem;
2464
2588
  transition: all 0.2s;
2465
- background-color: var(--IDS-COLOR-PRIMARY-40);
2589
+ background-color: var(--IDS-HEADER-1177-MOBILE-MENU__HAMBURGER-COLOR);
2466
2590
  position: relative;
2467
2591
  height: 0.125rem;
2468
2592
  width: 1.25rem;
@@ -2473,7 +2597,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
2473
2597
  width: 1.3125rem;
2474
2598
  border-radius: 0.125rem;
2475
2599
  transition: all 0.2s;
2476
- background-color: var(--IDS-COLOR-PRIMARY-40);
2600
+ background-color: var(--IDS-HEADER-1177-MOBILE-MENU__HAMBURGER-COLOR);
2477
2601
  position: absolute;
2478
2602
  left: 0;
2479
2603
  content: "";
@@ -2496,6 +2620,11 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
2496
2620
  .ids-header-1177-menu-mobile .ids-hamburger__lines:after {
2497
2621
  top: -0.5rem;
2498
2622
  }
2623
+ .ids-header-1177-menu-mobile:hover .ids-hamburger__lines,
2624
+ .ids-header-1177-menu-mobile:hover .ids-hamburger__lines:before,
2625
+ .ids-header-1177-menu-mobile:hover .ids-hamburger__lines:after {
2626
+ background-color: var(--IDS-HEADER-1177-MOBILE-MENU__HAMBURGER-HOVER-COLOR);
2627
+ }
2499
2628
  .ids-header-1177-menu-mobile[aria-expanded=true] .ids-hamburger .ids-hamburger__lines {
2500
2629
  background: transparent;
2501
2630
  }
@@ -2530,7 +2659,9 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
2530
2659
  }
2531
2660
 
2532
2661
  .ids-header-1177-menu-mobile__items {
2533
- background-color: var(--IDS-COLOR-NEUTRAL-100);
2662
+ box-shadow: var(--IDS-BOX-SHADOW-BOTTOM);
2663
+ background-color: var(--IDS-HEADER-1177-MOBILE-MENU__BACKGROUND-COLOR);
2664
+ border-top: 0.0625rem solid var(--IDS-HEADER-1177-MOBILE-MENU__BORDER-COLOR);
2534
2665
  display: none;
2535
2666
  position: absolute;
2536
2667
  left: 0;