@inera/ids-design 8.2.0 → 9.0.0

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

@@ -0,0 +1,1318 @@
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+@media (max-width: 639px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+header.ids-header-1177-admin {
+  position: relative;
+  z-index: 1;
+  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 {
+  display: block;
+  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 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1rem;
+  height: 3rem;
+  text-align: center;
+  background-color: var(--IDS-SKIP-TO-CONTENT-LINK__BACKGROUND-COLOR);
+  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
+  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__skip-to-content ::slotted(a:focus-visible),
+header.ids-header-1177-admin .ids-header-1177-admin__skip-to-content a:focus-visible {
+  transform: translateY(0);
+  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  outline-offset: -0.375rem !important;
+}
+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;
+  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__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__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__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo {
+  height: 2.125rem;
+  width: 4.125rem;
+  margin-right: 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__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: 2.125rem;
+  width: 4.125rem;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: 0.063rem;
+}
+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;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e91e";
+  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__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+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 {
+  color: var(--IDS-HEADER-1177-ADMIN__LOGO-COLOR);
+  display: flex;
+  align-items: center;
+  height: 2.125rem;
+  width: 4.125rem;
+  font-size: 4rem;
+  overflow: hidden;
+  border-radius: 0.063rem;
+}
+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-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: 0 !important;
+}
+@media (max-width: 1024px) {
+  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__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__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand:before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 0.063rem;
+  top: 50%;
+  transform: translateY(-50%);
+  left: -1.25rem;
+  height: 2.75rem;
+  background-color: var(--IDS-HEADER-1177-ADMIN__SEPARATOR-COLOR);
+}
+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-HEADER-1177-ADMIN__BRAND-TEXT-COLOR);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 1.25rem;
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
+  text-decoration: none;
+  font-weight: 700;
+}
+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 (max-width: 1024px) {
+  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.188rem;
+  }
+  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: 1rem;
+  }
+}
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-right {
+  display: flex;
+  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__main .ids-header-1177-admin__main-right {
+    margin-right: 0;
+    padding-right: 0;
+  }
+}
+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;
+  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__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__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo {
+  height: 2.125rem;
+  width: 4.125rem;
+  margin-right: 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__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: 2.125rem;
+  width: 4.125rem;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: 0.063rem;
+}
+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;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e91e";
+  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__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+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 {
+  color: var(--IDS-HEADER-1177-ADMIN__LOGO-COLOR);
+  display: flex;
+  align-items: center;
+  height: 2.125rem;
+  width: 4.125rem;
+  font-size: 4rem;
+  overflow: hidden;
+  border-radius: 0.063rem;
+}
+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-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: 0 !important;
+}
+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__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand:before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 0.063rem;
+  top: 50%;
+  transform: translateY(-50%);
+  left: -1.25rem;
+  height: 2.75rem;
+  background-color: var(--IDS-HEADER-1177-ADMIN__SEPARATOR-COLOR);
+}
+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-HEADER-1177-ADMIN__BRAND-TEXT-COLOR);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 1.25rem;
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
+  text-decoration: none;
+  font-weight: 700;
+}
+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__main .ids-header-1177-admin__main-right {
+  display: flex;
+  padding-right: 0.25rem;
+  min-height: 3rem;
+  align-items: center;
+}
+
+.ids-header-1177-admin-item:not(.ids-header-1177-admin-item--unresponsive) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: 1.25rem;
+  text-decoration: none;
+  position: relative;
+  height: 2rem;
+  min-width: 2rem;
+  padding: 0.125rem;
+  box-sizing: initial;
+  border-radius: 0.0313rem;
+}
+.ids-header-1177-admin-item:not(.ids-header-1177-admin-item--unresponsive) .ids-header-1177-admin-item-icon {
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  position: absolute;
+  top: 0.125rem;
+  left: 0.375rem;
+}
+.ids-header-1177-admin-item:not(.ids-header-1177-admin-item--unresponsive) .ids-header-1177-admin-item-icon [class^=ids-icon-] {
+  font-size: 1.5rem;
+  color: var(--IDS-HEADER-1177-ADMIN-ITEM__COLOR);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ids-header-1177-admin-item:not(.ids-header-1177-admin-item--unresponsive) a {
+  cursor: pointer;
+  position: relative;
+  height: 2rem;
+  z-index: 1;
+  inset: 0;
+  padding: 0.125rem 0.125rem 0.125rem 2.6875rem;
+  margin: 0;
+  border: 0;
+  color: var(--IDS-HEADER-1177-ADMIN-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem !important;
+  font-size: 1rem;
+  text-align: center;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+  text-decoration: none;
+  border-radius: 0.0313rem;
+}
+.ids-header-1177-admin-item:not(.ids-header-1177-admin-item--unresponsive) button {
+  cursor: pointer;
+  position: relative;
+  height: 2rem;
+  z-index: 1;
+  inset: 0;
+  padding: 0;
+  padding: 0.125rem 0.125rem 0.125rem 2.6875rem;
+  margin: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--IDS-HEADER-1177-ADMIN-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem !important;
+  font-size: 1rem;
+  text-align: center;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+  border-radius: 0.0313rem;
+}
+.ids-header-1177-admin-item:not(.ids-header-1177-admin-item--unresponsive):hover .ids-header-1177-admin-item-icon {
+  color: var(--IDS-HEADER-1177-ADMIN-ITEM__HOVER-COLOR);
+}
+.ids-header-1177-admin-item:not(.ids-header-1177-admin-item--unresponsive):hover .ids-header-1177-admin-item-icon [class^=ids-icon-]:before {
+  color: var(--IDS-HEADER-1177-ADMIN-ITEM__HOVER-COLOR);
+}
+.ids-header-1177-admin-item:not(.ids-header-1177-admin-item--unresponsive) a:hover,
+.ids-header-1177-admin-item:not(.ids-header-1177-admin-item--unresponsive) button:hover {
+  color: var(--IDS-HEADER-1177-ADMIN-ITEM__HOVER-COLOR);
+  text-decoration: underline !important;
+  text-underline-offset: 0.125rem;
+}
+@media (max-width: 1024px) {
+  .ids-header-1177-admin-item:not(.ids-header-1177-admin-item--unresponsive) a,
+  .ids-header-1177-admin-item:not(.ids-header-1177-admin-item--unresponsive) a:hover,
+  .ids-header-1177-admin-item:not(.ids-header-1177-admin-item--unresponsive) button,
+  .ids-header-1177-admin-item:not(.ids-header-1177-admin-item--unresponsive) button:hover {
+    padding-left: 0.125rem;
+    color: transparent;
+    font-size: 0.0063rem;
+    width: 2rem;
+  }
+}
+@media (max-width: 1024px) {
+  .ids-header-1177-admin-item:not(.ids-header-1177-admin-item--unresponsive):not(.ids-header-1177-admin-item--mobile) {
+    display: none;
+  }
+}
+.ids-header-1177-admin-item.ids-header-1177-admin-item--unresponsive {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: 1.25rem;
+  text-decoration: none;
+  position: relative;
+  height: 2rem;
+  min-width: 2rem;
+  padding: 0.125rem;
+  box-sizing: initial;
+  border-radius: 0.0313rem;
+}
+.ids-header-1177-admin-item.ids-header-1177-admin-item--unresponsive .ids-header-1177-admin-item-icon {
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  position: absolute;
+  top: 0.125rem;
+  left: 0.375rem;
+}
+.ids-header-1177-admin-item.ids-header-1177-admin-item--unresponsive .ids-header-1177-admin-item-icon [class^=ids-icon-] {
+  font-size: 1.5rem;
+  color: var(--IDS-HEADER-1177-ADMIN-ITEM__COLOR);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ids-header-1177-admin-item.ids-header-1177-admin-item--unresponsive a {
+  cursor: pointer;
+  position: relative;
+  height: 2rem;
+  z-index: 1;
+  inset: 0;
+  padding: 0.125rem 0.125rem 0.125rem 2.6875rem;
+  margin: 0;
+  border: 0;
+  color: var(--IDS-HEADER-1177-ADMIN-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem !important;
+  font-size: 1rem;
+  text-align: center;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+  text-decoration: none;
+  border-radius: 0.0313rem;
+}
+.ids-header-1177-admin-item.ids-header-1177-admin-item--unresponsive button {
+  cursor: pointer;
+  position: relative;
+  height: 2rem;
+  z-index: 1;
+  inset: 0;
+  padding: 0;
+  padding: 0.125rem 0.125rem 0.125rem 2.6875rem;
+  margin: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--IDS-HEADER-1177-ADMIN-ITEM__COLOR);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.5rem !important;
+  font-size: 1rem;
+  text-align: center;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+  border-radius: 0.0313rem;
+}
+.ids-header-1177-admin-item.ids-header-1177-admin-item--unresponsive:hover .ids-header-1177-admin-item-icon {
+  color: var(--IDS-HEADER-1177-ADMIN-ITEM__HOVER-COLOR);
+}
+.ids-header-1177-admin-item.ids-header-1177-admin-item--unresponsive:hover .ids-header-1177-admin-item-icon [class^=ids-icon-]:before {
+  color: var(--IDS-HEADER-1177-ADMIN-ITEM__HOVER-COLOR);
+}
+.ids-header-1177-admin-item.ids-header-1177-admin-item--unresponsive a:hover,
+.ids-header-1177-admin-item.ids-header-1177-admin-item--unresponsive button:hover {
+  color: var(--IDS-HEADER-1177-ADMIN-ITEM__HOVER-COLOR);
+  text-decoration: underline !important;
+  text-underline-offset: 0.125rem;
+}
+.ids--light, .ids--dark {
+  --IDS-FONT-FAMILY-BASE: "Open Sans";
+  --IDS-FONT-FAMILY-HEADING: "Inter";
+  --IDS-FONT-COLOR: var(--ids-color-surface-text-on-default);
+  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.875rem;
+  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.875rem;
+  --IDS-HEADING-L__MARGIN-BOTTOM: 1.875rem;
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-brand-text-primary);
+  --IDS-PAGE-LIST__FONT-FAMILY: var(--IDS-FONT-FAMILY-HEADING);
+  --IDS-PAGE-LIST__FONT-SIZE: 1.25rem;
+  --IDS-PAGE-LIST__LINE-HEIGHT: 1.5rem;
+  --IDS-PAGE-LIST__FONT-WEIGHT: 700;
+  --IDS-PAGE-LIST__LETTER-SPACING: -0.025rem;
+  --IDS-BULLET-LIST__MARKER-COLOR: var(--ids-color-brand-text-primary);
+  --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: bold;
+  --IDS-BULLET-LIST__LINE-HEIGHT: 1.5rem;
+  --IDS-DIVIDER__COLOR: var(--ids-color-surface-border-default);
+}
+.ids--light.ids--1177-pro, .ids--light.ids--1177-admin, .ids--dark.ids--1177-pro, .ids--dark.ids--1177-admin {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
+}
+.ids--light.ids--inera, .ids--light.ids--inera-admin, .ids--dark.ids--inera, .ids--dark.ids--inera-admin {
+  --IDS-FONT-FAMILY-BASE: "Open Sans";
+  --IDS-FONT-FAMILY-HEADING: "Poppins";
+  --IDS-HEADING-XXL__MARGIN-BOTTOM: 1.25rem;
+  --IDS-HEADING-XL__MARGIN-BOTTOM: 1.25rem;
+  --IDS-HEADING-L__MARGIN-BOTTOM: 1.25rem;
+  --IDS-PAGE-LIST__FONT-WEIGHT: 600;
+  --IDS-PAGE-LIST__LETTER-SPACING: 0;
+  --IDS-BULLET-LIST__MARKER-FONT-WEIGHT: normal;
+  --IDS-BULLET-LIST__LINE-HEIGHT: 1.625rem;
+  --IDS-DESCRIPTION-LIST__TERM-FONT-WEIGHT: 600;
+}
+.ids--light.ids--dark, .ids--dark.ids--dark {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-navigation-text-default);
+}
+.ids--light.ids--dark.ids--1177-pro, .ids--light.ids--dark.ids--1177-admin, .ids--light.ids--dark.ids--inera, .ids--light.ids--dark.ids--inera-admin, .ids--dark.ids--dark.ids--1177-pro, .ids--dark.ids--dark.ids--1177-admin, .ids--dark.ids--dark.ids--inera, .ids--dark.ids--dark.ids--inera-admin {
+  --IDS-PAGE-LIST__COLOR: var(--ids-color-interactive-text-default);
+}
+
+.ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) {
+  justify-self: flex-end;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-left: 1.25rem;
+}
+@media (max-width: 1024px) {
+  .ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) {
+    display: none;
+  }
+}
+.ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) .ids-header-1177-admin-avatar__button {
+  position: relative;
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: 8.5rem;
+  max-width: 25rem;
+  padding: 0.5rem 2.75rem 0.5rem 3rem;
+  background-color: var(--IDS-HEADER-1177-ADMIN-AVATAR__BACKGROUND-COLOR);
+  border: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN-AVATAR__BORDER-COLOR);
+  border-radius: 6.25rem;
+  cursor: pointer;
+}
+.ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) .ids-header-1177-admin-avatar__button:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) .ids-header-1177-admin-avatar__button:before {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e923";
+  font-size: 1.25rem;
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR__ICON-COLOR);
+  left: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) .ids-header-1177-admin-avatar__button:after {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e936";
+  font-size: 1rem;
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR__ICON-COLOR);
+  background-color: var(--IDS-HEADER-1177-ADMIN-AVATAR__BACKGROUND-COLOR);
+  padding: 0.25rem 1rem 0.25rem 0.5rem;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 0.0625rem solid transparent;
+  border-radius: 6.25rem;
+}
+.ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) .ids-header-1177-admin-avatar__button:hover:before, .ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) .ids-header-1177-admin-avatar__button:hover::after {
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR__ICON-HOVER-COLOR);
+}
+.ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) .ids-header-1177-admin-avatar__button:focus-visible {
+  z-index: 20;
+}
+.ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) .ids-header-1177-admin-avatar__button.ids-header-1177-admin-avatar__button--expanded:after {
+  content: "\e939";
+}
+.ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) .ids-header-1177-admin-avatar__button .ids-header-1177-admin-avatar__name {
+  font-size: 1rem;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  text-align: left;
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR__COLOR);
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) .ids-header-1177-admin-avatar__button .ids-header-1177-admin-avatar__unit-separator {
+  margin: 0 0.375rem;
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR-SEPARATOR__COLOR);
+}
+.ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) .ids-header-1177-admin-avatar__button .ids-header-1177-admin-avatar__unit {
+  position: relative;
+  font-size: 1rem;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  font-size: 0.875rem;
+  text-align: left;
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR__COLOR);
+}
+.ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) .ids-header-1177-admin-avatar__menu {
+  display: none;
+  position: absolute;
+  left: auto;
+  right: 1rem;
+  top: calc(100% - 0.5rem);
+  z-index: 12;
+  width: 20rem;
+  background-color: var(--IDS-HEADER-1177-ADMIN-AVATAR__DROPDOWN-BACKGROUND-COLOR);
+  border: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN-AVATAR__DROPDOWN-BORDER-COLOR);
+  padding: 1.25rem;
+  box-sizing: border-box;
+  border-radius: 0.625rem;
+  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
+}
+.ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) .ids-header-1177-admin-avatar__menu.ids-header-1177-admin-avatar__menu--expanded {
+  display: block;
+}
+.ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) .ids-header-1177-admin-avatar__menu .ids-header-1177-admin-avatar__menu-links {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.ids-header-1177-admin-avatar:not(.ids-header-1177-admin-avatar--unresponsive) .ids-header-1177-admin-avatar__menu .ids-header-1177-admin-avatar__menu-links hr {
+  width: 100%;
+  height: 0.0313rem;
+  display: block;
+  margin: 0;
+  border: 0;
+  border-top: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN-AVATAR__MENU-SEPARATOR-COLOR);
+}
+.ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive {
+  justify-self: flex-end;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-left: 1.25rem;
+}
+.ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive .ids-header-1177-admin-avatar__button {
+  position: relative;
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: 8.5rem;
+  max-width: 25rem;
+  padding: 0.5rem 2.75rem 0.5rem 3rem;
+  background-color: var(--IDS-HEADER-1177-ADMIN-AVATAR__BACKGROUND-COLOR);
+  border: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN-AVATAR__BORDER-COLOR);
+  border-radius: 6.25rem;
+  cursor: pointer;
+}
+.ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive .ids-header-1177-admin-avatar__button:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive .ids-header-1177-admin-avatar__button:before {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e923";
+  font-size: 1.25rem;
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR__ICON-COLOR);
+  left: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive .ids-header-1177-admin-avatar__button:after {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e936";
+  font-size: 1rem;
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR__ICON-COLOR);
+  background-color: var(--IDS-HEADER-1177-ADMIN-AVATAR__BACKGROUND-COLOR);
+  padding: 0.25rem 1rem 0.25rem 0.5rem;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  border: 0.0625rem solid transparent;
+  border-radius: 6.25rem;
+}
+.ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive .ids-header-1177-admin-avatar__button:hover:before, .ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive .ids-header-1177-admin-avatar__button:hover::after {
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR__ICON-HOVER-COLOR);
+}
+.ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive .ids-header-1177-admin-avatar__button:focus-visible {
+  z-index: 20;
+}
+.ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive .ids-header-1177-admin-avatar__button.ids-header-1177-admin-avatar__button--expanded:after {
+  content: "\e939";
+}
+.ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive .ids-header-1177-admin-avatar__button .ids-header-1177-admin-avatar__name {
+  font-size: 1rem;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  text-align: left;
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR__COLOR);
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive .ids-header-1177-admin-avatar__button .ids-header-1177-admin-avatar__unit-separator {
+  margin: 0 0.375rem;
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR-SEPARATOR__COLOR);
+}
+.ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive .ids-header-1177-admin-avatar__button .ids-header-1177-admin-avatar__unit {
+  position: relative;
+  font-size: 1rem;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  font-size: 0.875rem;
+  text-align: left;
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR__COLOR);
+}
+.ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive .ids-header-1177-admin-avatar__menu {
+  display: none;
+  position: absolute;
+  left: auto;
+  right: 1rem;
+  top: calc(100% - 0.5rem);
+  z-index: 12;
+  width: 20rem;
+  background-color: var(--IDS-HEADER-1177-ADMIN-AVATAR__DROPDOWN-BACKGROUND-COLOR);
+  border: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN-AVATAR__DROPDOWN-BORDER-COLOR);
+  padding: 1.25rem;
+  box-sizing: border-box;
+  border-radius: 0.625rem;
+  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
+}
+.ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive .ids-header-1177-admin-avatar__menu.ids-header-1177-admin-avatar__menu--expanded {
+  display: block;
+}
+.ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive .ids-header-1177-admin-avatar__menu .ids-header-1177-admin-avatar__menu-links {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.ids-header-1177-admin-avatar.ids-header-1177-admin-avatar--unresponsive .ids-header-1177-admin-avatar__menu .ids-header-1177-admin-avatar__menu-links hr {
+  width: 100%;
+  height: 0.0313rem;
+  display: block;
+  margin: 0;
+  border: 0;
+  border-top: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN-AVATAR__MENU-SEPARATOR-COLOR);
+}
+
+.ids-header-1177-admin-menu-mobile {
+  display: none;
+}
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button {
+  border: 0;
+  background-color: transparent;
+  height: 2.25rem;
+  width: 2.25rem;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  cursor: pointer;
+  margin-left: 0.75rem;
+}
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button .ids-hamburger {
+  transition: all 0.2s;
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  flex-shrink: 0;
+}
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button .ids-hamburger__lines {
+  display: block;
+  cursor: pointer;
+  width: 1.3125rem;
+  border-radius: 0.125rem;
+  transition: all 0.2s;
+  background-color: var(--IDS-HEADER-1177-ADMIN-MOBILE-MENU__HAMBURGER-COLOR);
+  position: relative;
+  height: 0.125rem;
+  width: 1.25rem;
+}
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button .ids-hamburger__lines:before,
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button .ids-hamburger__lines:after {
+  display: inline-block;
+  width: 1.3125rem;
+  border-radius: 0.125rem;
+  transition: all 0.2s;
+  background-color: var(--IDS-HEADER-1177-ADMIN-MOBILE-MENU__HAMBURGER-COLOR);
+  position: absolute;
+  left: 0;
+  content: "";
+  -webkit-transform-origin: 0.09375rem center;
+  transform-origin: 0.09375rem center;
+}
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button .ids-hamburger__lines:before,
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button .ids-hamburger__lines:after {
+  height: 0.125rem;
+  width: 1.25rem;
+}
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button .ids-hamburger__lines:before,
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button .ids-hamburger__lines:after {
+  -webkit-transform-origin: 0.13393rem center;
+  transform-origin: 0.13393rem center;
+}
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button .ids-hamburger__lines:before {
+  top: 0.5rem;
+}
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button .ids-hamburger__lines:after {
+  top: -0.5rem;
+}
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button:hover .ids-hamburger__lines,
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button:hover .ids-hamburger__lines:before,
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button:hover .ids-hamburger__lines:after {
+  background-color: var(--IDS-HEADER-1177-ADMIN-MOBILE-MENU__HAMBURGER-HOVER-COLOR);
+}
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines {
+  background: transparent;
+}
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button[aria-expanded=true] .ids-hamburger .ids-hamburger__lines:before, .ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button[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-menu-mobile .ids-header-1177-admin-menu-mobile__button[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-menu-mobile .ids-header-1177-admin-menu-mobile__button[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-menu-mobile .ids-header-1177-admin-menu-mobile__button:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: 0 !important;
+  border-radius: 0.0625rem;
+}
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__button:focus-visible[aria-expanded=true] {
+  border-radius: 100%;
+}
+.ids-header-1177-admin-menu-mobile .ids-header-1177-admin-menu-mobile__items {
+  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-1);
+  background-color: var(--IDS-HEADER-1177-ADMIN-MOBILE-MENU__BACKGROUND-COLOR);
+  border-top: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN-MOBILE-MENU__BORDER-COLOR);
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  top: 100%;
+  display: none;
+}
+@media (max-width: 1024px) {
+  .ids-header-1177-admin-menu-mobile {
+    display: block;
+  }
+}
+.ids-header-1177-admin-menu-mobile.ids-header-1177-admin-menu-mobile--expanded .ids-header-1177-admin-menu-mobile__items {
+  display: block;
+}
+.ids-header-1177-admin-menu-mobile.ids-header-1177-admin-menu-mobile--unresponsive {
+  display: none;
+}
+
+.ids-header-1177-admin-avatar-mobile {
+  position: relative;
+  display: none;
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+.ids-header-1177-admin-avatar-mobile.ids-header-1177-admin-avatar-mobile--unresponsive {
+  display: none;
+}
+@media (max-width: 1024px) {
+  .ids-header-1177-admin-avatar-mobile {
+    display: flex;
+  }
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__login-link {
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__LINK-COLOR);
+  align-self: flex-end;
+  position: relative;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__login-link:before {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e923";
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__ICON-COLOR);
+  left: 0;
+  top: 50%;
+  font-size: 1.25rem;
+  transform: translateY(-50%);
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__login-link a {
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__LINK-COLOR);
+  white-space: nowrap;
+  position: relative;
+  padding: 0.5rem 0.5rem 0.5rem 1.75rem;
+  left: 0;
+  border-radius: 0.0313rem;
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__login-link a:hover {
+  cursor: pointer;
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__HOVER-COLOR);
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__login-link:hover:before {
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__HOVER-COLOR);
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__menu-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: flex-end;
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__button {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  position: relative;
+  padding: 0.25rem 2.5rem;
+  border-radius: 6.25rem;
+  border: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__BORDER-COLOR);
+  background-color: var(--IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__BACKGROUND-COLOR);
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__button:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__button:before {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e923";
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__ICON-COLOR);
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__button:after {
+  font: icon;
+  font-family: "Inera-Design-Icons" !important;
+  display: block;
+  position: absolute;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\e936";
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__ICON-COLOR);
+  background-color: var(--IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__BACKGROUND-COLOR);
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__button.ids-header-1177-admin-avatar-mobile__button--expanded:after {
+  content: "\e939";
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__button:hover:before, .ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__button:hover:after {
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__ICON-HOVER-COLOR);
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile-content__name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.875rem;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__COLOR);
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__menu {
+  display: none;
+  position: absolute;
+  z-index: 12;
+  background-color: var(--IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__DROPDOWN-BACKGROUND-COLOR);
+  padding: 0 1.25rem 1.25rem 1.25rem;
+  box-sizing: border-box;
+  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
+  border-radius: 0.625rem;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  width: -webkit-fill-available;
+  width: -moz-available;
+  left: -1rem;
+  right: -1rem;
+  top: calc(100% + 0.5rem);
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__menu.ids-header-1177-admin-avatar-mobile__menu--expanded {
+  display: block;
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__menu .ids-header-1177-admin-avatar-mobile__unit {
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  color: var(--IDS-HEADER-1177-ADMIN-AVATAR-MOBILE__COLOR);
+  margin-bottom: 1.75rem;
+  margin-top: 0.25rem;
+  padding-bottom: 0.75rem;
+  font-family: var(--IDS-FONT-FAMILY-BASE);
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  border-bottom: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN-AVATAR__MENU-SEPARATOR-COLOR);
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__menu .ids-header-1177-admin-avatar-mobile__menu-links {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.ids-header-1177-admin-avatar-mobile .ids-header-1177-admin-avatar-mobile__menu .ids-header-1177-admin-avatar-mobile__menu-links hr {
+  width: 100%;
+  height: 0.0313rem;
+  display: block;
+  margin: 0;
+  border: 0;
+  border-top: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN-AVATAR__MENU-SEPARATOR-COLOR);
+}
+
+nav.ids-header-1177-admin-nav:not(.ids-header-1177-admin-nav--unresponsive) {
+  position: relative;
+  background-color: var(--IDS-HEADER-1177-ADMIN-NAV__BACKGROUND-COLOR-DESKTOP);
+}
+nav.ids-header-1177-admin-nav:not(.ids-header-1177-admin-nav--unresponsive) .ids-header-1177-admin-nav__inner {
+  max-width: var(--IDS__MAX-WIDTH);
+  padding: var(--IDS__CONTAINER-PADDING);
+  border-top: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0 auto;
+}
+nav.ids-header-1177-admin-nav:not(.ids-header-1177-admin-nav--unresponsive) .ids-header-1177-admin-nav__items {
+  display: flex;
+  width: 100%;
+  border-top: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN-NAV__TOP-BORDER-COLOR);
+}
+@media (max-width: 1024px) {
+  nav.ids-header-1177-admin-nav:not(.ids-header-1177-admin-nav--unresponsive) .ids-header-1177-admin-nav__items {
+    border-top: 0;
+    justify-content: flex-end;
+  }
+  nav.ids-header-1177-admin-nav:not(.ids-header-1177-admin-nav--unresponsive) .ids-header-1177-admin-nav__inner {
+    border-top: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN-NAV__BORDER-COLOR);
+    background-color: var(--IDS-HEADER-1177-ADMIN-NAV__BACKGROUND-COLOR-MOBILE);
+    height: 3rem;
+    flex-wrap: wrap;
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+}
+nav.ids-header-1177-admin-nav.ids-header-1177-admin-nav--unresponsive {
+  position: relative;
+  background-color: var(--IDS-HEADER-1177-ADMIN-NAV__BACKGROUND-COLOR-DESKTOP);
+}
+nav.ids-header-1177-admin-nav.ids-header-1177-admin-nav--unresponsive .ids-header-1177-admin-nav__inner {
+  max-width: var(--IDS__MAX-WIDTH);
+  padding: var(--IDS__CONTAINER-PADDING);
+  border-top: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0 auto;
+}
+nav.ids-header-1177-admin-nav.ids-header-1177-admin-nav--unresponsive .ids-header-1177-admin-nav__items {
+  display: flex;
+  width: 100%;
+  border-top: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN-NAV__TOP-BORDER-COLOR);
+}
+
+.ids-header-1177-admin-nav-item {
+  display: none;
+}
+.ids-header-1177-admin-nav-item ids-notification-badge,
+.ids-header-1177-admin-nav-item .ids-notification-badge {
+  margin-left: 0.188rem;
+  display: inline-flex;
+  height: 0;
+  position: relative;
+  top: -0.0625rem;
+}
+.ids-header-1177-admin-nav-item.ids-header-1177-admin-nav-item--unresponsive {
+  display: block;
+}
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__button,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__link {
+  display: block;
+  position: relative;
+  padding: 0.5rem 0.75rem;
+  outline-offset: -0.125rem !important;
+  text-decoration: none;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  font-weight: var(--IDS-HEADER-1177-ADMIN-NAV-ITEM__FONT-WEIGHT);
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
+  color: var(--IDS-HEADER-1177-ADMIN-NAV-ITEM__COLOR);
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+}
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__button:after,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__link:after {
+  content: "";
+  background-color: var(--IDS-HEADER-1177-ADMIN-NAV-ITEM__BOTTOM-BORDER-COLOR);
+  display: block;
+  height: 0.313rem;
+  left: 0;
+  right: 100%;
+  bottom: 0;
+  position: absolute;
+  transition: all 0.3s ease;
+  width: 0;
+  margin-left: 0.625rem;
+  margin-right: 0.625rem;
+}
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__button a,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__link a {
+  padding: 0.3125rem 0;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  font-weight: var(--IDS-HEADER-1177-ADMIN-NAV-ITEM__FONT-WEIGHT);
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
+  color: var(--IDS-HEADER-1177-ADMIN-NAV-ITEM__COLOR);
+  text-decoration: none;
+}
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__button:hover,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__link:hover {
+  text-decoration: none;
+}
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__button:hover:after,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__link:hover:after {
+  width: auto;
+  right: 0;
+}
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__button a:focus-visible,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__link a:focus-visible {
+  outline: var(--IDS-FOCUS__OUTLINE);
+}
+.ids-header-1177-admin-nav-item button:focus-visible {
+  outline: var(--IDS-FOCUS__OUTLINE);
+}
+.ids-header-1177-admin-nav-item.ids-header-1177-admin-nav-item--active .ids-header-1177-admin-nav-item__button:after,
+.ids-header-1177-admin-nav-item.ids-header-1177-admin-nav-item--active .ids-header-1177-admin-nav-item__link:after {
+  width: auto;
+  right: 0;
+}
+.ids-header-1177-admin-nav-item.ids-header-1177-admin-nav-item--expanded .ids-header-1177-admin-nav-item__button,
+.ids-header-1177-admin-nav-item.ids-header-1177-admin-nav-item--expanded .ids-header-1177-admin-nav-item__link {
+  color: var(--IDS-HEADER-1177-ADMIN-NAV-ITEM__COLOR);
+}
+.ids-header-1177-admin-nav-item.ids-header-1177-admin-nav-item--expanded .ids-header-1177-admin-nav-item__button:after,
+.ids-header-1177-admin-nav-item.ids-header-1177-admin-nav-item--expanded .ids-header-1177-admin-nav-item__link:after {
+  width: auto;
+  right: 0;
+}
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__menu {
+  border-top: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN__BORDER-COLOR);
+  background-color: var(--IDS-HEADER-1177-ADMIN-NAV-ITEM-MENU__BACKGROUND-COLOR);
+  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
+  left: 0;
+  right: 0;
+  top: 100%;
+  min-height: 10.813rem;
+  overflow: hidden;
+  padding: 3rem 0;
+  position: absolute;
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+  display: none;
+}
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__menu.ids-header-1177-admin-nav-item__menu--expanded {
+  display: block;
+}
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__menu-content {
+  max-width: var(--IDS__MAX-WIDTH);
+  padding: var(--IDS__CONTAINER-PADDING);
+  box-sizing: border-box;
+  margin: 0 auto;
+  width: 100%;
+  display: flex;
+}
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__menu-col-1,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__menu-col-2,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__menu-col-3,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__menu-col-4 {
+  flex: 0 25%;
+  flex-shrink: 0;
+}
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__menu-col-1 ids-link,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__menu-col-1 .ids-header-1177-admin-nav__menu-item-wrapper,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__menu-col-2 ids-link,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__menu-col-2 .ids-header-1177-admin-nav__menu-item-wrapper,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__menu-col-3 ids-link,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__menu-col-3 .ids-header-1177-admin-nav__menu-item-wrapper,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__menu-col-4 ids-link,
+.ids-header-1177-admin-nav-item .ids-header-1177-admin-nav-item__menu-col-4 .ids-header-1177-admin-nav__menu-item-wrapper {
+  display: flex;
+  padding: 0.5rem 0;
+  margin-right: 2.5rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  border-bottom: 0.063rem solid var(--IDS-HEADER-1177-ADMIN-NAV-ITEM-MENU__LINK-BORDER-COLOR);
+}
+@media only screen and (min-width: 1024px) {
+  .ids-header-1177-admin-nav-item {
+    display: flex;
+  }
+}
+
+:host .ids-header-1177-admin-nav-item {
+  margin-bottom: -0.0625rem;
+}
+
+.ids-header-1177-admin-nav-item-mobile {
+  display: none;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  padding: 0 0.25rem;
+  margin-left: 0.75rem;
+  height: 2rem;
+  position: relative;
+  color: var(--IDS-HEADER-1177-ADMIN-NAV-ITEM-MOBILE__COLOR);
+  cursor: pointer;
+}
+.ids-header-1177-admin-nav-item-mobile .ids-header-1177-admin-nav-item-mobile__icon {
+  font-size: 1.5rem;
+  display: inline-block;
+  margin-bottom: -0.1875rem;
+  color: var(--IDS-HEADER-1177-ADMIN-NAV-ITEM-MOBILE__COLOR);
+  position: absolute;
+  left: 0.25rem;
+}
+.ids-header-1177-admin-nav-item-mobile a,
+.ids-header-1177-admin-nav-item-mobile button {
+  height: 2rem;
+  display: flex;
+  text-decoration: none;
+  color: var(--IDS-HEADER-1177-ADMIN-NAV-ITEM-MOBILE__COLOR);
+  align-items: center;
+  justify-content: flex-end;
+  padding-left: 2rem;
+  padding-right: 0.25rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.ids-header-1177-admin-nav-item-mobile:hover .ids-header-1177-admin-nav-item-mobile__icon {
+  color: var(--IDS-HEADER-1177-ADMIN-NAV-ITEM-MOBILE__HOVER-COLOR);
+}
+.ids-header-1177-admin-nav-item-mobile a:hover,
+.ids-header-1177-admin-nav-item-mobile button:hover {
+  color: var(--IDS-HEADER-1177-ADMIN-NAV-ITEM-MOBILE__HOVER-COLOR);
+  text-decoration: underline;
+  text-underline-offset: 0.125rem;
+}
+@media (max-width: 1024px) {
+  .ids-header-1177-admin-nav-item-mobile:not(.ids-header-1177-nav-item-mobile--unresponsive) {
+    display: flex;
+  }
+}