@inera/ids-design 5.0.3 → 5.1.1

package/themes/inera/inera.css

@@ -71,12 +71,36 @@ body.ids {
   }
 }
 
+/* This is generated by tailwind/util-tailwind.scss */
 /* Pre-existing utility classes begin here */
 /* Force elements to be displayed as block elements */
 .ids-block {
   display: block !important;
 }
 
+.ids-bg-1 {
+  background-color: white;
+}
+
+.ids-bg-2 {
+  background-color: var(--IDS-COLOR-SECONDARY-95);
+}
+
+/* Removes native button styling */
+.ids-btn-no-styles {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+}
+.ids-btn-no-styles:focus {
+  outline: var(--focus_outline);
+  outline-offset: var(--focus_outline-offset);
+}
+
 /* Makes elements behave as inline-level block containers */
 .ids-inline-block {
   display: inline-block;
@@ -2306,6 +2330,542 @@ body.ids {
   float: none;
 }
 
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+input.ids-time, .ids-textarea, .ids-select, .ids-input {
+  font-family: var(--font-family_1) !important;
+  padding: 0.75rem 1.25rem;
+  background-color: var(--IDS-INPUT_BACKGROUND);
+  border: var(--IDS-INPUT_BORDER);
+  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
+  border-radius: var(--IDS-INPUT_BORDER-RADIUS);
+  font-size: 16px;
+  color: var(--IDS-INPUT_COLOR);
+  display: block;
+}
+input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid, .ids-input.ids-input--invalid {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+  border: none;
+  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
+}
+
+input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-input:disabled {
+  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
+  border: none;
+  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+}
+
+.ids-label-wrapper {
+  display: inline-flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.ids-select-wrapper::after, .ids-select ::after {
+  content: "";
+  width: 12px;
+  height: 100%;
+  display: block;
+  position: absolute;
+  transform: rotate(90deg);
+  right: 25px;
+  top: 0px;
+  bottom: 0px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: var(--IDS-SELECT__CHEVRON-ICON);
+  pointer-events: none;
+}
+
+/*******
+* Accessibility
+********/
+/* headings */
+.ids-link {
+  font-family: var(--IDS-LINK--FONT-FAMILY);
+  color: var(--link-colorpreset-1_color);
+  text-decoration-color: var(--link-colorpreset-1_color);
+  line-height: 1.5rem;
+  cursor: pointer;
+  display: inline-flex;
+  gap: 8px;
+  align-items: flex-start;
+  text-decoration: none;
+  position: relative;
+}
+.ids-link:not(:has(.ids-link__icon)) {
+  text-decoration: underline;
+}
+.ids-link:focus:focus {
+  outline: var(--IDS-FOCUS_OUTLINE);
+  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+}
+.ids-link:hover, .ids-link:focus {
+  text-decoration: underline;
+  color: var(--link-colorpreset-1-hover_color);
+}
+.ids-link:hover .ids-link__icon:has(+ .ids-link__icon--hover), .ids-link:focus .ids-link__icon:has(+ .ids-link__icon--hover) {
+  display: none;
+}
+.ids-link:hover .ids-link__icon--hover, .ids-link:focus .ids-link__icon--hover {
+  display: inline-flex;
+}
+.ids-link.ids-link--block {
+  display: flex;
+}
+.ids-link.ids-link--underlined {
+  text-decoration: underline;
+}
+.ids-link.ids-link--active-icon {
+  text-decoration: none !important;
+}
+.ids-link.ids-link--active-icon .ids-link__icon .ids-link__icon__wrap,
+.ids-link.ids-link--active-icon .ids-link__icon--hover .ids-link__icon__wrap {
+  border-radius: 100%;
+  padding: 3px;
+  align-items: center;
+  justify-content: center;
+}
+.ids-link.ids-link--active-icon:hover .ids-link__icon .ids-link__icon__wrap, .ids-link.ids-link--active-icon:focus-within .ids-link__icon .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-1-hover_color);
+}
+.ids-link.ids-link--active-icon.ids-link--active .ids-link__icon:has(+ .ids-link__icon--hover) {
+  display: none;
+}
+.ids-link.ids-link--active-icon.ids-link--active .ids-link__icon--hover {
+  display: inline-flex;
+}
+.ids-link.ids-link--active-icon.ids-link--active .ids-link__icon .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-1_color);
+}
+.ids-link.ids-link--active-icon.ids-link--active:hover .ids-link__icon .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-1-hover_color);
+}
+.ids-link.ids-link--active-icon .ids-link__icon--hover .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-1-hover_color);
+}
+.ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon .ids-link__icon__wrap,
+.ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon--hover .ids-link__icon__wrap {
+  border-radius: 100%;
+  padding: 3px;
+  align-items: center;
+  justify-content: center;
+}
+.ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-link__icon .ids-link__icon__wrap, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-link__icon .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-2-hover_color);
+}
+.ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon:has(+ .ids-link__icon--hover) {
+  display: none;
+}
+.ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon--hover {
+  display: inline-flex;
+}
+.ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-2_color);
+}
+.ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active:hover .ids-link__icon .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-2-hover_color);
+}
+.ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon--hover .ids-link__icon__wrap {
+  background-color: var(--link-colorpreset-2-hover_color);
+}
+.ids-link.ids-link--color-2 {
+  color: var(--link-colorpreset-2_color);
+  text-decoration-color: var(--link-colorpreset-2_color);
+}
+.ids-link.ids-link--color-2:hover, .ids-link.ids-link--color-2:focus {
+  color: var(--link-colorpreset-2-hover_color);
+  text-decoration-color: var(--link-colorpreset-2-hover_color);
+}
+.ids-link.ids-link--light {
+  color: white !important;
+  text-decoration-color: white !important;
+}
+.ids-link.ids-link--light:focus {
+  outline-color: white !important;
+}
+.ids-link.ids-link--light:hover {
+  color: white !important;
+}
+.ids-link .ids-link__icon,
+.ids-link .ids-link__icon--hover {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 1.5rem;
+}
+.ids-link .ids-link__text {
+  gap: 8px;
+}
+.ids-link .ids-link__icon {
+  display: inline-flex;
+}
+.ids-link .ids-link__icon--hover {
+  display: none;
+}
+
+@media (max-width: 1023px) {
+  .ids-desktop {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .ids-mobile {
+    display: none !important;
+  }
+}
+
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+input.ids-time, .ids-textarea, .ids-select, .ids-input {
+  font-family: var(--font-family_1) !important;
+  padding: 0.75rem 1.25rem;
+  background-color: var(--IDS-INPUT_BACKGROUND);
+  border: var(--IDS-INPUT_BORDER);
+  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
+  border-radius: var(--IDS-INPUT_BORDER-RADIUS);
+  font-size: 16px;
+  color: var(--IDS-INPUT_COLOR);
+  display: block;
+}
+input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid, .ids-input.ids-input--invalid {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+  border: none;
+  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
+}
+
+input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-input:disabled {
+  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
+  border: none;
+  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+}
+
+.ids-label-wrapper {
+  display: inline-flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.ids-select-wrapper::after, .ids-select ::after {
+  content: "";
+  width: 12px;
+  height: 100%;
+  display: block;
+  position: absolute;
+  transform: rotate(90deg);
+  right: 25px;
+  top: 0px;
+  bottom: 0px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: var(--IDS-SELECT__CHEVRON-ICON);
+  pointer-events: none;
+}
+
+/*******
+* Accessibility
+********/
+/* headings */
+.ids .ids-button.ids-button--secondary.ids-button--disabled, .ids .ids-button.ids-button--secondary[disabled],
+.ids-button.ids-button--secondary.ids-button--disabled,
+.ids-button.ids-button--secondary[disabled],
+.ids button.ids-button.ids-button--secondary.ids-button--disabled,
+.ids button.ids-button.ids-button--secondary[disabled], .ids .ids-button.ids-button--disabled, .ids .ids-button[disabled],
+.ids-button.ids-button--disabled,
+.ids-button[disabled],
+.ids button.ids-button.ids-button--disabled,
+.ids button.ids-button[disabled] {
+  color: var(--btn-disabled_color) !important;
+  border: var(--btn-disabled_border) !important;
+  background-color: white !important;
+}
+
+.ids button.ids-button {
+  min-width: 24px;
+  min-height: 24px;
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ids button.ids-button:focus {
+  outline: var(--IDS-FOCUS_OUTLINE);
+  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+}
+
+.ids .ids-button,
+.ids-button,
+.ids button.ids-button {
+  text-align: center;
+  background-color: var(--btn_background-color);
+  border: var(--btn_border);
+  border-radius: var(--btn_border-radius);
+  box-sizing: border-box;
+  color: white;
+  cursor: pointer;
+  padding: var(--btn-m_padding);
+  gap: 8px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: var(--btn_font-family);
+  font-weight: var(--btn_font-weight);
+  text-transform: uppercase;
+  user-select: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  font-size: 1rem;
+  min-height: var(--btn-m_height);
+  line-height: 22px;
+}
+.ids .ids-button:hover, .ids .ids-button:active, .ids .ids-button:focus, .ids .ids-button.ids-button--active,
+.ids-button:hover,
+.ids-button:active,
+.ids-button:focus,
+.ids-button.ids-button--active,
+.ids button.ids-button:hover,
+.ids button.ids-button:active,
+.ids button.ids-button:focus,
+.ids button.ids-button.ids-button--active {
+  background-color: var(--btn-active_background-color);
+  box-shadow: var(--btn-active_box-shadow);
+}
+.ids .ids-button.ids-button--s,
+.ids-button.ids-button--s,
+.ids button.ids-button.ids-button--s {
+  font-size: 0.875rem;
+  min-height: var(--btn-s_height);
+  padding: var(--btn-s_padding);
+}
+.ids .ids-button.ids-button--l,
+.ids-button.ids-button--l,
+.ids button.ids-button.ids-button--l {
+  font-size: 1.125rem;
+  min-height: var(--btn-l_height);
+  padding: var(--btn-l_padding);
+}
+.ids .ids-button.ids-button--loading,
+.ids-button.ids-button--loading,
+.ids button.ids-button.ids-button--loading {
+  pointer-events: none !important;
+}
+.ids .ids-button.ids-button--secondary,
+.ids-button.ids-button--secondary,
+.ids button.ids-button.ids-button--secondary {
+  background-color: white;
+  border: var(--btn-secondary_border);
+  color: var(--btn-secondary_color);
+  min-height: var(--btn-secondary-m_height);
+  padding: var(--btn-secondary-m_padding);
+}
+.ids .ids-button.ids-button--secondary.ids-button--s,
+.ids-button.ids-button--secondary.ids-button--s,
+.ids button.ids-button.ids-button--secondary.ids-button--s {
+  min-height: var(--btn-secondary-s_height);
+  padding: var(--btn-secondary-s_padding);
+}
+.ids .ids-button.ids-button--secondary.ids-button--l,
+.ids-button.ids-button--secondary.ids-button--l,
+.ids button.ids-button.ids-button--secondary.ids-button--l {
+  min-height: var(--btn-secondary-l_height);
+  padding: var(--btn-secondary-l_padding);
+}
+.ids .ids-button.ids-button--secondary.ids-button--active, .ids .ids-button.ids-button--secondary:hover, .ids .ids-button.ids-button--secondary:focus, .ids .ids-button.ids-button--secondary:active,
+.ids-button.ids-button--secondary.ids-button--active,
+.ids-button.ids-button--secondary:hover,
+.ids-button.ids-button--secondary:focus,
+.ids-button.ids-button--secondary:active,
+.ids button.ids-button.ids-button--secondary.ids-button--active,
+.ids button.ids-button.ids-button--secondary:hover,
+.ids button.ids-button.ids-button--secondary:focus,
+.ids button.ids-button.ids-button--secondary:active {
+  background-color: var(--btn-active_background-color);
+  color: white;
+  border: 1px solid var(--btn-active_background-color);
+}
+.ids .ids-button.ids-button--tertiary,
+.ids-button.ids-button--tertiary,
+.ids button.ids-button.ids-button--tertiary {
+  background: transparent;
+  border-radius: 0px;
+  border: none;
+  color: var(--btn-tertiary_color);
+  box-shadow: none;
+  line-height: 22px;
+  font-family: var(--font-family_2);
+  text-decoration: underline;
+}
+.ids .ids-button.ids-button--tertiary.ids-button--active, .ids .ids-button.ids-button--tertiary:hover, .ids .ids-button.ids-button--tertiary:active, .ids .ids-button.ids-button--tertiary:focus,
+.ids-button.ids-button--tertiary.ids-button--active,
+.ids-button.ids-button--tertiary:hover,
+.ids-button.ids-button--tertiary:active,
+.ids-button.ids-button--tertiary:focus,
+.ids button.ids-button.ids-button--tertiary.ids-button--active,
+.ids button.ids-button.ids-button--tertiary:hover,
+.ids button.ids-button.ids-button--tertiary:active,
+.ids button.ids-button.ids-button--tertiary:focus {
+  background-color: var(--btn-active_background-color);
+  color: white;
+  border-radius: var(--btn_border-radius);
+}
+.ids .ids-button.ids-button--tertiary.ids-button--disabled, .ids .ids-button.ids-button--tertiary[disabled],
+.ids-button.ids-button--tertiary.ids-button--disabled,
+.ids-button.ids-button--tertiary[disabled],
+.ids button.ids-button.ids-button--tertiary.ids-button--disabled,
+.ids button.ids-button.ids-button--tertiary[disabled] {
+  border: none !important;
+  text-decoration: underline !important;
+  color: var(--btn-disabled_color);
+  text-decoration: none;
+}
+.ids .ids-button.ids-button--submit,
+.ids-button.ids-button--submit,
+.ids button.ids-button.ids-button--submit {
+  height: 3.75em !important;
+  border-radius: var(--btn-submit_border-radius);
+}
+.ids .ids-button.ids-button--icon, .ids .ids-button.ids-button--fab,
+.ids-button.ids-button--icon,
+.ids-button.ids-button--fab,
+.ids button.ids-button.ids-button--icon,
+.ids button.ids-button.ids-button--fab {
+  width: 44px;
+  height: 44px !important;
+  border-radius: 100%;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 0px !important;
+  font-size: 20px;
+  padding: 0px !important;
+  justify-content: center;
+}
+.ids .ids-button.ids-button--icon.ids-button--s, .ids .ids-button.ids-button--fab.ids-button--s,
+.ids-button.ids-button--icon.ids-button--s,
+.ids-button.ids-button--fab.ids-button--s,
+.ids button.ids-button.ids-button--icon.ids-button--s,
+.ids button.ids-button.ids-button--fab.ids-button--s {
+  width: 30px;
+  height: 30px !important;
+}
+.ids .ids-button.ids-button--icon.ids-button--l, .ids .ids-button.ids-button--fab.ids-button--l,
+.ids-button.ids-button--icon.ids-button--l,
+.ids-button.ids-button--fab.ids-button--l,
+.ids button.ids-button.ids-button--icon.ids-button--l,
+.ids button.ids-button.ids-button--fab.ids-button--l {
+  width: 60px;
+  height: 60px !important;
+}
+.ids .ids-button.ids-button--fab,
+.ids-button.ids-button--fab,
+.ids button.ids-button.ids-button--fab {
+  background-color: white;
+  border: var(--btn-fab_border);
+  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.3));
+}
+.ids .ids-button.ids-button--icon.ids-button--secondary,
+.ids-button.ids-button--icon.ids-button--secondary,
+.ids button.ids-button.ids-button--icon.ids-button--secondary {
+  background-color: var(--btn-icon-secondary_background-color);
+}
+.ids .ids-button.ids-button--icon.ids-button--active, .ids .ids-button.ids-button--icon:hover, .ids .ids-button.ids-button--icon:active, .ids .ids-button.ids-button--icon:focus,
+.ids-button.ids-button--icon.ids-button--active,
+.ids-button.ids-button--icon:hover,
+.ids-button.ids-button--icon:active,
+.ids-button.ids-button--icon:focus,
+.ids button.ids-button.ids-button--icon.ids-button--active,
+.ids button.ids-button.ids-button--icon:hover,
+.ids button.ids-button.ids-button--icon:active,
+.ids button.ids-button.ids-button--icon:focus {
+  background-color: var(--btn-icon-secondary--hover_background-color);
+  color: white;
+}
+.ids .ids-button.ids-button--submit,
+.ids-button.ids-button--submit,
+.ids button.ids-button.ids-button--submit {
+  height: var(--btn-submit_height);
+  border-radius: var(--btn-submit_border-radius);
+  line-height: var(--btn-submit_height);
+}
+.ids .ids-button.ids-button--search,
+.ids-button.ids-button--search,
+.ids button.ids-button.ids-button--search {
+  height: var(--btn-search_height);
+  padding: 0px 30px !important;
+  font-size: var(--btn-search_font-size);
+  border-radius: var(--btn-search_border-radius);
+}
+.ids .ids-button.ids-button--search.ids-button--s,
+.ids-button.ids-button--search.ids-button--s,
+.ids button.ids-button.ids-button--search.ids-button--s {
+  height: var(--btn-search-s_height);
+  font-size: var(--btn-search-s_font-size);
+}
+@media (max-width: 1024px) {
+  .ids .ids-button.ids-button--search,
+  .ids-button.ids-button--search,
+  .ids button.ids-button.ids-button--search {
+    font-size: var(--btn-search-mobile_font-size) !important;
+    padding: 0px 14px !important;
+    height: var(--btn-search-mobile_height) !important;
+  }
+}
+.ids .ids-button.ids-button--block,
+.ids-button.ids-button--block,
+.ids button.ids-button.ids-button--block {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+@media (max-width: 1024px) {
+  .ids .ids-button.ids-button--m-block,
+  .ids-button.ids-button--m-block,
+  .ids button.ids-button.ids-button--m-block {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+@media (max-width: 640px) {
+  .ids .ids-button.ids-button--s-block,
+  .ids-button.ids-button--s-block,
+  .ids button.ids-button.ids-button--s-block {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.ids .ids-button.ids-button--disabled, .ids .ids-button[disabled],
+.ids-button.ids-button--disabled,
+.ids-button[disabled],
+.ids button.ids-button.ids-button--disabled,
+.ids button.ids-button[disabled] {
+  pointer-events: none;
+}
+.ids .ids-button:focus,
+.ids-button:focus,
+.ids button.ids-button:focus {
+  outline: var(--IDS-FOCUS_OUTLINE);
+  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+}
+
 .ids-label {
   display: inline-block;
   color: var(--IDS-FORM__LABEL__COLOR);
@@ -2325,67 +2885,107 @@ body.ids {
 }
 
 .ids-radio,
-ids-radio input {
-  position: absolute;
-  opacity: 0;
-}
-
-ids-radio *[slot=tooltip] {
-  margin-left: 5px;
-}
-
-.ids-label--radio {
-  display: inline-flex;
-  align-items: flex-start;
+.ids-radio input,
+input[type=radio] {
   cursor: pointer;
+  appearance: none;
+  margin: 0;
+  font: inherit;
+  width: 20px;
+  height: 20px;
+  color: var(--IDS-COLOR-ACCENT-40);
+  border: 1px solid var(--IDS-COLOR-ACCENT-40);
+  background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
+  border-radius: 50%;
+  transform: translateY(4px);
+  position: relative;
+}
+.ids-radio.ids-input--light,
+.ids-radio input.ids-input--light,
+input[type=radio].ids-input--light {
+  background-color: white;
 }
-.ids-label--radio.ids-label--light:before {
+.ids-radio.ids-input--light::before,
+.ids-radio input.ids-input--light::before,
+input[type=radio].ids-input--light::before {
+  border: 2px solid white;
   background-color: white;
 }
-.ids-label--radio:before {
+.ids-radio::before,
+.ids-radio input::before,
+input[type=radio]::before {
   content: "";
-  flex: 0 0 auto;
-  background: var(--IDS-RADIO__BACKGROUND-COLOR);
-  box-sizing: border-box;
-  border-radius: 100%;
-  border: var(--IDS-RADIO__BORDER);
+  position: absolute;
   display: inline-block;
-  width: 1.25rem;
-  height: 1.25rem;
-  margin-top: 1px;
-  position: relative;
   cursor: pointer;
-  text-align: center;
-  margin-right: 0.625rem;
-}
-input[type=radio]:checked + .ids-label--radio:before {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  top: 0;
+  left: 0;
+  border: 2px solid var(--IDS-RADIO__BACKGROUND-COLOR);
+  background-color: var(--IDS-RADIO__BACKGROUND-COLOR);
+}
+.ids-radio:checked::before,
+.ids-radio input:checked::before,
+input[type=radio]:checked::before {
+  border: 2px solid var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR);
-  box-shadow: inset 0 0 0 2px white;
 }
-input[type=radio]:disabled + .ids-label--radio:before {
+.ids-radio:disabled,
+.ids-radio input:disabled,
+input[type=radio]:disabled {
+  cursor: default;
+  background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   background-image: var(--IDS-RADIO--DISABLED_BACKGROUND-IMAGE);
-  background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
-  border: none;
+  border: 0;
 }
-input[type=radio][aria-invalid=true]:not(:checked) + .ids-label--radio:before {
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: none;
+.ids-radio:disabled::before,
+.ids-radio input:disabled::before,
+input[type=radio]:disabled::before {
+  cursor: default;
+  background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
+  border: 2px solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
+  top: 1px;
+  left: 1px;
+}
+.ids-radio:disabled:checked::before,
+.ids-radio input:disabled:checked::before,
+input[type=radio]:disabled:checked::before {
+  border: 2px solid var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
+  background-color: var(--IDS-RADIO--CHECKED-DISABLED__BACKGROUND-COLOR);
+}
+.ids-radio[aria-invalid=true]:not(:checked),
+.ids-radio input[aria-invalid=true]:not(:checked),
+input[type=radio][aria-invalid=true]:not(:checked) {
+  background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
   background-image: var(--IDS-RADIO--INVALID_BACKGROUND-IMAGE);
+  border: 0;
 }
-.ids-label--radio.ids-label--disabled {
-  cursor: default;
+.ids-radio[aria-invalid=true]:not(:checked)::before,
+.ids-radio input[aria-invalid=true]:not(:checked)::before,
+input[type=radio][aria-invalid=true]:not(:checked)::before {
+  border: 2px solid var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
+  background-color: var(--IDS-RADIO--INVALID__BACKGROUND-COLOR);
+  top: 1px;
+  left: 1px;
 }
-.ids-label--radio.ids-label--disabled:before {
-  cursor: default;
+
+.ids-label--radio {
+  cursor: pointer;
+  padding-left: 8px;
+  margin-bottom: 0;
 }
-input:focus + .ids-label--radio::before {
-  outline: var(--focus_outline);
-  outline-offset: var(--focus_outline-offset);
+.ids-label--radio.ids-label--disabled {
+  cursor: default;
 }
 
-.ids-radio:disabled,
-ids-radio input:disabled {
-  cursor: default;
+ids-radio {
+  display: flex;
+  align-items: baseline;
+}
+ids-radio *[slot=tooltip] {
+  margin-left: 5px;
 }
 
 .ids-checkbox-label::before {
@@ -2498,15 +3098,15 @@ input.ids-time, .ids-textarea, .ids-select, .ids-input {
   color: var(--IDS-INPUT_COLOR);
   display: block;
 }
-input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-input.ids-input--invalid {
+input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid, .ids-input.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
 }
 
 input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-input:disabled {
   background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
 }
 
@@ -2535,6 +3135,7 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
 /*******
 * Accessibility
 ********/
+/* headings */
 .ids-input {
   width: 100%;
 }
@@ -2547,12 +3148,6 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   font-size: 18px !important;
 }
 
-.ids-input:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
-}
-
 .ids-input__hint {
   margin-top: 5px;
   font-family: var(--font-family_1);
@@ -2691,15 +3286,15 @@ input.ids-time, .ids-textarea, .ids-select, .ids-input {
   color: var(--IDS-INPUT_COLOR);
   display: block;
 }
-input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-input.ids-input--invalid {
+input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid, .ids-input.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
 }
 
 input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-input:disabled {
   background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
 }
 
@@ -2728,6 +3323,7 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
 /*******
 * Accessibility
 ********/
+/* headings */
 .ids-select.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
   background-image: var(--IDS-FORM--INVALID__BACKGROUND-IMAGE);
@@ -2793,15 +3389,15 @@ input.ids-time, .ids-textarea, .ids-input, .ids-select {
   color: var(--IDS-INPUT_COLOR);
   display: block;
 }
-input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-input.ids-input--invalid {
+input.ids-time.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid, .ids-input.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
 }
 
 input.ids-time:disabled, .ids-textarea:disabled, .ids-input:disabled, .ids-select:disabled {
   background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
 }
 
@@ -2830,7 +3426,8 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-input:disabled, .ids-selec
 /*******
 * Accessibility
 ********/
-.ids-textarea.ids-input--light {
+/* headings */
+.ids-textarea.ids-input--light, .ids-textarea.ids-textarea--light {
   background-color: white;
 }
 .ids-textarea.ids-textarea--autosize {
@@ -2869,15 +3466,15 @@ input.ids-time, .ids-input, .ids-select, .ids-textarea {
   color: var(--IDS-INPUT_COLOR);
   display: block;
 }
-input.ids-time.ids-input--invalid, .ids-input.ids-input--invalid, .ids-textarea.ids-input--invalid {
+input.ids-time.ids-input--invalid, .ids-input.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
 }
 
 input.ids-time:disabled, .ids-input:disabled, .ids-select:disabled, .ids-textarea:disabled {
   background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: 1px solid transparent;
+  border: none;
   background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
 }
 
@@ -2906,6 +3503,7 @@ input.ids-time:disabled, .ids-input:disabled, .ids-select:disabled, .ids-textare
 /*******
 * Accessibility
 ********/
+/* headings */
 .ids-time-input-wrapper {
   position: relative;
   display: flex;
@@ -3113,7 +3711,7 @@ select::placeholder {
   --IDS-ALERT--ERROR__ICON__COLOR-2: var(--IDS-COLOR-ERROR-40);
   /* CHECKBOX */
   --IDS-CHECKBOX_BORDER: 0.0625rem solid var(--IDS-FORM__BORDER-COLOR);
-  --IDS-CHECKBOX_BORDER-RADIUS: var(--IDS-BORDER-RADIUS);
+  --IDS-CHECKBOX_BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
   --IDS-CHECKBOX_BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-95);
   --IDS-CHECKBOX--CHECK_BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="11" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="%2340775E"></path></svg>');
   --IDS-CHECKBOX--INVALID_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23DB0F00' stroke-width='1' stroke-dasharray='4%2c 4%2c 4%2c 4' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
@@ -3123,14 +3721,12 @@ select::placeholder {
   /* INPUT */
   --IDS-INPUT--INVALID_BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
   --IDS-INPUT--INVALID_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23c12143' stroke-width='1' stroke-dasharray='4%2c 4%2c 4%2c 4' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
-  --IDS-INPUT--DISABLED_BACKGROUND-COLOR: var(
-    --IDS-FORM--DISABLED__BACKGROUND-COLOR
-  );
+  --IDS-INPUT--DISABLED_BACKGROUND-COLOR: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   --IDS-INPUT--DISABLED_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23808285' stroke-width='1' stroke-dasharray='3%2c 3%2c 3%2c 3' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
   --IDS-INPUT_BACKGROUND: var(--form-element_background);
   --IDS-INPUT__CALENDAR-ICON__RIGHT: 10px;
   --IDS-INPUT_BORDER: 1px solid var(--IDS-FORM__BORDER-COLOR);
-  --IDS-INPUT_BORDER-RADIUS: var(--IDS-BORDER-RADIUS);
+  --IDS-INPUT_BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
   --IDS-INPUT_BORDER-BOTTOM: 1px solid var(--IDS-COLOR-ACCENT-40);
   --IDS-INPUT_BOX-SHADOW: none;
   --IDS-INPUT_COLOR: var(--IDS-COLOR-NEUTRAL-20);
@@ -3141,20 +3737,20 @@ select::placeholder {
   --IDS-RADIO__BACKGROUND-COLOR: var(--form-element_background);
   --IDS-RADIO__BORDER: 1px solid var(--IDS-FORM__BORDER-COLOR);
   --IDS-RADIO--CHECKED__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
-  --IDS-RADIO--CHECKED__BOX-SHADOW: inset 0 0 0 2px
-    var(--IDS-RADIO__BACKGROUND-COLOR);
+  --IDS-RADIO--DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-RADIO--CHECKED-DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-50);
+  --IDS-RADIO--INVALID__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-90);
   --IDS-RADIO--DISABLED_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23808285' stroke-width='1' stroke-dasharray='3%2c 3%2c 3%2c 3' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
   --IDS-RADIO--INVALID_BACKGROUND-IMAGE: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23DB0F00' stroke-width='1' stroke-dasharray='4%2c 4%2c 4%2c 4' stroke-dashoffset='16' stroke-linecap='butt'/%3e%3c/svg%3e");
   /* SELECT */
   --IDS-SELECT__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%2340775E"></path></g></svg>');
   --IDS-SELECT--INVALID__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23DB0F00"></path></g></svg>');
   --IDS-SELECT--DISABLED__CHEVRON-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="%23727373"></path></g></svg>');
+  --IDS-SELECT__CHEVRON-ICON--HOVER: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="7" height="12" style="" viewBox="0 0 7 12" aria-hidden="true"><!--%3Flit$300635863$--><g><path d="M4.1627 5.57692L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.28403 4.86982C6.67456 5.26034 6.67455 5.89351 6.28402 6.28404L1.7071 10.8609C1.31657 11.2514 0.683406 11.2514 0.292886 10.8608C-0.0976345 10.4703 -0.0976276 9.83715 0.292901 9.44663L4.1627 5.57692Z" fill="rgb(48,90,71)"></path></g></svg>');
   /* Toggle */
   --IDS-TOGGLE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
   --IDS-TOGGLE--ACTIVE__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-40);
-  --IDS-TOGGLE--DISABLED__BACKGROUND-COLOR: var(
-    --IDS-FORM--DISABLED__BACKGROUND-COLOR
-  );
+  --IDS-TOGGLE--DISABLED__BACKGROUND-COLOR: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);
   --IDS-TOGGLE-ICON__COLOR: var(--IDS-COLOR-NEUTRAL-20);
   --IDS-TOGGLE-ICON--ACTIVE__COLOR: var(--IDS-COLOR-ACCENT-30);
   --IDS-TOGGLE-ICON--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
@@ -3170,12 +3766,27 @@ select::placeholder {
   --IDS-RANGE-TICK-LINE__COLOR: var(--IDS-COLOR-NEUTRAL-20);
   --IDS-RANGE-TICK__COLOR: var(--IDS-COLOR-NEUTRAL-20);
   --IDS-RANGE-SELECTION--DISABLED__COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  /* Description list*/
+  --IDS-DESCRIPTION-LIST__DISPLAY: flex;
+  --IDS-DESCRIPTION-LIST__BORDER: 0;
+  --IDS-DESCRIPTION-LIST__BORDER-RADIUS: 0;
+  --IDS-DESCRIPTION-LIST-TERM__PADDING: 0;
+  --IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR: transparent;
+  --IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM: 12px;
+  --IDS-DESCRIPTION-LIST-DESCRIPTION__PADDING: 0;
+  --IDS-DESCRIPTION-LIST__DISPLAY--COLUMN: grid;
+  --IDS-DESCRIPTION-LIST__BORDER--COLUMN: 1px solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN: 5px;
+  --IDS-DESCRIPTION-LIST-TERM__PADDING--COLUMN: 8px 8px 8px 16px;
+  --IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR--COLUMN: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM--COLUMN: 0;
+  --IDS-DESCRIPTION-LIST-DESCRIPTION__PADDING--COLUMN: 8px 16px 8px 8px;
   /************************************************************************/
   /* Default styles */
   --IDS-BOX-SHADOW: 0px 2px 6px rgba(0, 0, 0, 0.15);
   --IDS-BOX-SHADOW-INNER: inset 0px 5px 10px rgba(0, 0, 0, 0.2);
   --IDS-BOX-SHADOW-ALT: 0px 0px 10px rgba(0, 0, 0, 0.3);
-  --IDS-BORDER-RADIUS: 3px;
+  --IDS-FORM-BORDER-RADIUS: 3px;
   --IDS-SCROLL_BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-99);
   --IDS-SCROLL_COLOR: var(--IDS-COLOR-ACCENT-40);
   --IDS-FOCUS_OUTLINE: 2px solid var(--focus-outline_color);
@@ -3192,53 +3803,43 @@ select::placeholder {
   /* Font families */
   --font-family_1: "Open Sans";
   --font-family_2: "Poppins";
-  --header-1-font-family: var(--font-family_2);
-  --header-1-font-size: 2.5rem;
-  --header-1-font-size-small: 2.125rem;
-  --header-1-font-weight: 600;
-  --header-1-letter-spacing: inherit;
-  --header-1-line-height: 3.125rem;
-  --header-1-line-height-small: 2.5rem;
-  --header-1-small-font-family: var(--font-family_2);
-  --header-1-small-font-size: 2rem;
-  --header-1-small-font-size-small: 1.875rem;
-  --header-1-small-font-weight: 600;
-  --header-1-small-letter-spacing: inherit;
-  --header-1-small-line-height: 2.625rem;
-  --header-1-small-line-height-small: 2.25rem;
-  --header-2-font-family: var(--font-family_2);
-  --header-2-font-size: 1.75rem;
-  --header-2-font-size-small: 1.75rem;
-  --header-2-font-weight: 600;
-  --header-2-letter-spacing: inherit;
-  --header-2-line-height: 2.25rem;
-  --header-2-line-height-small: 2.25rem;
-  --header-3-font-family: var(--font-family_2);
-  --header-3-font-size: 1.375rem;
-  --header-3-font-weight: 600;
-  --header-3-letter-spacing: inherit;
-  --header-3-line-height: 1.75rem;
-  --header-4-font-family: var(--font-family_2);
-  --header-4-font-size: 1.125rem;
-  --header-4-font-weight: 600;
-  --header-4-letter-spacing: inherit;
-  --header-4-line-height: 1.625rem;
-  --header-5-font-family: var(--font-family_1);
-  --header-5-font-size: 1.5rem;
-  --header-5-font-size-small: 1.125rem;
-  --header-5-font-weight: 400;
-  --header-5-letter-spacing: 0.09375rem;
-  --header-5-line-height: 2.125rem;
-  --header-5-line-height-small: 1.625rem;
-  --header-6-font-family: var(--font-family_1);
-  --header-6-font-size: 1rem;
-  --header-6-font-weight: 400;
-  --header-6-letter-spacing: 0.0625rem;
-  --header-6-line-height: 1.25rem;
+  --heading-1-font-family: var(--font-family_2);
+  --heading-1-font-size: 2.5rem;
+  --heading-1-font-size-small: 2.125rem;
+  --heading-1-font-weight: 600;
+  --heading-1-letter-spacing: inherit;
+  --heading-1-line-height: 3.125rem;
+  --heading-1-line-height-small: 2.5rem;
+  --heading-1-small-font-family: var(--font-family_2);
+  --heading-1-small-font-size: 2rem;
+  --heading-1-small-font-size-small: 1.875rem;
+  --heading-1-small-font-weight: 600;
+  --heading-1-small-letter-spacing: inherit;
+  --heading-1-small-line-height: 2.625rem;
+  --heading-1-small-line-height-small: 2.25rem;
+  --heading-2-font-family: var(--font-family_2);
+  --heading-2-font-size: 1.75rem;
+  --heading-2-font-size-small: 1.75rem;
+  --heading-2-font-weight: 600;
+  --heading-2-letter-spacing: inherit;
+  --heading-2-line-height: 2.25rem;
+  --heading-2-line-height-small: 2.25rem;
+  --heading-3-font-family: var(--font-family_2);
+  --heading-3-font-size: 1.375rem;
+  --heading-3-font-weight: 600;
+  --heading-3-letter-spacing: inherit;
+  --heading-3-line-height: 1.75rem;
+  --heading-4-font-family: var(--font-family_2);
+  --heading-4-font-size: 1.125rem;
+  --heading-4-font-weight: 600;
+  --heading-4-letter-spacing: inherit;
+  --heading-4-line-height: 1.625rem;
+  --bullet-list-marker-color: var(--IDS-COLOR-PRIMARY-40);
+  --bullet-list-marker-font-weight: normal;
   /**********************
     * General
     **********************/
-  --IDS_BORDER-RADIUS: 3px;
+  --IDS-BORDER-RADIUS: 3px;
   --IDS-BASE__FONT-COLOR: var(--IDS-COLOR-NEUTRAL-20);
   /**********************
     * Forms
@@ -3301,13 +3902,13 @@ select::placeholder {
   --btn-secondary-hover-icon_color: var(--IDS-COLOR-ON-ACCENT-30);
   --btn-tertiary_color: var(--IDS-COLOR-ACCENT-40);
   --btn-tertiary-active_color: var(--IDS-COLOR-ACCENT-30);
-  --btn_border-radius: var(--IDS-BORDER-RADIUS);
+  --btn_border-radius: var(--IDS-FORM-BORDER-RADIUS);
   --btn-disabled_color: var(--IDS-COLOR-NEUTRAL-40);
   --btn-disabled_border: 1px solid var(--IDS-COLOR-NEUTRAL-90);
   ---btn-submit_height: 3.75em !important;
-  --btn-submit_border-radius: var(--IDS-BORDER-RADIUS);
-  --btn-search_border-radius: var(--IDS-BORDER-RADIUS);
-  --btn-search-mobile_border-radius: var(--IDS-BORDER-RADIUS);
+  --btn-submit_border-radius: var(--IDS-FORM-BORDER-RADIUS);
+  --btn-search_border-radius: var(--IDS-FORM-BORDER-RADIUS);
+  --btn-search-mobile_border-radius: var(--IDS-FORM-BORDER-RADIUS);
   --btn-search_height: 3.75rem;
   --btn-search-s_height: 3.125rem;
   --btn-search-mobile_height: 3.125rem;
@@ -3335,16 +3936,14 @@ select::placeholder {
   /* Card */
   --IDS-CARD__BACKGROUND: white;
   --IDS-CARD__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
-  --IDS-CARD__BORDER-RADIUS: var(--IDS-BORDER-RADIUS);
+  --IDS-CARD__BORDER-RADIUS: var(--IDS-FORM-BORDER-RADIUS);
   --IDS-CARD__COLOR: var(--IDS-COLOR-NEUTRAL-20);
   --IDS-CARD__INNER__BORDER: none;
   --IDS-CARD--BORDER__BORDER: none;
   --IDS-CARD--HOVER_BOX-SHADOW: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
   --IDS-CARD--FILL__INNER__BACKGROUND: var(--IDS-COLOR-SECONDARY-95);
-  --IDS-CARD--FILL__INNER__BORDER: 1px solid
-    var(--IDS-CARD--FILL__INNER__BACKGROUND);
-  --IDS-CARD--FILL__INNER__BORDER-INTERACTIVE: 1px solid
-    var(--IDS-COLOR-ACCENT-30);
+  --IDS-CARD--FILL__INNER__BORDER: 1px solid var(--IDS-CARD--FILL__INNER__BACKGROUND);
+  --IDS-CARD--FILL__INNER__BORDER-INTERACTIVE: 1px solid var(--IDS-COLOR-ACCENT-30);
   --IDS-CARD--FILL-2__INNER__BACKGROUND: white;
   --IDS-CARD--FILL-2__INNER__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
   /* Carousel */
@@ -3356,7 +3955,6 @@ select::placeholder {
   --carousel_font-family: var(--font-family_1);
   --carousel-slides_background-color: white;
   --carousel-description_background-color: white;
-  --carousel-description--mobile_padding: 5px 10px;
   /* Date label */
   --IDS-DATE-LABEL__DAY__FONT-FAMILY: var(--font-family_1);
   --IDS-DATE-LABEL__DAY__COLOR: var(--IDS-COLOR-ACCENT-40);
@@ -3368,9 +3966,12 @@ select::placeholder {
   --dialog_color: var(--IDS-COLOR-NEUTRAL-20);
   --dialog_border-color: var(--IDS-COLOR-NEUTRAL-40);
   --dialog-headline_font-weight: 600;
-  --dialog_border-radius: var(--IDS-BORDER-RADIUS);
+  --dialog_border-radius: var(--IDS-FORM-BORDER-RADIUS);
   --dialog-headline_color: var(--IDS-COLOR-PRIMARY-40);
   --dialog-headline_font-family: var(--font-family_2);
+  /* Dropdown */
+  --IDS-DROPDOWN__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-DROPDOWN__LINK__BORDER-RADIUS: 3px;
   /* Expandable */
   --expandable_border-bottom: 1px solid var(--IDS-COLOR-NEUTRAL-40);
   --expandable-headline_color: var(--IDS-COLOR-ACCENT-40);
@@ -3436,6 +4037,8 @@ select::placeholder {
   --icon-color2-preset3: var(--IDS-COLOR-NEUTRAL-40);
   --icon-color-preset4: white;
   --icon-color2-preset4: white;
+  --IDS-ICON-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-ICON-ACTIVE-COLOR: var(--IDS-COLOR-ACCENT-30);
   /* Link */
   --IDS-LINK--FONT-FAMILY: var(--font-family_1);
   --link_color: var(--IDS-COLOR-ACCENT-40);
@@ -3451,34 +4054,25 @@ select::placeholder {
   --list_border: var(--IDS-COLOR-NEUTRAL-90);
   --list_color: var(--IDS-COLOR-NEUTRAL-20);
   --list-item-interactive_border-bottom: var(--IDS-COLOR-ACCENT-30) 5px solid;
+  /* List pagniation */
+  --IDS-LIST-PAGINATION-LINK--FONT-FAMILY: var(--font-family_1);
   /* Mobile Menu Remake */
   /* Level 1 */
-  --IDS-MOBILE-MENU-ITEM__INNER__BACKGROUND-COLOR: var(
-    --IDS-COLOR-SECONDARY-90
-  );
+  --IDS-MOBILE-MENU-ITEM__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
   --IDS-MOBILE-MENU-ITEM__INNER__COLOR: var(--IDS-COLOR-PRIMARY-40);
-  --IDS-MOBILE-MENU-ITEM__INNER__BORDER-BOTTOM: 1px solid
-    var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-MOBILE-MENU-ITEM__INNER__BORDER-BOTTOM: 1px solid var(--IDS-COLOR-NEUTRAL-40);
   --IDS-MOBILE-MENU-ITEM__INNER__FONT-WEIGHT: 600;
   --IDS-MOBILE-MENU-ITEM__ICON__COLOR: var(--IDS-COLOR-PRIMARY-40);
   /* Level 1 - ACTIVE */
-  --IDS-MOBILE-MENU-ITEM--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR: var(
-    --IDS-COLOR-PRIMARY-40
-  );
+  --IDS-MOBILE-MENU-ITEM--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
   /* Level 1 - HAS-CHILDREN */
-  --IDS-MOBILE-MENU-ITEM--HAS-CHILDREN__INNER__BACKGROUND-COLOR: var(
-    --IDS-COLOR-SECONDARY-90
-  );
+  --IDS-MOBILE-MENU-ITEM--HAS-CHILDREN__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
   /* Level 1 - EXPANDED */
-  --IDS-MOBILE-MENU-ITEM--EXPANDED__INNER__BACKGROUND-COLOR: var(
-    --IDS-COLOR-SECONDARY-90
-  );
+  --IDS-MOBILE-MENU-ITEM--EXPANDED__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-90);
   /* Level 1 - OUTLINE */
   --IDS-MOBILE-MENU-ITEM--FOCUS--OUTLINE-COLOR: var(--focus-outline_color);
   /* Level 1 - VARIATION 2 */
-  --IDS-MOBILE-MENU--2-ITEM__INNER__BACKGROUND-COLOR: var(
-    --IDS-COLOR-PRIMARY-40
-  );
+  --IDS-MOBILE-MENU--2-ITEM__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
   --IDS-MOBILE-MENU--2-ITEM__INNER__COLOR: white;
   --IDS-MOBILE-MENU--2-ITEM__INNER__BORDER-BOTTOM-COLOR: white;
   --IDS-MOBILE-MENU--2-ITEM__ICON__COLOR: white;
@@ -3490,9 +4084,7 @@ select::placeholder {
   /* Level 1 - VARIATION 2 - OUTLINE */
   --IDS-MOBILE-MENU--2-ITEM--FOCUS--OUTLINE-COLOR: white;
   /* Level 1 - SECONDARY */
-  --IDS-MOBILE-MENU-ITEM--SECONDARY--FOCUS--OUTLINE-COLOR: var(
-    --focus-outline_color
-  );
+  --IDS-MOBILE-MENU-ITEM--SECONDARY--FOCUS--OUTLINE-COLOR: var(--focus-outline_color);
   --IDS-MOBILE-MENU-ITEM--SECONDARY__INNER__COLOR: var(--IDS-COLOR-PRIMARY-40);
   --IDS-MOBILE-MENU-ITEM--SECONDARY__INNER__BACKGROUND-COLOR: white;
   --IDS-MOBILE-MENU-ITEM--SECONDARY--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR: var(
@@ -3501,29 +4093,20 @@ select::placeholder {
   /* Level 2 */
   --IDS-MOBILE-MENU-ITEM--2__INNER__BACKGROUND-COLOR: white;
   --IDS-MOBILE-MENU-ITEM--2__INNER__COLOR: var(--IDS-COLOR-PRIMARY-40);
-  --IDS-MOBILE-MENU-ITEM--2__INNER__BORDER-BOTTOM: 1px solid
-    var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-MOBILE-MENU-ITEM--2__INNER__BORDER-BOTTOM: 1px solid var(--IDS-COLOR-NEUTRAL-40);
   --IDS-MOBILE-MENU-ITEM--2__INNER__FONT-WEIGHT: normal;
   --IDS-MOBILE-MENU-ITEM--2__ICON__COLOR: var(--IDS-COLOR-PRIMARY-40);
-  --IDS-MOBILE-MENU-ITEM--2__INNER__BEFORE__BACKGROUND-COLOR: var(
-    --IDS-COLOR-SECONDARY-40
-  );
+  --IDS-MOBILE-MENU-ITEM--2__INNER__BEFORE__BACKGROUND-COLOR: var(--IDS-COLOR-SECONDARY-40);
   /* Level 2 - ACTIVE */
-  --IDS-MOBILE-MENU-ITEM--2--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR: var(
-    --IDS-COLOR-PRIMARY-40
-  );
+  --IDS-MOBILE-MENU-ITEM--2--ACTIVE__INNER__BEFORE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
   /* Level 2 - HAS-CHILDREN */
   --IDS-MOBILE-MENU-ITEM--2--HAS-CHILDREN__INNER__FONT-WEIGHT: normal;
   /* Level 2 - HAS-CHILDREN */
-  --IDS-MOBILE-MENU-ITEM--2--EXPANDED__INNER__BEFORE__BACKGROUND-COLOR: var(
-    --IDS-COLOR-PRIMARY-40
-  );
+  --IDS-MOBILE-MENU-ITEM--2--EXPANDED__INNER__BEFORE__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
   /* Level 2 - OUTLINE */
   --IDS-MOBILE-MENU-ITEM--2--FOCUS--OUTLINE-COLOR: var(--focus-outline_color);
   /* Level 2 - VARIATION 2 */
-  --IDS-MOBILE-MENU--2-ITEM--2__INNER__BACKGROUND-COLOR: var(
-    --IDS-COLOR-PRIMARY-40
-  );
+  --IDS-MOBILE-MENU--2-ITEM--2__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
   --IDS-MOBILE-MENU--2-ITEM--2__INNER__COLOR: white;
   --IDS-MOBILE-MENU--2-ITEM--2__INNER__BORDER-BOTTOM-COLOR: white;
   --IDS-MOBILE-MENU--2-ITEM--2__ICON__COLOR: white;
@@ -3534,9 +4117,7 @@ select::placeholder {
   /* Level 2 - OUTLINE */
   --IDS-MOBILE-MENU-ITEM--3--FOCUS--OUTLINE-COLOR: var(--focus-outline_color);
   /* Level 3 - VARIATION 2 */
-  --IDS-MOBILE-MENU--2-ITEM--3__INNER__BACKGROUND-COLOR: var(
-    --IDS-COLOR-PRIMARY-40
-  );
+  --IDS-MOBILE-MENU--2-ITEM--3__INNER__BACKGROUND-COLOR: var(--IDS-COLOR-PRIMARY-40);
   --IDS-MOBILE-MENU--2-ITEM--3__INNER__BORDER-BOTTOM-COLOR: white;
   --IDS-MOBILE-MENU--2-ITEM--3__INNER__COLOR: white;
   --IDS-MOBILE-MENU--2-ITEM--3--FOCUS--OUTLINE-COLOR: white;
@@ -3574,9 +4155,7 @@ select::placeholder {
   --mobile-menu-item--active_border: var(--IDS-COLOR-PRIMARY-40);
   --mobile-menu-item-has-children_color: var(--IDS-COLOR-PRIMARY-40);
   --mobile-menu-item-has-children_border-color: var(--IDS-COLOR-SECONDARY-90);
-  --mobile-menu-item-has-children_background-color: var(
-    --IDS-COLOR-SECONDARY-90
-  );
+  --mobile-menu-item-has-children_background-color: var(--IDS-COLOR-SECONDARY-90);
   /* Variation 2 */
   --mobile-menu-2-item_background-color: var(--IDS-COLOR-PRIMARY-40);
   --mobile-menu-2-item_color: var(--IDS-COLOR-ON-PRIMARY-40);
@@ -3600,9 +4179,7 @@ select::placeholder {
   --mobile-menu-2-item-2--active_background-color: var(--IDS-COLOR-PRIMARY-40);
   --mobile-menu-2-item-2--expanded_color: var(--IDS-COLOR-ON-PRIMARY-40);
   --mobile-menu-2-item-2--expanded_border-color: var(--IDS-COLOR-PRIMARY-40);
-  --mobile-menu-2-item-2--expanded_background-color: var(
-    --IDS-COLOR-PRIMARY-40
-  );
+  --mobile-menu-2-item-2--expanded_background-color: var(--IDS-COLOR-PRIMARY-40);
   /* Level 3 */
   /* Variation 1 */
   --mobile-menu-item-3_color: var(--IDS-COLOR-PRIMARY-40);
@@ -3619,15 +4196,14 @@ select::placeholder {
   --mobile-menu-2-item-3--active_border: var(--IDS-COLOR-PRIMARY-40);
   --mobile-menu-2-item-2-chevron_color: var(--IDS-COLOR-ON-PRIMARY-40);
   /* Navigation Content */
-  --content-navigation_border-radius: var(--IDS-BORDER-RADIUS);
-  --content-navigation_font-family: var(--font-family_1);
-  --content-navigation_font-weight: 400;
-  --content-navigation_font-size: 1rem;
+  --content-navigation_border-radius: var(--IDS-FORM-BORDER-RADIUS);
+  --content-navigation_font-family: var(--font-family_2);
+  --content-navigation_font-weight: 600;
+  --content-navigation_font-size: 1.25rem;
   --content-navigation_line-height: 22px;
   --content-navigation_letter-spacing: -0.4px;
-  --content-navigation_text-transform: uppercase;
   --content-navigation_padding-bottom: 5px;
-  --content-navigation_color: var(--IDS-COLOR-ACCENT-40);
+  --content-navigation_color: var(--IDS-COLOR-NEUTRAL-20);
   --content-navigation-separator_background-color: var(--IDS-COLOR-NEUTRAL-90);
   /* Navigation Local  */
   --navigation-local_border-top: 1px solid var(--IDS-COLOR-NEUTRAL-90);
@@ -3666,9 +4242,7 @@ select::placeholder {
   --stepper-step-indicator_color: var(--IDS-COLOR-ACCENT-40);
   --stepper-step-indicator_font-family: var(--font-family_1);
   --stepper-step-chevron_color: var(--IDS-COLOR-ACCENT-40);
-  --stepper-step-indicator-selected_background-color: var(
-    --IDS-COLOR-ACCENT-40
-  );
+  --stepper-step-indicator-selected_background-color: var(--IDS-COLOR-ACCENT-40);
   --stepper-step-indicator-valid-icon_color: var(--IDS-COLOR-SUCCESS-40);
   --stepper-step-indicator-valid_background-color: var(--IDS-COLOR-SUCCESS-99);
   --stepper-step-indicator-valid_border: 1px solid var(--IDS-COLOR-SUCCESS-40);
@@ -3691,11 +4265,12 @@ select::placeholder {
   /* Tab */
   --IDS-TABS_BORDER-BOTTOM: 4px solid var(--IDS-COLOR-NEUTRAL-90);
   --IDS-TAB_BACKGROUND-COLOR: var(--color-dust-background);
-  --IDS-TAB_COLOR: var(--IDS-COLOR-ACCENT-30);
-  --IDS-TAB_BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TAB_COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAB--SELECTED_COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-TAB_BORDER: 1px solid transparent;
+  --IDS-TAB--SELECTED-BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
   --IDS-TAB_BORDER-RADIUS: 3px 3px 0px 0px;
   --IDS-TAB--SELECTED_BOX-SHADOW: 0px 0px 4px rgba(0, 0, 0, 0.3);
-  --IDS-TAB--SELECTED_COLOR: var(--color-grey-base);
   --IDS-TAB-ICON_COLOR: var(--IDS-COLOR-ACCENT-40);
   --IDS-TAB-ICON_COLOR2: var(--IDS-COLOR-ACCENT-40);
   --IDS-TAB--SELECTED--BEFORE_CONTENT: none;
@@ -3708,9 +4283,10 @@ select::placeholder {
   --IDS-TAG__BORDER-RADIUS: 5px;
   --IDS-TAG__PADDING: 7px 15px;
   --IDS-TAG__COLOR: var(--IDS-COLOR-NEUTRAL-20);
-  --IDS-TAG__ICON_COLOR: var(--IDS-COLOR-ACCENT-40);
   --IDS-TAG--INTERACTIVE__COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAG--INTERACTIVE__COLOR--HOVER: var(--IDS-COLOR-ACCENT-30);
   --IDS-TAG--INTERACTIVE__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-TAG--INTERACTIVE__FONT-WEIGHT: normal;
   --IDS-TAG__ICON__COLOR: var(--IDS-COLOR-ACCENT-40);
   /* Tooltip */
   --tooltip_color: var(--IDS-COLOR-NEUTRAL-20);
@@ -3785,97 +4361,89 @@ ids-input input[type=search]::-webkit-search-results-decoration {
 .ids .ids-heading-1 {
   color: var(--IDS-COLOR-PRIMARY-40);
   font-style: normal;
-  font-family: var(--header-1-font-family);
-  font-size: var(--header-1-font-size);
-  font-weight: var(--header-1-font-weight);
-  letter-spacing: var(--header-1-letter-spacing);
-  line-height: var(--header-1-line-height);
+  font-family: var(--heading-1-font-family);
+  font-size: var(--heading-1-font-size);
+  font-weight: var(--heading-1-font-weight);
+  letter-spacing: var(--heading-1-letter-spacing);
+  line-height: var(--heading-1-line-height);
 }
 @media (max-width: 1024px) {
   .ids .ids-heading-1 {
-    font-size: var(--header-1-font-size-small);
-    line-height: var(--header-1-line-height-small);
+    font-size: var(--heading-1-font-size-small);
+    line-height: var(--heading-1-line-height-small);
   }
 }
 
 .ids .ids-heading-1.ids-small {
   color: var(--IDS-COLOR-PRIMARY-40);
   font-style: normal;
-  font-family: var(--header-1-small-font-family);
-  font-size: var(--header-1-small-font-size);
-  font-weight: var(--header-1-small-font-weight);
-  letter-spacing: var(--header-1-small-letter-spacing);
-  line-height: var(--header-1-small-line-height);
+  font-family: var(--heading-1-small-font-family);
+  font-size: var(--heading-1-small-font-size);
+  font-weight: var(--heading-1-small-font-weight);
+  letter-spacing: var(--heading-1-small-letter-spacing);
+  line-height: var(--heading-1-small-line-height);
 }
 @media (max-width: 1024px) {
   .ids .ids-heading-1.ids-small {
-    font-size: var(--header-1-small-font-size-small);
-    line-height: var(--header-1-small-line-height-small);
+    font-size: var(--heading-1-small-font-size-small);
+    line-height: var(--heading-1-small-line-height-small);
   }
 }
 
 .ids .ids-heading-2 {
   color: var(--IDS-COLOR-PRIMARY-40);
   font-style: normal;
-  font-family: var(--header-2-font-family);
-  font-size: var(--header-2-font-size);
-  font-weight: var(--header-2-font-weight);
-  letter-spacing: var(--header-2-letter-spacing);
-  line-height: var(--header-2-line-height);
+  font-family: var(--heading-2-font-family);
+  font-size: var(--heading-2-font-size);
+  font-weight: var(--heading-2-font-weight);
+  letter-spacing: var(--heading-2-letter-spacing);
+  line-height: var(--heading-2-line-height);
 }
 @media (max-width: 1024px) {
   .ids .ids-heading-2 {
-    font-size: var(--header-2-font-size-small);
-    line-height: var(--header-2-line-height-small);
+    font-size: var(--heading-2-font-size-small);
+    line-height: var(--heading-2-line-height-small);
   }
 }
 
 .ids .ids-heading-3 {
   color: var(--IDS-COLOR-NEUTRAL-20);
   font-style: normal;
-  font-family: var(--header-3-font-family);
-  font-size: var(--header-3-font-size);
-  font-weight: var(--header-3-font-weight);
-  letter-spacing: var(--header-3-letter-spacing);
-  line-height: var(--header-3-line-height);
+  font-family: var(--heading-3-font-family);
+  font-size: var(--heading-3-font-size);
+  font-weight: var(--heading-3-font-weight);
+  letter-spacing: var(--heading-3-letter-spacing);
+  line-height: var(--heading-3-line-height);
 }
 
 .ids .ids-heading-4 {
   color: var(--IDS-COLOR-NEUTRAL-20);
   font-style: normal;
-  font-family: var(--header-4-font-family);
-  font-size: var(--header-4-font-size);
-  font-weight: var(--header-4-font-weight);
-  letter-spacing: var(--header-4-letter-spacing);
-  line-height: var(--header-4-line-height);
+  font-family: var(--heading-4-font-family);
+  font-size: var(--heading-4-font-size);
+  font-weight: var(--heading-4-font-weight);
+  letter-spacing: var(--heading-4-letter-spacing);
+  line-height: var(--heading-4-line-height);
 }
 
 .ids .ids-heading-5 {
   color: var(--IDS-COLOR-NEUTRAL-20);
   font-style: normal;
-  text-transform: uppercase;
-  font-family: var(--header-5-font-family);
-  font-size: var(--header-5-font-size);
-  font-weight: var(--header-5-font-weight);
-  letter-spacing: var(--header-5-letter-spacing);
-  line-height: var(--header-5-line-height);
-}
-@media (max-width: 1024px) {
-  .ids .ids-heading-5 {
-    font-size: var(--header-5-font-size-small);
-    line-height: var(--header-5-line-height-small);
-  }
+  font-family: var(--heading-3-font-family);
+  font-size: var(--heading-3-font-size);
+  font-weight: var(--heading-3-font-weight);
+  letter-spacing: var(--heading-3-letter-spacing);
+  line-height: var(--heading-3-line-height);
 }
 
 .ids .ids-heading-6 {
   color: var(--IDS-COLOR-NEUTRAL-20);
   font-style: normal;
-  text-transform: uppercase;
-  font-family: var(--header-6-font-family);
-  font-size: var(--header-6-font-size);
-  font-weight: var(--header-6-font-weight);
-  letter-spacing: var(--header-6-letter-spacing);
-  line-height: var(--header-6-line-height);
+  font-family: var(--heading-4-font-family);
+  font-size: var(--heading-4-font-size);
+  font-weight: var(--heading-4-font-weight);
+  letter-spacing: var(--heading-4-letter-spacing);
+  line-height: var(--heading-4-line-height);
 }
 
 .ids .ids-preamble {
@@ -3898,6 +4466,52 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   line-height: 1.625rem;
 }
 
+.ids ul.ids-bullet-list,
+.ids .ids-bullet-list {
+  list-style: disc;
+  margin-left: 1.5rem;
+}
+.ids ul.ids-bullet-list li,
+.ids .ids-bullet-list li {
+  margin-bottom: 1rem;
+  padding-left: 0.5rem;
+  display: list-item;
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-family: var(--font-family_1);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0rem;
+  line-height: 1.625rem;
+}
+.ids ul.ids-bullet-list li::marker,
+.ids .ids-bullet-list li::marker {
+  color: var(--bullet-list-marker-color);
+}
+
+.ids ol.ids-numbered-list,
+.ids .ids-numbered-list {
+  list-style-type: decimal;
+  margin-left: 1.5rem;
+}
+.ids ol.ids-numbered-list li,
+.ids .ids-numbered-list li {
+  margin-bottom: 1rem;
+  padding-left: 0.5rem;
+  display: list-item;
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-family: var(--font-family_1);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0rem;
+  line-height: 1.625rem;
+}
+.ids ol.ids-numbered-list li::marker,
+.ids .ids-numbered-list li::marker {
+  font-weight: var(--bullet-list-marker-font-weight);
+}
+
 .ids .ids-body.ids-disabled {
   color: var(--IDS-COLOR-NEUTRAL-40);
   font-style: italic;