npm - @inera/ids-design - Versions diffs - 7.2.1 → 8.0.0 - Mend

@inera/ids-design 7.2.1 → 8.0.0

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

package/components/header-1177-admin/header-1177-admin.css CHANGED Viewed

@@ -5,7 +5,7 @@
 * BUTTONS
 ********/
 /*******
-* SCROLLBARS
+* SCROLLBAR
 ********/
 /*******
 * FORM
@@ -25,134 +25,15 @@
   }
 }
-.ids-header-1177-admin__mobile-menu {
-  display: none;
-}
-@media (max-width: 1024px) {
-  .ids-header-1177-admin__mobile-menu {
-    display: flex;
-  }
-}
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn {
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-  display: flex;
-  width: 100%;
-  gap: 0.313rem;
-  text-decoration: none;
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0.25rem 0.5rem;
-  font: inherit;
-  cursor: pointer;
-  color: var(--IDS-COLOR-ACCENT-40);
-  align-items: center;
-  justify-content: center;
-  height: 1.5rem;
-  width: 2rem;
-}
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger {
-  transition: all 0.2s;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-}
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines {
-  display: block;
-  cursor: pointer;
-  width: 1.3125rem;
-  border-radius: 0.125rem;
-  transition: all 0.2s;
-  background-color: var(--IDS-COLOR-ACCENT-40);
-  position: relative;
-  height: 0.125rem;
-  width: 1.25rem;
-}
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines:before,
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines:after {
-  display: inline-block;
-  width: 1.3125rem;
-  border-radius: 0.125rem;
-  transition: all 0.2s;
-  background-color: var(--IDS-COLOR-ACCENT-40);
-  position: absolute;
-  left: 0;
-  content: "";
-  -webkit-transform-origin: 0.09375rem center;
-  transform-origin: 0.09375rem center;
-}
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines:before,
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines:after {
-  height: 0.125rem;
-  width: 1.25rem;
-}
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines:before,
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines:after {
-  -webkit-transform-origin: 0.13393rem center;
-  transform-origin: 0.13393rem center;
-}
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines:before {
-  top: 0.5rem;
-}
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn .ids-hamburger__lines:after {
-  top: -0.5rem;
-}
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn[aria-expanded=true] .ids-hamburger .ids-hamburger__lines {
-  background: transparent;
-}
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before, .ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after {
-  -ms-transform-origin: 50% 50%;
-  -webkit-transform-origin: 50% 50%;
-  transform-origin: 50% 50%;
-  top: 0;
-  width: 1.5rem;
-  left: -0.1rem;
-}
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before {
-  -ms-transform: rotate(45deg);
-  -webkit-transform: rotate3d(0, 0, 1, 45deg);
-  transform: rotate3d(0, 0, 1, 45deg);
-}
-.ids-header-1177-admin__mobile-menu .ids-header-1177-admin__mobile-menu__btn[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:after {
-  -ms-transform: rotate(-45deg);
-  -webkit-transform: rotate3d(0, 0, 1, -45deg);
-  transform: rotate3d(0, 0, 1, -45deg);
-}
-.ids-header-1177-admin__nav-mobile__menu-items {
-  display: none;
-  position: absolute;
-  left: 0;
-  right: 0;
-  z-index: 10;
-  top: calc(100% + 0.063rem);
-  box-shadow: 0 0.125rem 0.313rem #c5c5c5;
-}
-@media (max-width: 1024px) {
-  .ids-header-1177-admin__nav-mobile__menu-items {
-    display: block;
-  }
-}
-.ids-header-1177-admin--unresponsive .ids-header-1177-admin__mobile-menu {
-  display: none !important;
-}
 header.ids-header-1177-admin {
   position: relative;
   z-index: 1;
-  background: var(--IDS-COLOR-NEUTRAL-100);
-  box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.2);
+  background-color: var(--IDS-HEADER-1177-ADMIN__BACKGROUND-COLOR);
+  border-bottom: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN__BORDER-COLOR);
+}
+header.ids-header-1177-admin .ids-header-1177-admin__skip-to-content {
+  position: relative;
+  z-index: 20;
 }
 header.ids-header-1177-admin .ids-header-1177-admin__skip-to-content ::slotted(a),
 header.ids-header-1177-admin .ids-header-1177-admin__skip-to-content a {
@@ -162,8 +43,8 @@ header.ids-header-1177-admin .ids-header-1177-admin__skip-to-content a {
   padding: 0 1rem;
   height: 3rem;
   text-align: center;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-  box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.625rem 0;
+  background-color: var(--IDS-SKIP-TO-CONTENT-LINK__BACKGROUND-COLOR);
+  box-shadow: var(--IDS-BOX-SHADOW);
   z-index: 20;
   font-family: var(--IDS-LINK__FONT-FAMILY);
   font-size: 1rem;
@@ -184,57 +65,51 @@ header.ids-header-1177-admin .ids-header-1177-admin__skip-to-content a:focus {
   text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
   outline-offset: -0.375rem !important;
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container {
-  position: relative;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-}
-@media (max-width: 1024px) {
-  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container {
-    z-index: 10;
-    padding: 0;
-  }
-}
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner {
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main {
   max-width: var(--IDS__MAX-WIDTH);
+  padding: var(--IDS__CONTAINER-PADDING);
+  background-color: var(--IDS-HEADER-1177-ADMIN__BACKGROUND-COLOR);
   width: 100%;
   min-height: 3.75rem;
   position: relative;
   align-items: center;
   display: flex;
-  flex-wrap: wrap;
   justify-content: space-between;
   margin: 0 auto;
   box-sizing: border-box;
+  z-index: 2;
 }
 @media (max-width: 1024px) {
-  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner {
-    padding: 0 1.25rem;
+  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main {
+    padding: 0 1rem;
     min-height: 3rem;
     border-bottom: none;
+    z-index: 10;
   }
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col {
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left {
   display: flex;
   align-items: center;
   min-height: 3rem;
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo {
-  height: 1.5rem;
-  width: 3.938rem;
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo {
+  height: 2rem;
+  width: 4.125rem;
   margin-right: 1.25rem;
-  margin-left: 1.25rem;
+  margin-left: 0.25rem;
   display: flex;
   align-items: center;
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo .ids-header-1177-admin__logo-link {
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo .ids-header-1177-admin__logo-link {
   position: relative;
   display: flex;
   align-items: center;
-  height: 1.5rem;
-  width: 3.938rem;
+  height: 2rem;
+  width: 4.125rem;
   cursor: pointer;
+  overflow: hidden;
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo .ids-header-1177-admin__logo-link:before {
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo .ids-header-1177-admin__logo-link:before {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
   display: block;
@@ -243,42 +118,45 @@ header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-head
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e91e";
-  color: var(--IDS-ICON__COLOR);
+  color: var(--IDS-HEADER-1177-ADMIN__LOGO-COLOR);
   font-size: 4rem;
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo a:focus,
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo ::slotted([slot=logo]):focus,
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo ::slotted(a):focus {
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a:focus,
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted([slot=logo]):focus,
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted(a):focus {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo a,
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo ::slotted([slot=logo]),
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo ::slotted(a) {
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a,
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted([slot=logo]),
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted(a) {
+  color: var(--IDS-HEADER-1177-ADMIN__LOGO-COLOR);
   display: flex;
   align-items: center;
   height: 1.5rem;
   width: 3.938rem;
+  font-size: 4rem;
+  overflow: hidden;
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo a:focus,
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo ::slotted([slot=logo]:focus),
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo ::slotted(a:focus) {
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a:focus,
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted([slot=logo]:focus),
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted(a:focus) {
   outline: var(--IDS-FOCUS__OUTLINE) !important;
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
 }
 @media (max-width: 1024px) {
-  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo {
+  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo {
     margin-left: 0;
   }
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand {
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand {
   display: flex;
   flex-direction: column;
   margin-left: 1.25rem !important;
   position: relative;
   font-family: var(--IDS-FONT-FAMILY-HEADING);
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand:before {
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand:before {
   content: "";
   position: absolute;
   display: block;
@@ -287,13 +165,13 @@ header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-head
   transform: translateY(-50%);
   left: -1.25rem;
   height: 2.188rem;
-  background: var(--IDS-COLOR-ACCENT-30);
+  background-color: var(--IDS-HEADER-1177-ADMIN__SEPARATOR-COLOR);
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text {
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text {
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 0;
-  color: var(--IDS-COLOR-ACCENT-30);
+  color: var(--IDS-HEADER-1177-ADMIN__BRAND-TEXT-COLOR);
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 1rem;
@@ -301,111 +179,74 @@ header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-head
   text-decoration: none;
   font-weight: 700;
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text---supplement {
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text---supplement {
+  color: var(--IDS-HEADER-1177-ADMIN__BRAND-TEXT-COLOR);
   line-height: 1.25rem;
   font-weight: normal;
   font-size: 0.875rem !important;
   font-family: var(--IDS-FONT-FAMILY-HEADING) !important;
 }
 @media (min-width: 1024px) {
-  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand .ids-header-1177-admin__brand:before {
+  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand:before {
     height: 2.75rem;
   }
-  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text {
+  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text {
     font-size: 1.25rem;
   }
-  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text---supplement {
+  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text---supplement {
     font-size: 0.875rem !important;
   }
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__items {
-  display: block;
-  margin-left: auto;
-}
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__items-inner {
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-right {
   display: flex;
-  gap: 2.5rem;
-  padding-right: 1.25rem;
-  padding-right: 1.25rem;
-  padding-left: 1rem;
+  flex-wrap: wrap;
+  padding-right: 0.25rem;
   min-height: 3rem;
   align-items: center;
 }
 @media (max-width: 1024px) {
-  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__items-inner {
-    gap: 0.5rem;
+  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-right {
     margin-right: 0;
     padding-right: 0;
   }
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__skip-to-content ::slotted(a),
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__skip-to-content a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1rem;
-  height: 3rem;
-  text-align: center;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-  box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.625rem 0;
-  z-index: 20;
-  font-family: var(--IDS-LINK__FONT-FAMILY);
-  font-size: 1rem;
-  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;
-  left: 0;
-  transform: translateY(-300%);
-  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__skip-to-content ::slotted(a:focus),
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__skip-to-content a:focus {
-  transform: translateY(0);
-  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-  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-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container {
-  position: relative;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-}
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner {
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main {
   max-width: var(--IDS__MAX-WIDTH);
+  padding: var(--IDS__CONTAINER-PADDING);
+  background-color: var(--IDS-HEADER-1177-ADMIN__BACKGROUND-COLOR);
   width: 100%;
   min-height: 3.75rem;
   position: relative;
   align-items: center;
   display: flex;
-  flex-wrap: wrap;
   justify-content: space-between;
   margin: 0 auto;
   box-sizing: border-box;
+  z-index: 2;
 }
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col {
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left {
   display: flex;
   align-items: center;
   min-height: 3rem;
 }
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo {
-  height: 1.5rem;
-  width: 3.938rem;
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo {
+  height: 2rem;
+  width: 4.125rem;
   margin-right: 1.25rem;
-  margin-left: 1.25rem;
+  margin-left: 0.25rem;
   display: flex;
   align-items: center;
 }
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo .ids-header-1177-admin__logo-link {
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo .ids-header-1177-admin__logo-link {
   position: relative;
   display: flex;
   align-items: center;
-  height: 1.5rem;
-  width: 3.938rem;
+  height: 2rem;
+  width: 4.125rem;
   cursor: pointer;
+  overflow: hidden;
 }
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo .ids-header-1177-admin__logo-link:before {
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo .ids-header-1177-admin__logo-link:before {
   font: icon;
   font-family: "Inera-Design-Icons" !important;
   display: block;
@@ -414,37 +255,40 @@ header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-117
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e91e";
-  color: var(--IDS-ICON__COLOR);
+  color: var(--IDS-HEADER-1177-ADMIN__LOGO-COLOR);
   font-size: 4rem;
 }
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo a:focus,
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo ::slotted([slot=logo]):focus,
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo ::slotted(a):focus {
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a:focus,
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted([slot=logo]):focus,
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted(a):focus {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo a,
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo ::slotted([slot=logo]),
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo ::slotted(a) {
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a,
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted([slot=logo]),
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted(a) {
+  color: var(--IDS-HEADER-1177-ADMIN__LOGO-COLOR);
   display: flex;
   align-items: center;
   height: 1.5rem;
   width: 3.938rem;
+  font-size: 4rem;
+  overflow: hidden;
 }
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo a:focus,
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo ::slotted([slot=logo]:focus),
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__logo ::slotted(a:focus) {
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a:focus,
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted([slot=logo]:focus),
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted(a:focus) {
   outline: var(--IDS-FOCUS__OUTLINE) !important;
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
 }
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand {
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand {
   display: flex;
   flex-direction: column;
   margin-left: 1.25rem !important;
   position: relative;
   font-family: var(--IDS-FONT-FAMILY-HEADING);
 }
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand:before {
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand:before {
   content: "";
   position: absolute;
   display: block;
@@ -453,13 +297,13 @@ header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-117
   transform: translateY(-50%);
   left: -1.25rem;
   height: 2.188rem;
-  background: var(--IDS-COLOR-ACCENT-30);
+  background-color: var(--IDS-HEADER-1177-ADMIN__SEPARATOR-COLOR);
 }
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text {
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text {
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 0;
-  color: var(--IDS-COLOR-ACCENT-30);
+  color: var(--IDS-HEADER-1177-ADMIN__BRAND-TEXT-COLOR);
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 1rem;
@@ -467,55 +311,17 @@ header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-117
   text-decoration: none;
   font-weight: 700;
 }
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__logo-col .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text---supplement {
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text---supplement {
+  color: var(--IDS-HEADER-1177-ADMIN__BRAND-TEXT-COLOR);
   line-height: 1.25rem;
   font-weight: normal;
   font-size: 0.875rem !important;
   font-family: var(--IDS-FONT-FAMILY-HEADING) !important;
 }
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__items {
-  display: block;
-  margin-left: auto;
-}
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__container .ids-header-1177-admin__inner .ids-header-1177-admin__items-inner {
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-right {
   display: flex;
-  gap: 2.5rem;
-  padding-right: 1.25rem;
-  padding-right: 1.25rem;
-  padding-left: 1rem;
+  flex-wrap: wrap;
+  padding-right: 0.25rem;
   min-height: 3rem;
   align-items: center;
-}
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__skip-to-content ::slotted(a),
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__skip-to-content a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1rem;
-  height: 3rem;
-  text-align: center;
-  background-color: var(--IDS-COLOR-NEUTRAL-100);
-  box-shadow: rgba(0, 0, 0, 0.3) 0 0 0.625rem 0;
-  z-index: 20;
-  font-family: var(--IDS-LINK__FONT-FAMILY);
-  font-size: 1rem;
-  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;
-  left: 0;
-  transform: translateY(-300%);
-  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__skip-to-content ::slotted(a:focus),
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__skip-to-content a:focus {
-  transform: translateY(0);
-  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-  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-admin.ids-header-1177-admin--fluid .ids-header-1177-admin__container .ids-header-1177-admin__inner {
-  max-width: 100% !important;
 }