@inera/ids-design 5.1.2 → 5.2.0

package/themes/inera/inera.css

@@ -1,3 +1,15 @@
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
 .ids *,
 .ids *::before,
 .ids *::after {
@@ -21,7 +33,7 @@ body.ids,
 
 body.ids {
   background-color: var(--IDS-COLOR-NEUTRAL-100);
-  color: black;
+  color: var(--IDS-COLOR-NEUTRAL-20);
   font-family: var(--font-family_1);
   font-size: 1rem;
   min-height: 100%;
@@ -86,6 +98,10 @@ body.ids {
   background-color: var(--IDS-COLOR-SECONDARY-95);
 }
 
+.ids-hide-overflow {
+  overflow: hidden;
+}
+
 /* Removes native button styling */
 .ids-btn-no-styles {
   background: none;
@@ -2330,59 +2346,6 @@ 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);
@@ -2484,71 +2447,6 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   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],
@@ -2591,6 +2489,7 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   background-color: var(--btn_background-color);
   border: var(--btn_border);
   border-radius: var(--btn_border-radius);
+  text-decoration: none;
   box-sizing: border-box;
   color: white;
   cursor: pointer;
@@ -2844,54 +2743,49 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
 }
 
-.ids-label {
-  display: inline-block;
-  color: var(--IDS-FORM__LABEL__COLOR);
-  font-family: var(--IDS-FORM__LABEL__FONT-FAMILY);
-  font-size: var(--IDS-FORM__LABEL__FONT-SIZE);
-  font-style: normal;
-  font-weight: var(--IDS-FORM__LABEL__FONT-WEIGHT);
-  letter-spacing: var(--IDS-FORM__LABEL__LETTER-SPACING);
-  line-height: var(--IDS-FORM__LABEL__HEIGHT);
+.ids-radio {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
   margin-bottom: 5px;
-  min-height: 24px;
-  min-width: 24px;
+  margin-right: 8px;
 }
-.ids-label.ids-label--disabled {
-  font-style: italic;
-  color: var(--IDS-FORM__LABEL--DISABLED__COLOR);
+.ids-radio .ids-label-tooltip-wrapper label {
+  display: inline;
+  top: -3px;
+  position: relative;
+  margin-right: 8px;
 }
-
-.ids-radio,
 .ids-radio input,
-input[type=radio] {
+.ids-radio input[type=radio] {
   cursor: pointer;
   appearance: none;
   margin: 0;
-  font: inherit;
-  width: 20px;
-  height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
   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);
+  margin-top: 3px;
   position: relative;
 }
-.ids-radio.ids-input--light,
-.ids-radio input.ids-input--light,
-input[type=radio].ids-input--light {
+.ids-radio input.ids-input--light:not(:invalid),
+.ids-radio input[type=radio].ids-input--light:not(:invalid) {
   background-color: white;
 }
-.ids-radio.ids-input--light::before,
-.ids-radio input.ids-input--light::before,
-input[type=radio].ids-input--light::before {
+.ids-radio input.ids-input--light:not(:invalid)::before,
+.ids-radio input[type=radio].ids-input--light:not(:invalid)::before {
   border: 2px solid white;
   background-color: white;
 }
-.ids-radio::before,
+.ids-radio input.ids-input--light:not(:invalid):checked::before,
+.ids-radio input[type=radio].ids-input--light:not(:invalid):checked::before {
+  border: 2px solid var(--IDS-RADIO__BACKGROUND-COLOR);
+  background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR);
+}
 .ids-radio input::before,
-input[type=radio]::before {
+.ids-radio input[type=radio]::before {
   content: "";
   position: absolute;
   display: inline-block;
@@ -2904,70 +2798,79 @@ input[type=radio]::before {
   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 {
+.ids-radio input[type=radio]:checked::before {
   border: 2px solid var(--IDS-RADIO__BACKGROUND-COLOR);
   background-color: var(--IDS-RADIO--CHECKED__BACKGROUND-COLOR);
 }
-.ids-radio:disabled,
 .ids-radio input:disabled,
-input[type=radio]:disabled {
+.ids-radio input[type=radio]:disabled {
   cursor: default;
   background-color: var(--IDS-RADIO--DISABLED__BACKGROUND-COLOR);
   background-image: var(--IDS-RADIO--DISABLED_BACKGROUND-IMAGE);
   border: 0;
 }
-.ids-radio:disabled::before,
 .ids-radio input:disabled::before,
-input[type=radio]:disabled::before {
+.ids-radio 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 {
+.ids-radio 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) {
+.ids-radio 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-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 {
+.ids-radio 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 {
-  cursor: pointer;
-  padding-left: 8px;
-  margin-bottom: 0;
+.ids-radio.ids-radio--compact {
+  margin: 0 !important;
 }
-.ids-label--radio.ids-label--disabled {
-  cursor: default;
+.ids-radio.ids-radio--compact label {
+  margin-left: 0 !important;
+  margin-bottom: -2px !important;
 }
 
-ids-radio {
-  display: flex;
-  align-items: baseline;
+.ids-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 5px;
+  margin-right: 8px;
+}
+.ids-checkbox .ids-label-tooltip-wrapper label {
+  display: inline;
+  top: -3px;
+  position: relative;
+  margin-right: 8px;
 }
-ids-radio *[slot=tooltip] {
-  margin-left: 5px;
+.ids-checkbox input[type=checkbox],
+.ids-checkbox input {
+  margin: 3px 0 0 0;
+  position: relative;
+  height: 1.25rem;
+  width: 1.25rem;
+  appearance: none;
 }
-
-.ids-checkbox-label::before {
+.ids-checkbox input[type=checkbox]::before,
+.ids-checkbox input::before {
   content: "";
+  position: relative;
+  display: inline-block;
   cursor: pointer;
   background-color: var(--IDS-CHECKBOX_BACKGROUND-COLOR);
   border: var(--IDS-CHECKBOX_BORDER);
@@ -2975,97 +2878,73 @@ ids-radio *[slot=tooltip] {
   box-sizing: border-box;
   min-height: 1.25rem;
   min-width: 1.25rem;
-  margin-top: 2px;
 }
-
-.ids-checkbox-label::after {
+input:focus + .ids-checkbox input[type=checkbox]::before,
+input:focus + .ids-checkbox input::before {
+  outline: var(--focus_outline);
+  outline-offset: var(--focus_outline-offset);
+}
+.ids-checkbox input[type=checkbox]:checked::after,
+.ids-checkbox input:checked::after {
   content: "";
+  display: inline-block;
+  background-image: var(--IDS-CHECKBOX--CHECK_BACKGROUND-IMAGE);
   min-height: 1.25rem;
   min-width: 1.25rem;
   position: absolute;
+  top: 0;
+  left: 0;
   cursor: pointer;
   background-position: center center;
   background-size: 1em 1em;
   background-repeat: no-repeat;
-  margin-top: 2px;
-}
-
-.ids-checkbox,
-ids-checkbox input {
-  opacity: 0;
-  position: absolute;
-}
-
-ids-checkbox *[slot=tooltip] {
-  margin-left: 5px;
-}
-
-.ids-checkbox-label {
-  position: relative;
-  display: inline-flex;
-  align-items: flex-start;
-  gap: 0.625rem;
-  cursor: pointer;
-}
-input:focus + .ids-checkbox-label::before {
-  outline: var(--focus_outline);
-  outline-offset: var(--focus_outline-offset);
-}
-input:checked + .ids-checkbox-label::after {
-  background-image: var(--IDS-CHECKBOX--CHECK_BACKGROUND-IMAGE);
-}
-.ids-checkbox-label.ids-checkbox-label--no-label {
-  justify-content: center;
-  margin-bottom: 0px;
-  gap: 0px;
-}
-.ids-checkbox-label.ids-checkbox-label--no-label::before, .ids-checkbox-label.ids-checkbox-label--no-label::after {
-  margin-top: 0px;
 }
-.ids-checkbox-label.ids-label--light:not(.ids-label--invalid)::before {
-  background: white;
-}
-.ids-checkbox-label.ids-label--disabled {
-  cursor: default;
-}
-.ids-checkbox-label.ids-label--disabled::before {
+.ids-checkbox input[type=checkbox]:disabled::before,
+.ids-checkbox input:disabled::before {
   cursor: default;
   background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
   border: none !important;
   background-image: var(--IDS-CHECKBOX--DISABLED_BACKGROUND-IMAGE) !important;
 }
-.ids-checkbox-label.ids-label--disabled:after {
+.ids-checkbox input[type=checkbox]:disabled:after,
+.ids-checkbox input:disabled:after {
   cursor: default;
 }
-input:checked + .ids-checkbox-label.ids-label--disabled::after {
+.ids-checkbox input[type=checkbox]:disabled:checked + .ids-checkbox input[type=checkbox]:disabled::after,
+.ids-checkbox input[type=checkbox]:disabled:checked + .ids-checkbox input:disabled::after,
+.ids-checkbox input:disabled:checked + .ids-checkbox input[type=checkbox]:disabled::after,
+.ids-checkbox input:disabled:checked + .ids-checkbox input:disabled::after {
   background-image: var(--IDS-CHECKBOX-CHECK--DISABLED_BACKGROUND-IMAGE) !important;
 }
-.ids-checkbox-label.ids-label--invalid::before {
-  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+.ids-checkbox input[type=checkbox]:invalid::before,
+.ids-checkbox input:invalid::before {
   border: none;
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
   background-image: var(--IDS-CHECKBOX--INVALID_BACKGROUND-IMAGE);
 }
-input:checked + .ids-checkbox-label.ids-label--invalid::after {
+.ids-checkbox input[type=checkbox]:invalid::before:checked + .ids-checkbox input[type=checkbox]:invalid::before::after,
+.ids-checkbox input[type=checkbox]:invalid::before:checked + .ids-checkbox input:invalid::before::after,
+.ids-checkbox input:invalid::before:checked + .ids-checkbox input[type=checkbox]:invalid::before::after,
+.ids-checkbox input:invalid::before:checked + .ids-checkbox input:invalid::before::after {
   background-image: var(--IDS-CHECKBOX-CHECK--INVALID_BACKGROUND-IMAGE) !important;
 }
-
-@media (max-width: 1023px) {
-  .ids-desktop {
-    display: none !important;
-  }
+.ids-checkbox.ids-checkbox--light input[type=checkbox]::before,
+.ids-checkbox.ids-checkbox--light input::before {
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
 }
-
-@media (min-width: 1024px) {
-  .ids-mobile {
-    display: none !important;
-  }
+.ids-checkbox.ids-checkbox--light input[type=checkbox]:invalid::before,
+.ids-checkbox.ids-checkbox--light input:invalid::before {
+  background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+}
+.ids-checkbox.ids-checkbox--compact {
+  margin: 0 !important;
+}
+.ids-checkbox.ids-checkbox--compact label {
+  margin-left: 0 !important;
+  margin-bottom: -2px !important;
 }
 
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-input.ids-time, .ids-textarea, .ids-select, .ids-input {
+.ids-input {
   font-family: var(--font-family_1) !important;
   padding: 0.75rem 1.25rem;
   background-color: var(--IDS-INPUT_BACKGROUND);
@@ -3075,57 +2954,14 @@ input.ids-time, .ids-textarea, .ids-select, .ids-input {
   font-size: 16px;
   color: var(--IDS-INPUT_COLOR);
   display: block;
+  width: 100%;
 }
-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 {
+.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-input {
-  width: 100%;
-}
-
-.ids-input.ids-input--search {
-  margin-top: 0px !important;
-  margin-bottom: 0px !important;
-  height: 3.75rem;
-  padding-left: 55px !important;
-  font-size: 18px !important;
-}
-
 .ids-input__hint {
   margin-top: 5px;
   font-family: var(--font-family_1);
@@ -3164,8 +3000,44 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   padding-left: 55px !important;
 }
 
-.ids-input:focus {
-  box-shadow: var(--IDS-INPUT_BOX-SHADOW);
+.ids-input__inner-wrapper {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+.ids-input__inner-wrapper .ids-input__cancel-button {
+  display: none;
+  border: none;
+  padding: 0;
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  height: 20px;
+  width: 20px;
+  background-image: var(--IDS-INPUT--SEARCH__CANCEL-ICON);
+}
+.ids-input__inner-wrapper .ids-input__cancel-button.ids-input__cancel-button--show {
+  display: block;
+}
+.ids-input__inner-wrapper .ids-input__cancel-button.ids-input__cancel-button--show:focus {
+  outline: var(--IDS-FOCUS_OUTLINE);
+  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+}
+
+.ids-input.ids-input--invalid {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+  border: none;
+  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
+}
+.ids-input:disabled {
+  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
+  border: none;
+  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+}
+.ids-input:focus {
+  box-shadow: var(--IDS-INPUT_BOX-SHADOW);
 }
 .ids-input[type=search] {
   padding-left: 55px;
@@ -3176,12 +3048,12 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
 .ids-input.ids-input--light:required {
   background-color: white;
 }
-.ids-input.ids-input--search::-webkit-search-cancel-button, .ids-input.ids-input--search::-webkit-search-results-button, .ids-input.ids-input--search::-webkit-search-results-decoration {
-  cursor: pointer;
-  -webkit-appearance: none;
-  height: 20px;
-  width: 20px;
-  background-image: var(--IDS-INPUT--SEARCH__CANCEL-ICON);
+.ids-input.ids-input--search {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  height: 3.75rem;
+  padding-left: 55px !important;
+  font-size: 18px !important;
 }
 @media (max-width: 1024px) {
   .ids-input.ids-input--search {
@@ -3249,11 +3121,7 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   cursor: default;
 }
 
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-input.ids-time, .ids-textarea, .ids-select, .ids-input {
+.ids-select {
   font-family: var(--font-family_1) !important;
   padding: 0.75rem 1.25rem;
   background-color: var(--IDS-INPUT_BACKGROUND);
@@ -3263,51 +3131,29 @@ input.ids-time, .ids-textarea, .ids-select, .ids-input {
   font-size: 16px;
   color: var(--IDS-INPUT_COLOR);
   display: block;
+  cursor: pointer;
+  appearance: none !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  display: inline-block !important;
+  padding-right: 50px !important;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: var(--select_border);
+  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
+  width: 100% !important;
 }
-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 {
+.ids-select: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-select.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
   background-image: var(--IDS-FORM--INVALID__BACKGROUND-IMAGE);
   border: 1px solid transparent;
 }
-
 .ids-select:disabled {
   color: var(--IDS-FORM--DISABLED__COLOR);
   background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
@@ -3315,20 +3161,6 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   font-style: italic !important;
   background-image: var(--IDS-FORM--DISABLED__BACKGROUND-IMAGE);
 }
-
-.ids-select {
-  cursor: pointer;
-  appearance: none !important;
-  -webkit-appearance: none !important;
-  -moz-appearance: none !important;
-  display: inline-block !important;
-  padding-right: 50px !important;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: var(--select_border);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
-  width: 100% !important;
-}
 .ids-select.ids-input--light {
   background-color: white;
 }
@@ -3341,6 +3173,21 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   position: relative;
   display: flex;
 }
+.ids-select-wrapper::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;
+}
 .ids-select-wrapper:has(.ids-input--invalid)::after {
   background-image: var(--IDS-SELECT--INVALID__CHEVRON-ICON);
 }
@@ -3352,11 +3199,10 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
   cursor: default;
 }
 
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-input.ids-time, .ids-textarea, .ids-input, .ids-select {
+.ids-textarea {
+  display: inline-block;
+}
+.ids-textarea textarea {
   font-family: var(--font-family_1) !important;
   padding: 0.75rem 1.25rem;
   background-color: var(--IDS-INPUT_BACKGROUND);
@@ -3366,74 +3212,98 @@ input.ids-time, .ids-textarea, .ids-input, .ids-select {
   font-size: 16px;
   color: var(--IDS-INPUT_COLOR);
   display: block;
+  box-sizing: border-box;
 }
-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-input:disabled, .ids-select:disabled {
+.ids-textarea textarea: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 ::after, .ids-select-wrapper::after {
-  content: "";
-  width: 12px;
-  height: 100%;
-  display: block;
+.ids-textarea textarea::-webkit-scrollbar {
+  width: 14px;
   position: absolute;
-  transform: rotate(90deg);
-  right: 25px;
-  top: 0px;
-  bottom: 0px;
-  background-position: center;
+  margin-left: -20px;
+  margin-top: 10px;
+}
+.ids-textarea textarea::-webkit-scrollbar-track {
+  background: var(--IDS-SCROLL_TRACK-COLOR);
+  border-radius: 10px;
+  margin-top: 10px;
+  margin-bottom: 2px;
+}
+.ids-textarea textarea::-webkit-resizer {
+  appearance: none;
+  background-image: var(--IDS-TEXTAREA-RESIZER-IMAGE);
   background-repeat: no-repeat;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON);
-  pointer-events: none;
+  background-position: center center;
+  background-size: cover;
 }
-
-/*******
-* Accessibility
-********/
-/* headings */
-.ids-textarea.ids-input--light, .ids-textarea.ids-textarea--light {
+.ids-textarea textarea::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+.ids-textarea textarea::-webkit-scrollbar-thumb {
+  cursor: auto;
+  background: var(--IDS-SCROLL_COLOR);
+  border-radius: 10px;
+  box-sizing: border-box;
+  border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
+}
+.ids-textarea textarea::-webkit-scrollbar-thumb:hover {
+  background: var(--IDS-SCROLL_HOVER-COLOR);
+}
+.ids-textarea textarea:focus {
+  box-shadow: var(--IDS-INPUT_BOX-SHADOW);
+}
+.ids-textarea textarea.ids-input--light {
   background-color: white;
 }
+.ids-textarea textarea.ids-input--invalid {
+  background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
+  border: none;
+  background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
+}
+.ids-textarea.ids-textarea--block {
+  display: block;
+}
+.ids-textarea.ids-textarea--block textarea {
+  display: block;
+  width: 100%;
+}
 .ids-textarea.ids-textarea--autosize {
-  resize: none;
   display: block;
+}
+.ids-textarea.ids-textarea--autosize textarea {
+  width: 100%;
+  resize: none;
   overflow: hidden;
 }
-.ids-textarea:focus {
-  box-shadow: var(--IDS-INPUT_BOX-SHADOW);
+
+.ids-time-input-wrapper {
+  position: relative;
+  display: flex;
+  gap: 10px;
 }
-.ids-textarea::-webkit-scrollbar {
-  width: 10px;
+.ids-time-input-wrapper .ids-input {
+  width: 100%;
+  min-height: 3rem;
 }
-.ids-textarea::-webkit-scrollbar-track {
-  background: 5px var(--IDS-SCROLL_BACKGROUND-COLOR);
-  border-radius: 10px;
-  margin: 10px;
+.ids-time-input-wrapper .ids-input__icon {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  right: 25px;
+  transform: translateY(-50%);
 }
-.ids-textarea::-webkit-scrollbar-thumb {
-  background: var(--IDS-SCROLL_COLOR);
-  border-radius: 10px;
+.ids-time-input-wrapper ::slotted(input),
+.ids-time-input-wrapper input {
+  cursor: pointer;
+}
+.ids-time-input-wrapper ::slotted(input:disabled),
+.ids-time-input-wrapper input:disabled {
+  cursor: default;
 }
 
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-input.ids-time, .ids-input, .ids-select, .ids-textarea {
+input.ids-time {
   font-family: var(--font-family_1) !important;
   padding: 0.75rem 1.25rem;
   background-color: var(--IDS-INPUT_BACKGROUND);
@@ -3443,120 +3313,564 @@ input.ids-time, .ids-input, .ids-select, .ids-textarea {
   font-size: 16px;
   color: var(--IDS-INPUT_COLOR);
   display: block;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  box-sizing: border-box;
+  border: var(--select_border);
+  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
+  width: var(--time-width);
+  height: var(--time-height);
+  padding-left: var(--time-padding-left);
+  padding-top: var(--time-padding-top);
+  padding-bottom: var(--time-padding-bottom);
 }
-input.ids-time.ids-input--invalid, .ids-input.ids-input--invalid, .ids-textarea.ids-input--invalid, .ids-textarea.ids-textarea--invalid {
+input.ids-time:disabled {
+  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
+  border: none;
+  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+}
+input.ids-time.ids-input--invalid {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
   border: none;
   background-image: var(--IDS-INPUT--INVALID_BACKGROUND-IMAGE);
 }
+input.ids-time::-webkit-calendar-picker-indicator {
+  opacity: 0;
+  background-size: 20px;
+  margin-top: -3px;
+  position: absolute;
+  right: var(--IDS-INPUT__CALENDAR-ICON__RIGHT);
+  top: 25px;
+}
+input.ids-time.ids-input--light:not(:invalid) {
+  background-color: white;
+}
 
-input.ids-time:disabled, .ids-input:disabled, .ids-select:disabled, .ids-textarea:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
+input.ids-time:disabled {
+  cursor: default;
 }
 
-.ids-label-wrapper {
+.ids-toggle {
   display: inline-flex;
-  gap: 10px;
-  align-items: center;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 5px;
+  margin-right: 8px;
 }
-
-.ids-select ::after, .ids-select-wrapper::after {
+.ids-toggle .ids-label-tooltip-wrapper label {
+  display: inline;
+  top: -3px;
+  position: relative;
+  margin-right: 8px;
+}
+.ids-toggle label {
+  position: relative;
+  top: 6px;
+}
+.ids-toggle .ids-label-tooltip-wrapper {
+  position: relative;
+  top: 6px;
+}
+.ids-toggle .ids-label-tooltip-wrapper label {
+  top: -4px;
+  margin-right: 8px;
+}
+.ids-toggle input[type=checkbox],
+.ids-toggle input {
+  position: relative;
+  margin: 0;
+  height: 32px;
+  width: 62px;
+  border: 1px solid transparent;
+  border-radius: 100px;
+  appearance: none;
+}
+.ids-toggle input[type=checkbox]:before,
+.ids-toggle input:before {
   content: "";
-  width: 12px;
-  height: 100%;
-  display: block;
   position: absolute;
-  transform: rotate(90deg);
-  right: 25px;
-  top: 0px;
-  bottom: 0px;
-  background-position: center;
+  cursor: pointer;
+  background-color: var(--IDS-TOGGLE__BACKGROUND-COLOR);
+  border-radius: 100px;
+  height: 30px;
+  width: 60px;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+input:focus + .ids-toggle input[type=checkbox]:before,
+input:focus + .ids-toggle input:before {
+  outline: var(--focus_outline);
+  outline-offset: var(--focus_outline-offset);
+}
+.ids-toggle input[type=checkbox]:after,
+.ids-toggle input:after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  cursor: pointer;
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+  height: 24px;
+  width: 24px;
+  border-radius: 100%;
+  background-image: var(--IDS-TOGGLE-KNOB__BACKGROUND-IMAGE);
+  background-position: center center;
+  background-size: 10px 10px;
   background-repeat: no-repeat;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON);
-  pointer-events: none;
+  top: 3px;
+  left: 3px;
+  -webkit-transition: 0.3s;
+  transition: all 0.3s;
+}
+.ids-toggle input[type=checkbox]:checked:before,
+.ids-toggle input:checked:before {
+  background-color: var(--IDS-TOGGLE--CHECKED__BACKGROUND-COLOR);
+}
+.ids-toggle input[type=checkbox]:checked:after,
+.ids-toggle input:checked:after {
+  content: "";
+  background-image: var(--IDS-TOGGLE-KNOB--CHECKED__BACKGROUND-IMAGE);
+  top: 3px;
+  left: calc(100% - 27px);
+  -webkit-transition: 0.3s;
+  transition: all 0.3s;
+}
+.ids-toggle input[type=checkbox]:disabled + label,
+.ids-toggle input:disabled + label {
+  cursor: default;
+  font-style: italic;
+  color: var(--IDS-FORM__LABEL--DISABLED__COLOR);
+}
+.ids-toggle input[type=checkbox]:disabled:before,
+.ids-toggle input:disabled:before {
+  cursor: default;
+  background-color: var(--IDS-TOGGLE--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-TOGGLE--DISABLED__BORDER);
+}
+.ids-toggle input[type=checkbox]:disabled:after,
+.ids-toggle input:disabled:after {
+  cursor: default;
+  background-color: var(--IDS-TOGGLE-KNOB--DISABLED_BACKGROUND-COLOR);
+  background-image: var(--IDS-TOGGLE-KNOB__DISABLED__BACKGROUND-IMAGE);
+}
+.ids-toggle input[type=checkbox]:disabled:checked:before,
+.ids-toggle input:disabled:checked:before {
+  cursor: default;
+  background-color: var(--IDS-TOGGLE--DISABLED__BACKGROUND-COLOR);
+  border: var(--IDS-TOGGLE--DISABLED__BORDER);
+}
+.ids-toggle input[type=checkbox]:disabled:checked:after,
+.ids-toggle input:disabled:checked:after {
+  cursor: default;
+  background-color: var(--IDS-TOGGLE-KNOB--DISABLED_BACKGROUND-COLOR);
+  background-image: var(--IDS-TOGGLE-KNOB--DISABLED--CHECKED__BACKGROUND-IMAGE);
 }
 
-/*******
-* Accessibility
-********/
-/* headings */
-.ids-time-input-wrapper {
-  position: relative;
+.ids-form-group__fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
   display: flex;
-  gap: 10px;
+  flex-direction: column;
+  gap: 8px;
 }
-.ids-time-input-wrapper .ids-input {
+.ids-form-group__fieldset.ids-form-group__fieldset--compact {
+  gap: 0;
+}
+.ids-form-group__fieldset legend {
+  padding: 0;
+  font-style: normal;
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-family: var(--body-font-family);
+  font-size: var(--body-font-size);
+  line-height: var(--body-line-height);
+  font-weight: 400;
+  letter-spacing: 0;
+  color: var(--IDS-FORM__LABEL__COLOR);
+  display: inline-flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.ids-description-list {
+  margin: 0;
+  padding: 0;
   width: 100%;
-  min-height: 3rem;
+  border: var(--IDS-DESCRIPTION-LIST__BORDER);
+  border-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
+  display: var(--IDS-DESCRIPTION-LIST__DISPLAY);
+  flex-direction: column;
+  grid-template-columns: auto 1fr;
+  /*   @media only screen and (min-width: breakpoints.$small) {
+      grid-template-columns: auto 1fr;
+    } */
+}
+.ids-description-list .ids-description-list__term {
+  border-right: var(--IDS-DESCRIPTION-LIST__BORDER);
+  border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER);
+  padding: var(--IDS-DESCRIPTION-LIST__PADDING);
+  background-color: var(--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-family: var(--font-family_1);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+  overflow-wrap: break-word;
 }
-.ids-time-input-wrapper .ids-input__icon {
-  pointer-events: none;
-  position: absolute;
-  top: 50%;
-  right: 25px;
-  transform: translateY(-50%);
+.ids-description-list .ids-description-list__term:first-child {
+  border-top-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
 }
-.ids-time-input-wrapper ::slotted(input),
-.ids-time-input-wrapper input {
-  cursor: pointer;
+.ids-description-list .ids-description-list__term:nth-last-child(2) {
+  border-bottom: 0;
+  border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
+}
+.ids-description-list .ids-description-list__description {
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER);
+  padding: var(--IDS-DESCRIPTION-LIST__PADDING);
+  margin-bottom: var(--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM);
+}
+.ids-description-list .ids-description-list__description:first-child {
+  border-top-right-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
+}
+.ids-description-list .ids-description-list__description:last-child {
+  border-bottom: 0;
+  border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS);
+}
+.ids-description-list.ids-description-list--column {
+  border: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
+  border-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
+  display: var(--IDS-DESCRIPTION-LIST__DISPLAY--COLUMN);
+}
+.ids-description-list.ids-description-list--column .ids-description-list__term {
+  border-right: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
+  border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
+  padding: var(--IDS-DESCRIPTION-LIST__PADDING--COLUMN);
+  background-color: var(--IDS-DESCRIPTION-LIST-TERM__BACKGROUND-COLOR--COLUMN);
+}
+.ids-description-list.ids-description-list--column .ids-description-list__term:first-child {
+  border-top-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
+}
+.ids-description-list.ids-description-list--column .ids-description-list__term:nth-last-child(2) {
+  border-bottom: 0;
+  border-bottom-left-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
+}
+.ids-description-list.ids-description-list--column .ids-description-list__description {
+  border-bottom: var(--IDS-DESCRIPTION-LIST__BORDER--COLUMN);
+  padding: var(--IDS-DESCRIPTION-LIST__PADDING--COLUMN);
+  margin-bottom: var(--IDS-DESCRIPTION-LIST-DESCRIPTION__MARGIN-BOTTOM--COLUMN);
+  background-color: var(--IDS-COLOR-NEUTRAL-100);
+}
+.ids-description-list.ids-description-list--column .ids-description-list__description:nth-child(2) {
+  border-top-right-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
+}
+.ids-description-list.ids-description-list--column .ids-description-list__description:last-child {
+  border-bottom: 0;
+  border-bottom-right-radius: var(--IDS-DESCRIPTION-LIST__BORDER-RADIUS--COLUMN);
+}
+
+.ids .ids-heading-xxl {
+  font-style: normal;
+  color: var(--heading-xxl-color);
+  font-family: var(--heading-xxl-font-family);
+  font-size: var(--heading-xxl-font-size);
+  line-height: var(--heading-xxl-line-height);
+  letter-spacing: var(--heading-xxl-letter-spacing);
+  font-weight: var(--heading-xxl-font-weight);
+}
+@media (min-width: 1024px) {
+  .ids .ids-heading-xxl {
+    font-size: var(--heading-xxl-font-size-desktop);
+    line-height: var(--heading-xxl-line-height-desktop);
+    letter-spacing: var(--heading-xxl-letter-spacing-desktop);
+  }
+}
+.ids .ids-heading-xxl:focus-visible {
+  outline: none;
+}
+.ids .ids-heading-xl {
+  font-style: normal;
+  color: var(--heading-xl-color);
+  font-family: var(--heading-xl-font-family);
+  font-size: var(--heading-xl-font-size);
+  line-height: var(--heading-xl-line-height);
+  letter-spacing: var(--heading-xl-letter-spacing);
+  font-weight: var(--heading-xl-font-weight);
+}
+@media (min-width: 1024px) {
+  .ids .ids-heading-xl {
+    font-size: var(--heading-xl-font-size-desktop);
+    line-height: var(--heading-xl-line-height-desktop);
+    letter-spacing: var(--heading-xl-letter-spacing-desktop);
+  }
+}
+.ids .ids-heading-xl:focus-visible {
+  outline: none;
+}
+.ids .ids-heading-l {
+  font-style: normal;
+  color: var(--heading-l-color);
+  font-family: var(--heading-l-font-family);
+  font-size: var(--heading-l-font-size);
+  line-height: var(--heading-l-line-height);
+  letter-spacing: var(--heading-l-letter-spacing);
+  font-weight: var(--heading-l-font-weight);
+}
+@media (min-width: 1024px) {
+  .ids .ids-heading-l {
+    font-size: var(--heading-l-font-size-desktop);
+    line-height: var(--heading-l-line-height-desktop);
+    letter-spacing: var(--heading-l-letter-spacing-desktop);
+  }
+}
+.ids .ids-heading-l:focus-visible {
+  outline: none;
+}
+.ids .ids-heading-m {
+  font-style: normal;
+  color: var(--heading-m-color);
+  font-family: var(--heading-m-font-family);
+  font-size: var(--heading-m-font-size);
+  line-height: var(--heading-m-line-height);
+  letter-spacing: var(--heading-m-letter-spacing);
+  font-weight: var(--heading-m-font-weight);
+}
+@media (min-width: 1024px) {
+  .ids .ids-heading-m {
+    font-size: var(--heading-m-font-size-desktop);
+    line-height: var(--heading-m-line-height-desktop);
+    letter-spacing: var(--heading-m-letter-spacing-desktop);
+  }
+}
+.ids .ids-heading-m .ids-anchor {
+  color: var(--anchor-color);
+  text-decoration: none;
+}
+.ids .ids-heading-m .ids-anchor:visited {
+  color: var(--anchor-color);
+}
+.ids .ids-heading-m .ids-anchor:link {
+  text-decoration: none;
+}
+.ids .ids-heading-m .ids-anchor:active, .ids .ids-heading-m .ids-anchor:hover {
+  color: var(--anchor-hover-color);
+}
+.ids .ids-heading-m:focus-visible {
+  outline: none;
+}
+.ids .ids-heading-s {
+  font-style: normal;
+  color: var(--heading-s-color);
+  font-family: var(--heading-s-font-family);
+  font-size: var(--heading-s-font-size);
+  line-height: var(--heading-s-line-height);
+  letter-spacing: var(--heading-s-letter-spacing);
+  font-weight: var(--heading-s-font-weight);
+}
+@media (min-width: 1024px) {
+  .ids .ids-heading-s {
+    font-size: var(--heading-s-font-size-desktop);
+    line-height: var(--heading-s-line-height-desktop);
+    letter-spacing: var(--heading-s-letter-spacing-desktop);
+  }
+}
+.ids .ids-heading-s .ids-anchor {
+  color: var(--anchor-color);
+  text-decoration: none;
+}
+.ids .ids-heading-s .ids-anchor:visited {
+  color: var(--anchor-color);
+}
+.ids .ids-heading-s .ids-anchor:link {
+  text-decoration: none;
+}
+.ids .ids-heading-s .ids-anchor:active, .ids .ids-heading-s .ids-anchor:hover {
+  color: var(--anchor-hover-color);
+}
+.ids .ids-heading-s:focus-visible {
+  outline: none;
+}
+.ids .ids-heading-xs {
+  font-style: normal;
+  color: var(--heading-xs-color);
+  font-family: var(--heading-xs-font-family);
+  font-size: var(--heading-xs-font-size);
+  line-height: var(--heading-xs-line-height);
+  letter-spacing: var(--heading-xs-letter-spacing);
+  font-weight: var(--heading-xs-font-weight);
+}
+.ids .ids-heading-xs .ids-anchor {
+  color: var(--anchor-color);
+  text-decoration: none;
+}
+.ids .ids-heading-xs .ids-anchor:visited {
+  color: var(--anchor-color);
+}
+.ids .ids-heading-xs .ids-anchor:link {
+  text-decoration: none;
+}
+.ids .ids-heading-xs .ids-anchor:active, .ids .ids-heading-xs .ids-anchor:hover {
+  color: var(--anchor-hover-color);
+}
+.ids .ids-heading-xs:focus-visible {
+  outline: none;
+}
+.ids .ids-preamble {
+  font-style: normal;
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-family: var(--preamble-font-family);
+  font-size: var(--preamble-font-size);
+  line-height: var(--preamble-line-height);
+  font-weight: 300;
+  letter-spacing: 0;
+}
+@media (min-width: 1024px) {
+  .ids .ids-preamble {
+    font-size: var(--preamble-font-size-desktop);
+    line-height: var(--preamble-line-height-desktop);
+  }
+}
+.ids .ids-preamble .ids-anchor {
+  color: var(--anchor-color);
+  text-decoration: none;
+}
+.ids .ids-preamble .ids-anchor:visited {
+  color: var(--anchor-color);
+}
+.ids .ids-preamble .ids-anchor:link {
+  text-decoration: underline;
+}
+.ids .ids-preamble .ids-anchor:active, .ids .ids-preamble .ids-anchor:hover {
+  color: var(--anchor-hover-color);
+  text-decoration: underline;
+}
+.ids .ids-body {
+  font-style: normal;
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-family: var(--body-font-family);
+  font-size: var(--body-font-size);
+  line-height: var(--body-line-height);
+  font-weight: 400;
+  letter-spacing: 0;
+}
+.ids .ids-body .ids-anchor {
+  color: var(--anchor-color);
+  text-decoration: none;
+}
+.ids .ids-body .ids-anchor:visited {
+  color: var(--anchor-color);
+}
+.ids .ids-body .ids-anchor:link {
+  text-decoration: underline;
+}
+.ids .ids-body .ids-anchor:active, .ids .ids-body .ids-anchor:hover {
+  color: var(--anchor-hover-color);
+  text-decoration: underline;
+}
+.ids .ids-body.ids-disabled {
+  color: var(---body-disabled-color);
+  font-style: italic;
+}
+.ids .ids-small {
+  font-style: normal;
+  color: var(--IDS-COLOR-NEUTRAL-20);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  letter-spacing: 0rem;
+  font-family: var(--font-family_1);
+}
+.ids .ids-small .ids-anchor {
+  color: var(--anchor-color);
+  text-decoration: none;
+}
+.ids .ids-small .ids-anchor:visited {
+  color: var(--anchor-color);
+}
+.ids .ids-small .ids-anchor:link {
+  text-decoration: underline;
+}
+.ids .ids-small .ids-anchor:active, .ids .ids-small .ids-anchor:hover {
+  color: var(--anchor-hover-color);
+  text-decoration: underline;
+}
+.ids .ids-pagelist {
+  font-style: normal;
+  color: var(--page-list-color);
+  font-family: var(--pagelist-font-family);
+  font-size: var(--pagelist-font-size);
+  line-height: var(--pagelist-line-height);
+  font-weight: var(--pagelist-font-weight);
+  letter-spacing: var(--pagelist-letterspacing);
+}
+.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: 0;
+  line-height: var(--bullet-list-line-height);
 }
-.ids-time-input-wrapper ::slotted(input:disabled),
-.ids-time-input-wrapper input:disabled {
-  cursor: default;
+.ids ul.ids-bullet-list li::marker,
+.ids .ids-bullet-list li::marker {
+  color: var(--bullet-list-marker-color);
 }
-
-input.ids-time {
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  display: inline-block;
-  box-sizing: border-box;
-  border: var(--select_border);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
-  width: var(--time-width);
-  height: var(--time-height);
-  padding-left: var(--time-padding-left);
-  padding-top: var(--time-padding-top);
-  padding-bottom: var(--time-padding-bottom);
+.ids ol.ids-numbered-list,
+.ids .ids-numbered-list {
+  list-style-type: decimal;
+  margin-left: 1.5rem;
 }
-input.ids-time::-webkit-calendar-picker-indicator {
-  opacity: 0;
-  background-size: 20px;
-  margin-top: -3px;
-  position: absolute;
-  right: var(--IDS-INPUT__CALENDAR-ICON__RIGHT);
-  top: 25px;
+.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: var(--bullet-list-line-height);
 }
-input.ids-time.ids-input--light:not(:invalid) {
-  background-color: white;
+.ids ol.ids-numbered-list li::marker,
+.ids .ids-numbered-list li::marker {
+  font-weight: var(--bullet-list-marker-font-weight);
 }
 
-input.ids-time:disabled {
-  cursor: default;
+.ids-content .ids-heading-xxl {
+  margin-bottom: var(--heading-xxl-margin-bottom);
 }
-
-.ids-form-group__fieldset {
-  border: none;
-  margin: 0px;
-  padding: 0px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+.ids-content .ids-heading-xl {
+  margin-bottom: var(--heading-xl-margin-bottom);
 }
-.ids-form-group__fieldset.ids-form-group__fieldset--compact {
-  gap: 0px;
+.ids-content .ids-heading-l {
+  margin-bottom: var(--heading-l-margin-bottom);
 }
-.ids-form-group__fieldset legend {
-  padding: 0px;
-  display: inline-flex;
-  font-family: var(--font-family_1);
-  color: var(--IDS-FORM__LABEL__COLOR);
-  gap: 10px;
+.ids-content .ids-heading-m,
+.ids-content .ids-heading-s,
+.ids-content .ids-heading-xs {
   margin-bottom: 10px;
 }
+.ids-content .ids-preamble {
+  margin-bottom: 40px;
+}
+.ids-content .ids-body {
+  margin-bottom: 30px;
+}
 
 :root {
   --IDS_MAX-WIDTH: 1280px;
@@ -3620,6 +3934,7 @@ select::placeholder {
   --IDS-COLOR-ON-NEUTRAL-90: var(--IDS-COLOR-NEUTRAL-20);
   --IDS-COLOR-NEUTRAL-99: #F0F0F0;
   --IDS-COLOR-ON-NEUTRAL-99: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-COLOR-NEUTRAL-100: #fff;
   /* Background colors */
   --IDS-COLOR-BACKGROUND: #fff;
   --IDS-COLOR-ON-BACKGROUND: var(--IDS-COLOR-NEUTRAL-20);
@@ -3640,6 +3955,96 @@ select::placeholder {
 
 :root,
 :host {
+  /* Font families */
+  --font-family_1: "Open Sans";
+  --font-family_2: "Poppins";
+  --heading-xxl-color: var(--IDS-COLOR-PRIMARY-40);
+  --heading-xxl-font-family: var(--font-family_2);
+  --heading-xxl-font-size: 1.875rem;
+  --heading-xxl-line-height: 2.375rem;
+  --heading-xxl-font-size-desktop: 2.5rem;
+  --heading-xxl-line-height-desktop: 3.125rem;
+  --heading-xxl-font-weight: 600;
+  --heading-xxl-letter-spacing: inherit;
+  --heading-xxl-letter-spacing-desktop: inherit;
+  --heading-xxl-margin-bottom: 20px;
+  --heading-xl-color: var(--IDS-COLOR-PRIMARY-40);
+  --heading-xl-font-family: var(--font-family_2);
+  --heading-xl-font-size: 1.625rem;
+  --heading-xl-line-height: 2rem;
+  --heading-xl-font-size-desktop: 2rem;
+  --heading-xl-line-height-desktop: 2.5rem;
+  --heading-xl-font-weight: 600;
+  --heading-xl-letter-spacing: inherit;
+  --heading-xl-letter-spacing-desktop: inherit;
+  --heading-xl-margin-bottom: 20px;
+  --heading-l-color: var(--IDS-COLOR-PRIMARY-40);
+  --heading-l-font-family: var(--font-family_2);
+  --heading-l-font-size: 1.5rem;
+  --heading-l-line-height: 1.875rem;
+  --heading-l-font-size-desktop: 1.75rem;
+  --heading-l-line-height-desktop: 2.25rem;
+  --heading-l-font-weight: 600;
+  --heading-l-letter-spacing: inherit;
+  --heading-l-letter-spacing-desktop: inherit;
+  --heading-l-margin-bottom: 20px;
+  --heading-m-color: var(--IDS-COLOR-PRIMARY-40);
+  --heading-m-font-family: var(--font-family_2);
+  --heading-m-font-size: 1.375rem;
+  --heading-m-line-height: 1.75rem;
+  --heading-m-font-size-desktop: 1.5rem;
+  --heading-m-line-height-desktop: 2rem;
+  --heading-m-font-weight: 600;
+  --heading-m-letter-spacing: inherit;
+  --heading-m-letter-spacing-desktop: inherit;
+  --heading-s-color: var(--IDS-COLOR-NEUTRAL-20);
+  --heading-s-font-family: var(--font-family_2);
+  --heading-s-font-size: 1.25rem;
+  --heading-s-line-height: 1.5rem;
+  --heading-s-font-size-desktop: 1.25rem;
+  --heading-s-line-height-desktop: 1.625rem;
+  --heading-s-font-weight: 600;
+  --heading-s-letter-spacing: inherit;
+  --heading-s-letter-spacing-desktop: inherit;
+  --heading-xs-color: var(--IDS-COLOR-NEUTRAL-20);
+  --heading-xs-font-family: var(--font-family_2);
+  --heading-xs-font-size: 1rem;
+  --heading-xs-line-height: 1.25rem;
+  --heading-xs-font-weight: 600;
+  --heading-xs-letter-spacing: inherit;
+  --anchor-color: var(--IDS-COLOR-ACCENT-40);
+  --anchor-hover-color: var(--IDS-COLOR-ACCENT-30);
+  --preamble-font-family: var(--font-family_1);
+  --preamble-font-size: 1.125rem;
+  --preamble-line-height: 1.75rem;
+  --preamble-font-size-desktop: 1.375rem;
+  --preamble-line-height-desktop: 2.25rem;
+  --body-font-family: var(--font-family_1);
+  --body-font-size: 1rem;
+  --body-font-line-height: 1.625rem;
+  --body-disabled-color: var(--IDS-COLOR-NEUTRAL-40);
+  --page-list-color: var(--IDS-COLOR-ACCENT-40);
+  --pagelist-font-family: var(--font-family_1);
+  --pagelist-font-size: 1.125rem;
+  --pagelist-line-height: 1.5rem;
+  --pagelist-font-weight: 600;
+  --pagelist-letterspacing: 0;
+  --bullet-list-marker-color: var(--IDS-COLOR-PRIMARY-40);
+  --bullet-list-marker-font-weight: normal;
+  --bullet-list-line-height: 1.625rem;
+}
+
+:root,
+:host {
+  /**********************
+    * General
+    **********************/
+  --IDS-BORDER-RADIUS: 3px;
+  --IDS-BASE__FONT-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-SCROLL_COLOR: var(--IDS-COLOR-ACCENT-40);
+  --IDS-SCROLL_HOVER-COLOR: var(--IDS-COLOR-ACCENT-30);
+  --IDS-SCROLL_TRACK-COLOR: var(--IDS-COLOR-NEUTRAL-99);
+  --IDS-OVERLAY__BACKGROUND-COLOR: rgba(53, 53, 53, 0.6);
   /**********************
   * FORM
   **********************/
@@ -3657,7 +4062,7 @@ select::placeholder {
   --IDS-FORM__LABEL__FONT-SIZE: 1rem;
   --IDS-FORM__LABEL__FONT-WEIGHT: 400;
   --IDS-FORM__LABEL__LETTER-SPACING: 0px;
-  --IDS-FORM__LABEL__HEIGHT: 1.5rem;
+  --IDS-FORM__LABEL__HEIGHT: 1.25rem;
   /* ERROR MESSAGE */
   --IDS-ERROR-MESSAGE__COLOR: var(--IDS-COLOR-ERROR-40);
   --IDS-ERROR-MESSAGE__MARGIN-TOP: 0.8rem;
@@ -3710,14 +4115,13 @@ select::placeholder {
   --IDS-INPUT_COLOR: var(--IDS-COLOR-NEUTRAL-20);
   --IDS-INPUT__ICON--DISABLED__FILL: var(--IDS-COLOR-NEUTRAL-40);
   --IDS-INPUT--SEARCH__BORDER-RADIUS: 3px;
-  --IDS-INPUT--SEARCH__CANCEL-ICON: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="20" height="20" style="" viewBox="0 0 40 40" aria-hidden="true"><!--%3Flit$332566053$--><path xmlns="http://www.w3.org/2000/svg" d="M4.26777 0.732233C3.29146 -0.244078 1.70854 -0.244078 0.732233 0.732233C-0.244078 1.70854 -0.244078 3.29146 0.732233 4.26777L16.4645 20L0.732233 35.7322C-0.244078 36.7085 -0.244078 38.2915 0.732233 39.2678C1.70854 40.2441 3.29146 40.2441 4.26777 39.2678L20 23.5355L35.7322 39.2678C36.7085 40.2441 38.2915 40.2441 39.2678 39.2678C40.2441 38.2915 40.2441 36.7085 39.2678 35.7322L23.5355 20L39.2678 4.26777C40.2441 3.29146 40.2441 1.70854 39.2678 0.732233C38.2915 -0.244078 36.7085 -0.244078 35.7322 0.732233L20 16.4645L4.26777 0.732233Z" fill="%2340775E"></path></svg>');
   /* RADIO */
   --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--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-COLOR: var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-RADIO--CHECKED-DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-RADIO--INVALID__BACKGROUND-COLOR: var(--IDS-COLOR-ERROR-99);
   --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 */
@@ -3727,16 +4131,17 @@ select::placeholder {
   --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--CHECKED__BACKGROUND-COLOR: var(--IDS-COLOR-SUCCESS-40);
+  --IDS-TOGGLE-KNOB__BACKGROUND-IMAGE: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="10" height="10" style="" viewBox="0 0 40 40" aria-hidden="true"><!--%3Flit$332566053$--><path xmlns="http://www.w3.org/2000/svg" d="M4.26777 0.732233C3.29146 -0.244078 1.70854 -0.244078 0.732233 0.732233C-0.244078 1.70854 -0.244078 3.29146 0.732233 4.26777L16.4645 20L0.732233 35.7322C-0.244078 36.7085 -0.244078 38.2915 0.732233 39.2678C1.70854 40.2441 3.29146 40.2441 4.26777 39.2678L20 23.5355L35.7322 39.2678C36.7085 40.2441 38.2915 40.2441 39.2678 39.2678C40.2441 38.2915 40.2441 36.7085 39.2678 35.7322L23.5355 20L39.2678 4.26777C40.2441 3.29146 40.2441 1.70854 39.2678 0.732233C38.2915 -0.244078 36.7085 -0.244078 35.7322 0.732233L20 16.4645L4.26777 0.732233Z" fill="rgb(53,53,53)"></path></svg>');
+  --IDS-TOGGLE-KNOB--CHECKED__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="rgb(48,90,71)"></path></svg>');
+  --IDS-TOGGLE-KNOB__DISABLED__BACKGROUND-IMAGE: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="10" height="10" style="" viewBox="0 0 40 40" aria-hidden="true"><!--%3Flit$332566053$--><path xmlns="http://www.w3.org/2000/svg" d="M4.26777 0.732233C3.29146 -0.244078 1.70854 -0.244078 0.732233 0.732233C-0.244078 1.70854 -0.244078 3.29146 0.732233 4.26777L16.4645 20L0.732233 35.7322C-0.244078 36.7085 -0.244078 38.2915 0.732233 39.2678C1.70854 40.2441 3.29146 40.2441 4.26777 39.2678L20 23.5355L35.7322 39.2678C36.7085 40.2441 38.2915 40.2441 39.2678 39.2678C40.2441 38.2915 40.2441 36.7085 39.2678 35.7322L23.5355 20L39.2678 4.26777C40.2441 3.29146 40.2441 1.70854 39.2678 0.732233C38.2915 -0.244078 36.7085 -0.244078 35.7322 0.732233L20 16.4645L4.26777 0.732233Z" fill="rgb(128,130,133)"></path></svg>');
+  --IDS-TOGGLE-KNOB--DISABLED--CHECKED__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="rgb(128,130,133)"></path></svg>');
   --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);
-  --IDS-TOGGLE-KNOB--DISABLED__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
-  --IDS-TOGGLE-SLIDER--DISABLED__BORDER: 1px dashed var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TOGGLE--DISABLED__BORDER: 1px dashed var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TOGGLE-KNOB--DISABLED_BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
   /* Textarea*/
   --IDS-TEXTAREA__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
-  --IDS-TEXTAREA-SCROLL__BACKGROUND-COLOR: var(--IDS-SCROLL_BACKGROUND-COLOR);
+  --IDS-TEXTAREA-RESIZER-IMAGE: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' version='1.1' id='svg3' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs3' /%3E%3Cpath d='m 32.750455,4.7161113 c 0.976302,0.9763023 0.529818,2.224356 -0.446491,3.2006654 L 7.8342826,32.274835 c -0.9763016,0.976302 -2.3917967,1.70185 -3.3680997,0.725548 -0.9763016,-0.976303 -0.9763016,-2.559232 0,-3.535533 L 29.214921,4.7161113 c 0.976309,-0.9763094 2.559232,-0.9763023 3.535534,0 z' fill='%23396291' id='path2' style='fill:%2340775e;fill-opacity:1' /%3E%3Cpath d='m 32.876716,22.751757 c 0.384143,-0.71897 0.316192,-1.636374 -0.299366,-2.19609 -0.663607,-0.603405 -1.851199,-0.577406 -2.545108,-0.158033 l -10.906246,10.66159 c -0.440031,0.431082 -0.426797,1.850489 0.270247,2.410027 0.620863,0.498385 2.193013,0.576181 2.633044,0.145099 z' fill='%23396291' id='path1' style='fill:%2340775e;fill-opacity:1;stroke-width:0.446104' /%3E%3C/svg%3E%0A");
   /* Range */
   --IDS-RANGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
   --IDS-RANGE-SELECTION__BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
@@ -3748,17 +4153,17 @@ select::placeholder {
   --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__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__PADDING--COLUMN: 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;
+  /* Side panel */
+  --IDS-SIDE-PANEL__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
   /************************************************************************/
   /* Default styles */
   --IDS-BOX-SHADOW: 0px 2px 6px rgba(0, 0, 0, 0.15);
@@ -3775,50 +4180,6 @@ select::placeholder {
   --focus_outline-offset: 2px;
   --focus-outline_color: var(--IDS-COLOR-NEUTRAL-20);
   --focus-outline-bright_color: white;
-  /**********************
-    * Typography
-    **********************/
-  /* Font families */
-  --font-family_1: "Open Sans";
-  --font-family_2: "Poppins";
-  --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-BASE__FONT-COLOR: var(--IDS-COLOR-NEUTRAL-20);
   /**********************
     * Forms
     **********************/
@@ -4232,18 +4593,19 @@ select::placeholder {
   --stepper-step-indicator-invalid_background-color: var(--IDS-COLOR-ERROR-99);
   --stepper-step-indicator-invalid_border: 1px dashed var(--IDS-COLOR-ERROR-40);
   /* Table */
-  --table-head_background-color: var(--IDS-COLOR-SECONDARY-90);
-  --table-head_color: var(--IDS-COLOR-NEUTRAL-20);
-  --table-cell_color: var(--IDS-COLOR-NEUTRAL-20);
-  --table-cell_border: 1px solid var(--IDS-COLOR-NEUTRAL-40);
-  --table_border-top: 1px solid var(--IDS-COLOR-NEUTRAL-40);
-  --table_border-lr: 1px solid var(--IDS-COLOR-NEUTRAL-40);
-  --table_border-bottom: 1px solid var(--IDS-COLOR-NEUTRAL-40);
-  --table_broder-radius: 5px;
+  --IDS-TABLE-HEAD__BACKGROUND_COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-TABLE-CELL__BORDER: 1px solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TABLE__BORDER-BOTTOM: 1px solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TABLE__BORDER-RADIUS: 5px;
+  --IDS-TABLE__BORDER-TOP: 1px solid var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-TABLE__BORDER-LR: 1px solid var(--IDS-COLOR-NEUTRAL-40);
   /* Data Table */
-  --data-table-head_background-color: var(--IDS-COLOR-SECONDARY-90);
-  --data-table-cell_color: var(--IDS-COLOR-NEUTRAL-40);
-  --data-table_border-radius: 5px 5px 5px 5px;
+  --IDS-DATA-TABLE-HEAD__BACKGROUND_COLOR: var(--IDS-COLOR-SECONDARY-90);
+  --IDS-DATA-TABLE-CELL__BACKGROUND_COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-DATA-TABLE-CELL--SELECTED: var(--IDS-COLOR-ACCENT-95);
+  --IDS-DATA-TABLE-CELL__BORDER_COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-DATA-TABLE__BORDER-RADIUS: 5px 5px 5px 5px;
+  --IDS-DATA-TABLE-HEAD__FONT-FAMILY: var(--font-family_1);
   /* Tab */
   --IDS-TABS_BORDER-BOTTOM: 4px solid var(--IDS-COLOR-NEUTRAL-90);
   --IDS-TAB_BACKGROUND-COLOR: var(--color-dust-background);
@@ -4260,7 +4622,7 @@ select::placeholder {
   --IDS-TAB--SELECTED--AFTER_BOTTOM: -4px;
   --IDS-TAB--SELECTED--AFTER_BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-30);
   /* Tag */
-  --IDS-TAG__BACKGROUND-COLOR: white;
+  --IDS-TAG__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
   --IDS-TAG__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
   --IDS-TAG__BORDER-RADIUS: 5px;
   --IDS-TAG__PADDING: 7px 15px;
@@ -4304,11 +4666,9 @@ select::placeholder {
 ids-input input[type=search]::-webkit-search-cancel-button,
 ids-input input[type=search]::-webkit-search-results-button,
 ids-input input[type=search]::-webkit-search-results-decoration {
-  cursor: pointer;
+  appearance: none;
   -webkit-appearance: none;
-  height: 20px;
-  width: 20px;
-  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="20" height="20" style="" viewBox="0 0 40 40" aria-hidden="true"><!--%3Flit$332566053$--><path xmlns="http://www.w3.org/2000/svg" d="M4.26777 0.732233C3.29146 -0.244078 1.70854 -0.244078 0.732233 0.732233C-0.244078 1.70854 -0.244078 3.29146 0.732233 4.26777L16.4645 20L0.732233 35.7322C-0.244078 36.7085 -0.244078 38.2915 0.732233 39.2678C1.70854 40.2441 3.29146 40.2441 4.26777 39.2678L20 23.5355L35.7322 39.2678C36.7085 40.2441 38.2915 40.2441 39.2678 39.2678C40.2441 38.2915 40.2441 36.7085 39.2678 35.7322L23.5355 20L39.2678 4.26777C40.2441 3.29146 40.2441 1.70854 39.2678 0.732233C38.2915 -0.244078 36.7085 -0.244078 35.7322 0.732233L20 16.4645L4.26777 0.732233Z" fill="%23396291"></path></svg>');
+  display: none;
 }
 
 .ids-divider {
@@ -4318,221 +4678,76 @@ ids-input input[type=search]::-webkit-search-results-decoration {
   border: none;
 }
 
-.ids-content .ids-heading-1,
-.ids-content .ids-heading-1.ids-small {
-  margin-bottom: 20px;
-}
-
-.ids-content .ids-body {
-  margin-bottom: 30px;
-}
-
-.ids-content .ids-heading-2,
-.ids-content .ids-heading-2.ids-small,
-.ids-content .ids-heading-3,
-.ids-content .ids-heading-4,
-.ids-content .ids-heading-5,
-.ids-content .ids-heading-6 {
-  margin-bottom: 10px;
-}
-
-.ids-content .ids-preamble {
-  margin-bottom: 40px;
-}
-
-.ids .ids-heading-1 {
-  color: var(--IDS-COLOR-PRIMARY-40);
-  font-style: normal;
-  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(--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(--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(--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(--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(--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(--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(--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;
-  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;
-  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-scrollbar::-webkit-scrollbar {
+  width: 14px;
+  position: absolute;
+  margin-left: -20px;
+  margin-top: 10px;
 }
-
-.ids .ids-preamble {
-  color: var(--IDS-COLOR-NEUTRAL-20);
-  font-family: var(--font-family_1);
-  font-size: 1.25rem;
-  font-style: normal;
-  font-weight: 300;
-  letter-spacing: 0rem;
-  line-height: 2rem;
+.ids-scrollbar::-webkit-scrollbar-track {
+  background: var(--IDS-SCROLL_TRACK-COLOR);
+  border-radius: 10px;
+  margin-top: 10px;
+  margin-bottom: 0;
 }
-
-.ids .ids-body {
-  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-scrollbar::-webkit-resizer {
+  appearance: none;
+  background-image: var(--IDS-TEXTAREA-RESIZER-IMAGE);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
 }
-
-.ids ul.ids-bullet-list,
-.ids .ids-bullet-list {
-  list-style: disc;
-  margin-left: 1.5rem;
+.ids-scrollbar::-webkit-scrollbar-corner {
+  background-color: transparent;
 }
-.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-scrollbar::-webkit-scrollbar-thumb {
+  cursor: auto;
+  background: var(--IDS-SCROLL_COLOR);
+  border-radius: 10px;
+  box-sizing: border-box;
+  border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
 }
-.ids ul.ids-bullet-list li::marker,
-.ids .ids-bullet-list li::marker {
-  color: var(--bullet-list-marker-color);
+.ids-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--IDS-SCROLL_HOVER-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;
+.ids-label {
+  display: inline-block;
+  color: var(--IDS-FORM__LABEL__COLOR);
+  font-family: var(--IDS-FORM__LABEL__FONT-FAMILY);
+  font-size: var(--IDS-FORM__LABEL__FONT-SIZE);
   font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0rem;
-  line-height: 1.625rem;
+  font-weight: var(--IDS-FORM__LABEL__FONT-WEIGHT);
+  letter-spacing: var(--IDS-FORM__LABEL__LETTER-SPACING);
+  line-height: var(--IDS-FORM__LABEL__HEIGHT);
+  margin-top: 3px;
+  min-height: 24px;
+  min-width: 24px;
 }
-.ids ol.ids-numbered-list li::marker,
-.ids .ids-numbered-list li::marker {
-  font-weight: var(--bullet-list-marker-font-weight);
+.ids-label.ids-label--clickable {
+  cursor: pointer;
 }
-
-.ids .ids-body.ids-disabled {
-  color: var(--IDS-COLOR-NEUTRAL-40);
+.ids-label.ids-label--disabled {
   font-style: italic;
+  color: var(--IDS-FORM__LABEL--DISABLED__COLOR);
+  cursor: default !important;
 }
-
-.ids .ids-heading-1 .ids-anchor:link,
-.ids .ids-heading-2 .ids-anchor:link,
-.ids .ids-heading-3 .ids-anchor:link,
-.ids .ids-heading-4 .ids-anchor:link {
-  text-decoration: none;
-}
-
-.ids .ids-anchor:link,
-.ids .ids-anchor:active,
-.ids .ids-anchor:visited,
-.ids .ids-anchor:hover {
-  color: var(--IDS-COLOR-ACCENT-40);
-  text-decoration: underline;
+.ids-label.ids-label--no-label {
+  display: none;
 }
 
-.ids .ids-small {
-  color: var(--IDS-COLOR-NEUTRAL-20);
-  font-family: var(--font-family_1);
-  font-size: 0.875rem;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0rem;
-  line-height: 1.25rem;
+.ids-label-wrapper {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 5px;
+  margin-right: 8px;
 }
-
-.ids .ids-pagelist {
-  color: var(--IDS-COLOR-ACCENT-40);
-  font-family: var(--font-family_1);
-  font-size: 1.125rem;
-  font-style: normal;
-  font-weight: 600;
-  letter-spacing: 0rem;
-  line-height: 1.5rem;
-  margin-bottom: var(--margin-300);
+.ids-label-wrapper .ids-label-tooltip-wrapper label {
+  display: inline;
+  top: -3px;
+  position: relative;
+  margin-right: 8px;
 }
 
 .ids-show-inera {