.dm20hkb-component {
  position: relative;
  min-height: 520px;
  margin-top: var(--margin_tb, 0rem);
  margin-bottom: var(--margin_tb, 0rem);
  overflow: hidden;
  color: #fff;
  background-color: var(--background-color, transparent);
  background-image: var(--background-image, url("https://js-test.cdnem.com/custom/material/bg_16_9_1.jpg"));
  background-position: var(--background-position, center);
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
}

.dm20hkb-component__background-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(10, 18, 38, 0.88);
  pointer-events: none;
}

.dm20hkb-component__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--custom-content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-top: calc(6rem + var(--padding_tb, 0rem));
  padding-bottom: calc(6rem + var(--padding_tb, 0rem));
  padding-left: var(--padding_lr);
  padding-right: var(--padding_lr);
}

.dm20hkb-component__title {
  margin: 0 0 72px;
  color: var(--title-color, rgb(255, 255, 255));
  font-family: var(--title-font-family, "IBM Plex Sans", Arial, sans-serif);
  font-size: var(--title-font-size, 32px);
  font-style: var(--title-font-style, normal);
  font-weight: var(--title-font-weight, 700);
  line-height: var(--title-line-height, normal);
  letter-spacing: var(--title-letter-spacing, 0.12em);
  text-align: var(--title-text-align, center);
  text-decoration: var(--title-text-decoration, none);
  text-transform: var(--title-text-transform, uppercase);
}

.dm20hkb-component__title:hover {
  color: var(--title-hover-color, rgb(255, 255, 255));
  font-family: var(--title-hover-font-family, var(--title-font-family, "IBM Plex Sans", Arial, sans-serif));
  font-size: var(--title-hover-font-size, var(--title-font-size, 32px));
}

.dm20hkb-component__timeline-wrap {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  column-gap: 16px;
  width: 100%;
  min-height: 205px;
  margin: 0 auto;
}

.dm20hkb-component__nav {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: #fff;
  background: transparent;
  cursor: pointer;
}

.dm20hkb-component__nav:disabled { opacity: 0.35; cursor: default; }
.dm20hkb-component__nav-icon { font-size: 18px; line-height: 1; }

.dm20hkb-component__timeline-viewport {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 205px;
  overflow: hidden;
}

.dm20hkb-component__timeline-list {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 205px;
  transform: translate3d(0, 0, 0);
  transition: transform 300ms ease;
  will-change: transform;
}

.dm20hkb-component__item {
  flex: 0 0 var(--timeline-item-width, 25%);
  min-width: 0;
  color: #fff;
  cursor: pointer;
}

.dm20hkb-component__track {
  display: grid;
  grid-template-columns: 1fr 22px 1fr;
  align-items: end;
  height: 90px;
}

.dm20hkb-component__line { height: 1px; margin-bottom: 10px; }
.dm20hkb-component__line--left { background: var(--left-divider-color, rgba(255, 255, 255, 0.3)); }
.dm20hkb-component__line--right { background: var(--right-divider-color, rgba(255, 255, 255, 0.3)); }

.dm20hkb-component__point-center { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dm20hkb-component__year {
  margin: 0;
  color: var(--ordinal-color, rgb(255, 255, 255));
  font-family: var(--ordinal-font-family, "IBM Plex Sans", Arial, sans-serif);
  font-size: var(--ordinal-font-size, 28px);
  font-style: var(--ordinal-font-style, normal);
  font-weight: var(--ordinal-font-weight, 700);
  line-height: var(--ordinal-line-height, normal);
  letter-spacing: var(--ordinal-letter-spacing, 0.5px);
  text-align: var(--ordinal-text-align, center);
  text-decoration: var(--ordinal-text-decoration, none);
  text-transform: var(--ordinal-text-transform, none);
  white-space: nowrap;
  transition: 300ms ease;
}

.dm20hkb-component__item:hover .dm20hkb-component__year {
  color: var(--item-hover-color, rgb(147, 197, 253));
  font-family: var(--ordinal-hover-font-family, var(--ordinal-font-family, "IBM Plex Sans", Arial, sans-serif));
  font-size: var(--ordinal-hover-font-size, var(--ordinal-font-size, 28px));
  transform: scale(1.08);
}
.dm20hkb-component__point { z-index: 2; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid var(--point-outer-color, rgba(255, 255, 255, 0.7)); border-radius: 50%; background: var(--point-inner-color, rgba(255, 255, 255, 0.4)); transition: 300ms ease; }
.dm20hkb-component .timeline__point::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background-color: var(--point-center-color, var(--themeColor1)); transition: background-color 300ms ease; }
/* ac-spec-consumes: timeline-item-hover */
@media (hover: hover) and (pointer: fine) {
  .dm20hkb-component__item:hover .dm20hkb-component__point {
    border-color: var(--item-hover-color, rgb(147, 197, 253));
    background: rgb(0, 24, 82);
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.8);
    transform: scale(1.15);
  }

  .dm20hkb-component__item:hover .timeline__point::after { background-color: rgb(255, 255, 255); }
}

.dm20hkb-component__description-group { padding: 20px 20px 0; text-align: center; }
.dm20hkb-component__description {
  margin: 0;
  color: var(--description-color, rgba(255, 255, 255, 0.85));
  font-family: var(--description-font-family, "IBM Plex Sans", Arial, sans-serif);
  font-size: var(--description-font-size, 13.5px);
  font-style: var(--description-font-style, normal);
  font-weight: var(--description-font-weight, 400);
  line-height: var(--description-line-height, 1.65);
  letter-spacing: var(--description-letter-spacing, 0px);
  text-align: var(--description-text-align, center);
  text-decoration: var(--description-text-decoration, none);
  text-transform: var(--description-text-transform, none);
  white-space: pre-line;
  opacity: 0.82;
  transform: translateY(6px);
  transition: 350ms ease;
}
.dm20hkb-component__item:hover .dm20hkb-component__description {
  color: var(--description-hover-color, rgb(255, 255, 255));
  font-family: var(--description-hover-font-family, var(--description-font-family, "IBM Plex Sans", Arial, sans-serif));
  font-size: var(--description-hover-font-size, var(--description-font-size, 13.5px));
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 959px) {
  .dm20hkb-component { min-height: 522px; }
  .dm20hkb-component__inner { --padding_lr: 2rem; padding-top: calc(6rem + var(--padding_tb, 0rem)); padding-bottom: calc(6rem + var(--padding_tb, 0rem)); }
  .dm20hkb-component__title { margin-bottom: 72px; font-size: var(--title-mobile-font-size, 32px); }
  .dm20hkb-component__timeline-wrap { grid-template-columns: 46px minmax(0, 1fr) 46px; width: 100%; }
  .dm20hkb-component__item { flex-basis: var(--timeline-item-width, 100%); }
  .dm20hkb-component__year { font-size: var(--ordinal-mobile-font-size, 28px); }
  .dm20hkb-component__description { font-size: var(--description-mobile-font-size, 13.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .dm20hkb-component__timeline-list,
  .dm20hkb-component__year,
  .dm20hkb-component__point,
  .dm20hkb-component__description,
  .dm20hkb-component__point::after { transition-duration: 0ms; }
}