@inera/ids-design 5.5.1 → 6.0.0

package/components/header-1177/composite-header-1177.css

@@ -1,4 +1,7 @@
 /*******
+* ICONS
+********/
+/*******
 * BUTTONS
 ********/
 /*******
@@ -64,13 +67,14 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__inner-left {
   display: flex;
-  flex-grow: 1;
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__inner-right {
   display: block;
+  max-width: calc(100% - 7.5rem);
+  flex-grow: 1;
   margin-left: auto;
 }
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo {
+header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper {
   background-color: var(--IDS-COLOR-PRIMARY-40);
   display: flex;
   align-items: center;
@@ -82,7 +86,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   padding-left: 0.75rem;
   padding-right: 2.25rem;
 }
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo:after {
+header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper:after {
   content: "";
   background-color: var(--IDS-COLOR-PRIMARY-40);
   position: absolute;
@@ -98,17 +102,61 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   width: 25rem;
 }
 @media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo:after {
+  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper:after {
     display: none;
   }
 }
+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 {
+  width: 6.4375rem;
+  margin-right: 1.25rem;
+  display: flex;
+  align-items: center;
+}
+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 {
+  cursor: pointer;
+  height: 6.4375rem;
+  width: 100%;
+  position: relative;
+}
+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:focus {
+  outline: var(--IDS-FOCUS__OUTLINE--LIGHT);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+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:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e91e";
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  font-size: 6.625rem;
+}
+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,
+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]) {
+  display: flex;
+  align-items: center;
+  font-size: 6.625rem;
+  color: var(--IDS-COLOR-NEUTRAL-100);
+}
+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,
+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 {
+  outline: var(--IDS-FOCUS__OUTLINE--LIGHT);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+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) {
+  outline: var(--IDS-FOCUS__OUTLINE--LIGHT) !important;
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
+}
 @media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo {
-    min-height: 3rem;
+  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper {
     padding-left: 1.25rem;
     padding-right: 1.25rem;
+    min-height: 3rem;
+    min-width: 3.125rem;
+    height: 1rem !important;
   }
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo:after {
+  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper:after {
     content: "";
     background-color: var(--IDS-COLOR-PRIMARY-40);
     position: absolute;
@@ -126,39 +174,24 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   }
 }
 @media (max-width: 1024px) and (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo:after {
+  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper:after {
     display: block;
   }
 }
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo .ids-header-1177__logo-link {
-  width: 6.438rem;
-  height: 2.5rem;
-  margin-right: 1.5rem;
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo .ids-header-1177__logo-link a {
-  display: block;
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo .ids-header-1177__logo-link a:focus {
-  outline: var(--IDS-FOCUS__OUTLINE--LIGHT);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
-header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo .ids-header-1177__logo-link ::slotted([slot=logo]:focus) {
-  display: block;
-  outline: var(--IDS-FOCUS__OUTLINE--LIGHT) !important;
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
-}
 @media (max-width: 1024px) {
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo .ids-header-1177__logo-link {
+  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 {
+    width: 3rem;
     margin-right: 0;
-    max-width: 2.625rem;
-    height: 1rem !important;
   }
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo .ids-header-1177__logo-link a,
-  header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo .ids-header-1177__logo-link ::slotted([slot=logo]) {
-    margin-right: 0;
-    display: flex !important;
-    height: 1rem !important;
-    width: 100% !important;
+  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 {
+    height: 3rem;
+  }
+  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:before {
+    font-size: 3rem;
+  }
+  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,
+  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]) {
+    font-size: 3rem;
   }
 }
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__region {
@@ -196,9 +229,9 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   }
 }
 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 {
-  margin-left: -4px;
+  margin-left: -0.25rem;
 }
-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 button {
+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 {
   display: flex;
   justify-content: end;
 }
@@ -226,7 +259,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
 @media (max-width: 1024px) {
   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 {
     min-height: 3rem;
-    max-width: 6rem;
+    max-width: 11rem;
   }
 }
 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__text {
@@ -241,7 +274,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   min-width: 7rem;
 }
 @media (max-width: 1024px) {
-  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 button:before {
+  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 {
     content: "";
     position: absolute;
     z-index: 1;
@@ -252,7 +285,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   }
 }
 @media (max-width: 1024px) and (max-width: 1024px) {
-  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 button:before {
+  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 {
     left: 0;
     top: 50%;
     transform: translateY(-50%);
@@ -340,7 +373,7 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
     justify-content: space-between;
   }
 }
-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 button {
+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 {
   min-width: 1.5rem;
   min-height: 1.5rem;
   background: none;
@@ -355,39 +388,55 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__con
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  border: none;
+  background-color: none;
   display: flex;
   gap: 1rem;
   font-size: 0.875rem;
   color: var(--IDS-COLOR-PRIMARY-35);
   align-items: center;
-  padding: 0 0.5rem;
+  padding: 0 1.5rem 0 0.125rem;
   margin: 0 -0.5rem;
+  position: relative;
 }
-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 button:focus {
+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 {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: 0.125rem !important;
 }
 @media (max-width: 1024px) {
-  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 button {
+  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 {
     inset: 0;
-    padding-right: 0.75rem;
-    padding-left: 0.75rem;
-    margin-right: 1px;
+    padding-right: 1.25rem;
+    padding-left: 1.25rem;
+    margin-right: 0.0625rem;
     position: absolute;
     justify-content: space-between;
     color: var(--IDS-COLOR-NEUTRAL-100);
   }
-  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 button:focus {
+  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 {
     outline: var(--IDS-FOCUS__OUTLINE--LIGHT);
     outline-offset: -0.25rem !important;
   }
 }
+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 {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e936";
+  color: var(--IDS-HEADER__REGION-PICKER-ICON);
+  right: 0.25rem;
+}
+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 {
+  content: "\e939";
+}
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__items {
   display: flex;
-  gap: 1.25rem;
+  align-items: center;
+  justify-content: flex-end;
   margin-right: 1.25rem;
   margin-left: 1rem;
-  align-items: center;
 }
 @media (max-width: 1024px) {
   header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__items {
@@ -421,8 +470,8 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__ski
   z-index: 10;
   font-family: var(--IDS-LINK__FONT-FAMILY);
   font-size: 1rem;
-  color: var(--IDS-LINK--COLORPRESET-1__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
   text-decoration: underline;
   position: absolute;
   right: 0;
@@ -434,8 +483,8 @@ header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__ski
 header.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__skip-to-content a:focus {
   transform: translateY(0);
   transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
   outline-offset: -0.375rem !important;
 }
 @media (max-width: 1024px) {
@@ -466,13 +515,14 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__inner-left {
   display: flex;
-  flex-grow: 1;
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__inner-right {
   display: block;
+  max-width: calc(100% - 7.5rem);
+  flex-grow: 1;
   margin-left: auto;
 }
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo {
+header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper {
   background-color: var(--IDS-COLOR-PRIMARY-40);
   display: flex;
   align-items: center;
@@ -484,7 +534,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   padding-left: 0.75rem;
   padding-right: 2.25rem;
 }
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo:after {
+header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo-wrapper:after {
   content: "";
   background-color: var(--IDS-COLOR-PRIMARY-40);
   position: absolute;
@@ -499,20 +549,45 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   height: 25rem;
   width: 25rem;
 }
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo .ids-header-1177__logo-link {
-  width: 6.438rem;
-  height: 2.5rem;
-  margin-right: 1.5rem;
+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 {
+  width: 6.4375rem;
+  margin-right: 1.25rem;
+  display: flex;
+  align-items: center;
 }
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo .ids-header-1177__logo-link a {
-  display: block;
+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 {
+  cursor: pointer;
+  height: 6.4375rem;
+  width: 100%;
+  position: relative;
 }
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo .ids-header-1177__logo-link a:focus {
+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:focus {
   outline: var(--IDS-FOCUS__OUTLINE--LIGHT);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__logo .ids-header-1177__logo-link ::slotted([slot=logo]:focus) {
+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:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
   display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e91e";
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  font-size: 6.625rem;
+}
+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,
+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]) {
+  display: flex;
+  align-items: center;
+  font-size: 6.625rem;
+  color: var(--IDS-COLOR-NEUTRAL-100);
+}
+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,
+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 {
+  outline: var(--IDS-FOCUS__OUTLINE--LIGHT);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+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) {
   outline: var(--IDS-FOCUS__OUTLINE--LIGHT) !important;
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
 }
@@ -540,9 +615,9 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   width: 18.75rem;
 }
 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 {
-  margin-left: -4px;
+  margin-left: -0.25rem;
 }
-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 button {
+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 {
   display: flex;
   justify-content: end;
 }
@@ -610,7 +685,7 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   padding: 0 0.5rem;
   margin: 0 -0.4375rem 0 0.5rem;
 }
-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 button {
+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 {
   min-width: 1.5rem;
   min-height: 1.5rem;
   background: none;
@@ -625,24 +700,40 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  border: none;
+  background-color: none;
   display: flex;
   gap: 1rem;
   font-size: 0.875rem;
   color: var(--IDS-COLOR-PRIMARY-35);
   align-items: center;
-  padding: 0 0.5rem;
+  padding: 0 1.5rem 0 0.125rem;
   margin: 0 -0.5rem;
+  position: relative;
 }
-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 button:focus {
+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 {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: 0.125rem !important;
 }
+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 {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e936";
+  color: var(--IDS-HEADER__REGION-PICKER-ICON);
+  right: 0.25rem;
+}
+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 {
+  content: "\e939";
+}
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__container .ids-header-1177__inner .ids-header-1177__items {
   display: flex;
-  gap: 1.25rem;
+  align-items: center;
+  justify-content: flex-end;
   margin-right: 1.25rem;
   margin-left: 1rem;
-  align-items: center;
 }
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__nav-mobile {
   display: none;
@@ -665,8 +756,8 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__skip-to-c
   z-index: 10;
   font-family: var(--IDS-LINK__FONT-FAMILY);
   font-size: 1rem;
-  color: var(--IDS-LINK--COLORPRESET-1__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-1__COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
   text-decoration: underline;
   position: absolute;
   right: 0;
@@ -678,8 +769,8 @@ header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__skip-to-c
 header.ids-header-1177.ids-header-1177--unresponsive .ids-header-1177__skip-to-content a:focus {
   transform: translateY(0);
   transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-1__HOVER-COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
   outline-offset: -0.375rem !important;
 }
 header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-header-1177__inner {
@@ -690,7 +781,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
+  margin-left: 1.25rem;
   text-decoration: none;
   position: relative;
   background-color: transparent;
@@ -707,6 +798,11 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   margin-right: 0.25rem;
   display: flex;
 }
+.ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
+.ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-icon [class^=ids-icon-] {
+  font-size: 1.5rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+}
 .ids-header-1177--unresponsive .ids-header-1177__items__item .ids-header-1177__items__item-text {
   color: var(--IDS-COLOR-PRIMARY-35);
   font-size: 1.125rem;
@@ -717,7 +813,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
+  margin-left: 1.25rem;
   text-decoration: none;
   position: relative;
   background-color: transparent;
@@ -731,6 +827,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item:not(.ids-header-1177__items__item--mobile) {
     outline: var(--IDS-FOCUS__OUTLINE);
     outline-offset: -0.25rem !important;
+    margin-left: 0.5rem;
     display: none;
   }
 }
@@ -741,6 +838,11 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   margin-right: 0.25rem;
   display: flex;
 }
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon [class^=ids-icon-] {
+  font-size: 1.5rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+}
 @media (min-width: 1024px) {
   .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon {
     max-width: 2rem;
@@ -748,6 +850,10 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
     margin-left: 0;
     margin-right: 0;
   }
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-icon [class^=ids-icon-] {
+    font-size: 2rem;
+  }
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__items__item .ids-header-1177__items__item-text {
   color: var(--IDS-COLOR-PRIMARY-35);
@@ -764,7 +870,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
+  margin-left: 1.25rem;
   text-decoration: none;
   position: relative;
   background-color: transparent;
@@ -778,6 +884,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive):not(.ids-header-1177__items__item--mobile) {
     outline: var(--IDS-FOCUS__OUTLINE);
     outline-offset: -0.25rem !important;
+    margin-left: 0.5rem;
     display: none;
   }
 }
@@ -788,6 +895,11 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   margin-right: 0.25rem;
   display: flex;
 }
+:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
+:host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon [class^=ids-icon-] {
+  font-size: 1.5rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+}
 @media (min-width: 1024px) {
   :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon {
     max-width: 2rem;
@@ -795,6 +907,10 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
     margin-left: 0;
     margin-right: 0;
   }
+  :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
+  :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-icon [class^=ids-icon-] {
+    font-size: 2rem;
+  }
 }
 :host .ids-header-1177__items__item:not(.ids-header-1177__items__item--unresponsive) .ids-header-1177__items__item-text {
   color: var(--IDS-COLOR-PRIMARY-35);
@@ -810,7 +926,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
+  margin-left: 1.25rem;
   text-decoration: none;
   position: relative;
   background-color: transparent;
@@ -827,6 +943,11 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   margin-right: 0.25rem;
   display: flex;
 }
+:host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-icon ::slotted([class^=ids-icon-]),
+:host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-icon [class^=ids-icon-] {
+  font-size: 1.5rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+}
 :host .ids-header-1177__items__item.ids-header-1177__items__item--unresponsive .ids-header-1177__items__item-text {
   color: var(--IDS-COLOR-PRIMARY-35);
   font-size: 1.125rem;
@@ -834,7 +955,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
 }
 
 .ids-header-1177--unresponsive .ids-header-1177__avatar {
-  align-self: flex-end;
+  justify-self: flex-end;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -850,26 +971,36 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   padding-left: 2rem;
   background-color: var(--IDS-COLOR-NEUTRAL-100);
   border-radius: 3.125rem;
-}
-.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
-  display: flex;
-  min-width: 1rem;
-  min-height: 1rem;
-  max-width: 2.25rem;
-  max-height: 2.75rem;
+  overflow: hidden;
 }
 .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
   display: flex;
   flex-direction: column;
+  position: relative;
+  padding-left: 2.75rem;
+}
+.ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e923";
+  font-size: 2.25rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
 }
 .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
   text-align: start;
-  max-width: 15.625rem;
+  max-width: calc(100vw - 22rem);
   font-size: 1rem;
   white-space: nowrap;
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
+  text-align: left;
   color: var(--IDS-COLOR-NEUTRAL-20);
 }
 .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links {
@@ -878,8 +1009,9 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   font-size: 1rem;
 }
 .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
-  color: var(--IDS-LINK--COLORPRESET-2__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-underline-offset: 0.125rem;
 }
 .ids-header-1177--unresponsive .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
   padding-right: 0.5rem;
@@ -888,7 +1020,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
 }
 
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar {
-  align-self: flex-end;
+  justify-self: flex-end;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -904,9 +1036,11 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   padding-left: 2rem;
   background-color: var(--IDS-COLOR-NEUTRAL-100);
   border-radius: 3.125rem;
+  overflow: hidden;
 }
 @media (max-width: 1024px) {
   .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box {
+    justify-content: flex-start;
     gap: 0.5rem;
     height: 2rem;
     font-size: 0.75rem;
@@ -914,40 +1048,50 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
     padding-left: 1rem;
     margin-left: 0.75rem;
     margin-right: 0.75rem;
+    max-width: calc(100vw - 11rem);
   }
 }
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
   display: flex;
-  min-width: 1rem;
-  min-height: 1rem;
-  max-width: 2.25rem;
-  max-height: 2.75rem;
+  flex-direction: column;
+  position: relative;
+  padding-left: 2.75rem;
+}
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e923";
+  font-size: 2.25rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
 }
 @media (max-width: 1024px) {
-  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
-    min-width: 1rem;
-    min-height: 1rem;
-    max-width: 1.25rem;
-    max-height: 1.25rem;
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
+    padding-left: 2rem;
+  }
+  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before {
+    font-size: 1.5rem;
   }
-}
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
-  display: flex;
-  flex-direction: column;
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
   text-align: start;
-  max-width: 15.625rem;
+  max-width: calc(100vw - 22rem);
   font-size: 1rem;
   white-space: nowrap;
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
+  text-align: left;
   color: var(--IDS-COLOR-NEUTRAL-20);
 }
 @media (max-width: 1024px) {
   .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
-    max-width: 100%;
+    max-width: calc(100vw - 14.875rem);
   }
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links {
@@ -961,8 +1105,9 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   }
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
-  color: var(--IDS-LINK--COLORPRESET-2__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-underline-offset: 0.125rem;
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__avatar .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
   padding-right: 0.5rem;
@@ -971,7 +1116,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
 }
 
 :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) {
-  align-self: flex-end;
+  justify-self: flex-end;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -987,9 +1132,11 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   padding-left: 2rem;
   background-color: var(--IDS-COLOR-NEUTRAL-100);
   border-radius: 3.125rem;
+  overflow: hidden;
 }
 @media (max-width: 1024px) {
   :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box {
+    justify-content: flex-start;
     gap: 0.5rem;
     height: 2rem;
     font-size: 0.75rem;
@@ -997,40 +1144,50 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
     padding-left: 1rem;
     margin-left: 0.75rem;
     margin-right: 0.75rem;
+    max-width: calc(100vw - 11rem);
   }
 }
-:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
+:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
   display: flex;
-  min-width: 1rem;
-  min-height: 1rem;
-  max-width: 2.25rem;
-  max-height: 2.75rem;
+  flex-direction: column;
+  position: relative;
+  padding-left: 2.75rem;
+}
+:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e923";
+  font-size: 2.25rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
 }
 @media (max-width: 1024px) {
-  :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
-    min-width: 1rem;
-    min-height: 1rem;
-    max-width: 1.25rem;
-    max-height: 1.25rem;
+  :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
+    padding-left: 2rem;
+  }
+  :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before {
+    font-size: 1.5rem;
   }
-}
-:host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
-  display: flex;
-  flex-direction: column;
 }
 :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
   text-align: start;
-  max-width: 15.625rem;
+  max-width: calc(100vw - 22rem);
   font-size: 1rem;
   white-space: nowrap;
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
+  text-align: left;
   color: var(--IDS-COLOR-NEUTRAL-20);
 }
 @media (max-width: 1024px) {
   :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
-    max-width: 100%;
+    max-width: calc(100vw - 14.875rem);
   }
 }
 :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links {
@@ -1044,8 +1201,9 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   }
 }
 :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
-  color: var(--IDS-LINK--COLORPRESET-2__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-underline-offset: 0.125rem;
 }
 :host .ids-header-1177__avatar:not(.ids-header-1177__avatar--unresponsive) .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
   padding-right: 0.5rem;
@@ -1053,7 +1211,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   margin-right: 0.5rem;
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive {
-  align-self: flex-end;
+  justify-self: flex-end;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -1069,26 +1227,36 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   padding-left: 2rem;
   background-color: var(--IDS-COLOR-NEUTRAL-100);
   border-radius: 3.125rem;
-}
-:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-icon {
-  display: flex;
-  min-width: 1rem;
-  min-height: 1rem;
-  max-width: 2.25rem;
-  max-height: 2.75rem;
+  overflow: hidden;
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content {
   display: flex;
   flex-direction: column;
+  position: relative;
+  padding-left: 2.75rem;
+}
+:host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e923";
+  font-size: 2.25rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__name {
   text-align: start;
-  max-width: 15.625rem;
+  max-width: calc(100vw - 22rem);
   font-size: 1rem;
   white-space: nowrap;
   overflow: hidden;
   position: relative;
   text-overflow: ellipsis;
+  text-align: left;
   color: var(--IDS-COLOR-NEUTRAL-20);
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links {
@@ -1097,8 +1265,9 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   font-size: 1rem;
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links a {
-  color: var(--IDS-LINK--COLORPRESET-2__COLOR);
-  text-decoration-color: var(--IDS-LINK--COLORPRESET-2__COLOR);
+  color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-2__COLOR);
+  text-underline-offset: 0.125rem;
 }
 :host .ids-header-1177__avatar.ids-header-1177__avatar--unresponsive .ids-header-1177__avatar-box .ids-header-1177__avatar-content .ids-header-1177__avatar-content__links .ids-header-1177__avatar-content__links-divider {
   padding-right: 0.5rem;
@@ -1267,34 +1436,39 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   background-color: var(--IDS-COLOR-PRIMARY-90);
   left: 0;
   min-height: 10.813rem;
-  padding: 2.5rem 0 3.125rem;
+  padding: 2.5rem 0.625rem 3.125rem;
   position: absolute;
   width: 100%;
   top: 100%;
   z-index: -1;
+  box-sizing: border-box;
   box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
 }
 .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content {
   max-width: var(--IDS__MAX-WIDTH);
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  padding: 0 0.625rem;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
+  width: 100%;
+  display: flex;
+}
+.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--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--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--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 {
+  flex: 0 25%;
 }
-.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 a,
-.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 a,
-.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 a,
+.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,
+.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,
+.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,
 .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]),
 .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]),
 .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]) {
-  display: block;
+  display: flex;
   margin-bottom: 0.625rem;
   margin-right: 2.5rem;
   font-size: 1rem;
   line-height: 1.5rem;
   padding-bottom: 0.625rem;
-  border-bottom: 0.063rem solid #dfa9b8;
+  border-bottom: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
 }
 
 .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,
@@ -1370,34 +1544,39 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   background-color: var(--IDS-COLOR-PRIMARY-90);
   left: 0;
   min-height: 10.813rem;
-  padding: 2.5rem 0 3.125rem;
+  padding: 2.5rem 0.625rem 3.125rem;
   position: absolute;
   width: 100%;
   top: 100%;
   z-index: -1;
+  box-sizing: border-box;
   box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
 }
 .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 {
   max-width: var(--IDS__MAX-WIDTH);
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  padding: 0 0.625rem;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
+  width: 100%;
+  display: flex;
+}
+.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: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: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: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 {
+  flex: 0 25%;
 }
-.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 a,
-.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 a,
-.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 a,
+.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,
+.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,
+.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,
 .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]),
 .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]),
 .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]) {
-  display: block;
+  display: flex;
   margin-bottom: 0.625rem;
   margin-right: 2.5rem;
   font-size: 1rem;
   line-height: 1.5rem;
   padding-bottom: 0.625rem;
-  border-bottom: 0.063rem solid #dfa9b8;
+  border-bottom: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
 }
 @media (max-width: 1024px) {
   .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item {
@@ -1482,34 +1661,39 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   background-color: var(--IDS-COLOR-PRIMARY-90);
   left: 0;
   min-height: 10.813rem;
-  padding: 2.5rem 0 3.125rem;
+  padding: 2.5rem 0.625rem 3.125rem;
   position: absolute;
   width: 100%;
   top: 100%;
   z-index: -1;
+  box-sizing: border-box;
   box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
 }
 :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 {
   max-width: var(--IDS__MAX-WIDTH);
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  padding: 0 0.625rem;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
+  width: 100%;
+  display: flex;
 }
-: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 a,
-: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 a,
-: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 a,
+: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,
+: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,
+: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,
+: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 {
+  flex: 0 25%;
+}
+: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,
+: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,
+: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,
 :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]),
 :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]),
 :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]) {
-  display: block;
+  display: flex;
   margin-bottom: 0.625rem;
   margin-right: 2.5rem;
   font-size: 1rem;
   line-height: 1.5rem;
   padding-bottom: 0.625rem;
-  border-bottom: 0.063rem solid #dfa9b8;
+  border-bottom: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
 }
 @media (max-width: 1024px) {
   :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) {
@@ -1589,34 +1773,39 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   background-color: var(--IDS-COLOR-PRIMARY-90);
   left: 0;
   min-height: 10.813rem;
-  padding: 2.5rem 0 3.125rem;
+  padding: 2.5rem 0.625rem 3.125rem;
   position: absolute;
   width: 100%;
   top: 100%;
   z-index: -1;
+  box-sizing: border-box;
   box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
 }
 :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 {
   max-width: var(--IDS__MAX-WIDTH);
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  padding: 0 0.625rem;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
+  width: 100%;
+  display: flex;
 }
-: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 a,
-: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 a,
-: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 a,
+: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,
+: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,
+: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,
+: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 {
+  flex: 0 25%;
+}
+: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,
+: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,
+: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,
 :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]),
 :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]),
 :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]) {
-  display: block;
+  display: flex;
   margin-bottom: 0.625rem;
   margin-right: 2.5rem;
   font-size: 1rem;
   line-height: 1.5rem;
   padding-bottom: 0.625rem;
-  border-bottom: 0.063rem solid #dfa9b8;
+  border-bottom: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
 }
 :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 {
   max-width: 100% !important;
@@ -1645,9 +1834,9 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   width: 1.3125rem;
   border-radius: 0.125rem;
   transition: all 0.2s;
-  background-color: var(--IDS-COLOR-PRIMARY-35);
+  background-color: var(--IDS-COLOR-PRIMARY-40);
   position: relative;
-  height: 0.188rem;
+  height: 0.125rem;
   width: 1.25rem;
 }
 .ids-header-1177__nav-mobile__menu .ids-hamburger__lines:before,
@@ -1656,7 +1845,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   width: 1.3125rem;
   border-radius: 0.125rem;
   transition: all 0.2s;
-  background-color: var(--IDS-COLOR-PRIMARY-35);
+  background-color: var(--IDS-COLOR-PRIMARY-40);
   position: absolute;
   left: 0;
   content: "";
@@ -1665,7 +1854,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
 }
 .ids-header-1177__nav-mobile__menu .ids-hamburger__lines:before,
 .ids-header-1177__nav-mobile__menu .ids-hamburger__lines:after {
-  height: 0.188rem;
+  height: 0.125rem;
   width: 1.25rem;
 }
 .ids-header-1177__nav-mobile__menu .ids-hamburger__lines:before,
@@ -1726,7 +1915,13 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   height: 3rem;
   position: relative;
   color: var(--IDS-COLOR-PRIMARY-35);
-  border-right: 0.063rem solid rgba(160, 11, 54, 0.2);
+  border-right: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
+}
+.ids-header-1177--unresponsive .ids-header-1177__nav-mobile__item .ids-header-1177-nav-item-mobile__icon {
+  font-size: 1.5rem;
+  display: inline-block;
+  margin-bottom: -0.1875rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
 }
 .ids-header-1177--unresponsive .ids-header-1177__nav-mobile__item a,
 .ids-header-1177--unresponsive .ids-header-1177__nav-mobile__item button {
@@ -1746,6 +1941,9 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   align-items: center;
   justify-content: center;
 }
+.ids-header-1177--unresponsive .ids-header-1177__nav-mobile__item:hover {
+  color: var(--IDS-ICON__COLOR-PRESET-2-2);
+}
 .ids-header-1177--unresponsive .ids-header-1177__nav-mobile__item:has(.ids-header-1177__nav-mobile__menu) {
   border-right: none;
 }
@@ -1769,7 +1967,13 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   height: 3rem;
   position: relative;
   color: var(--IDS-COLOR-PRIMARY-35);
-  border-right: 0.063rem solid rgba(160, 11, 54, 0.2);
+  border-right: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
+}
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile__item .ids-header-1177-nav-item-mobile__icon {
+  font-size: 1.5rem;
+  display: inline-block;
+  margin-bottom: -0.1875rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
 }
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile__item a,
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile__item button {
@@ -1789,6 +1993,9 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   align-items: center;
   justify-content: center;
 }
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile__item:hover {
+  color: var(--IDS-ICON__COLOR-PRESET-2-2);
+}
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-mobile__item:has(.ids-header-1177__nav-mobile__menu) {
   border-right: none;
 }
@@ -1817,7 +2024,13 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   height: 3rem;
   position: relative;
   color: var(--IDS-COLOR-PRIMARY-35);
-  border-right: 0.063rem solid rgba(160, 11, 54, 0.2);
+  border-right: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
+}
+:host .ids-header-1177__nav-mobile__item:not(.ids-header-1177__nav-mobile__item--unresponsive) .ids-header-1177-nav-item-mobile__icon {
+  font-size: 1.5rem;
+  display: inline-block;
+  margin-bottom: -0.1875rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
 }
 :host .ids-header-1177__nav-mobile__item:not(.ids-header-1177__nav-mobile__item--unresponsive) a,
 :host .ids-header-1177__nav-mobile__item:not(.ids-header-1177__nav-mobile__item--unresponsive) button {
@@ -1837,6 +2050,9 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   align-items: center;
   justify-content: center;
 }
+:host .ids-header-1177__nav-mobile__item:not(.ids-header-1177__nav-mobile__item--unresponsive):hover {
+  color: var(--IDS-ICON__COLOR-PRESET-2-2);
+}
 :host .ids-header-1177__nav-mobile__item:not(.ids-header-1177__nav-mobile__item--unresponsive):has(.ids-header-1177__nav-mobile__menu) {
   border-right: none;
 }
@@ -1864,7 +2080,13 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   height: 3rem;
   position: relative;
   color: var(--IDS-COLOR-PRIMARY-35);
-  border-right: 0.063rem solid rgba(160, 11, 54, 0.2);
+  border-right: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
+}
+:host .ids-header-1177__nav-mobile__item.ids-header-1177__nav-mobile__item--unresponsive .ids-header-1177-nav-item-mobile__icon {
+  font-size: 1.5rem;
+  display: inline-block;
+  margin-bottom: -0.1875rem;
+  color: var(--IDS-COLOR-PRIMARY-40);
 }
 :host .ids-header-1177__nav-mobile__item.ids-header-1177__nav-mobile__item--unresponsive a,
 :host .ids-header-1177__nav-mobile__item.ids-header-1177__nav-mobile__item--unresponsive button {
@@ -1884,6 +2106,9 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   align-items: center;
   justify-content: center;
 }
+:host .ids-header-1177__nav-mobile__item.ids-header-1177__nav-mobile__item--unresponsive:hover {
+  color: var(--IDS-ICON__COLOR-PRESET-2-2);
+}
 :host .ids-header-1177__nav-mobile__item.ids-header-1177__nav-mobile__item--unresponsive:has(.ids-header-1177__nav-mobile__menu) {
   border-right: none;
 }