:root {
  --dx-standard-blue: #0f2dd4;
  --dx-standard-navy: #0b1437;
  --dx-standard-ink: #101729;
  --dx-standard-mid: #34415d;
  --dx-standard-muted: #6b7896;
  --dx-standard-line: #e1e7f3;
  --dx-standard-soft: #f7f8fc;
  --dx-standard-blue-soft: #eef2ff;
  --dx-standard-green-soft: #ecfff7;
  --dx-standard-warm-soft: #fff8e9;
  --dx-standard-shadow: 0 18px 50px rgba(13, 35, 80, .10);
  --dx-standard-shadow-soft: 0 8px 24px rgba(13, 35, 80, .06);
  --dx-standard-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --dx-standard-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-training-standard="true"] {
  overflow-x: clip !important;
  scroll-padding-top: 96px;
}

body.dx-training-module {
  color: var(--dx-standard-ink);
  background: #fff;
  font-family: var(--dx-standard-sans);
  line-height: 1.68;
  overflow-x: clip !important;
}

.dx-training-module *,
.dx-training-module *::before,
.dx-training-module *::after {
  box-sizing: border-box;
}

.dx-training-module .app {
  display: grid !important;
  grid-template-columns: 304px minmax(0, 1fr) !important;
  min-height: 100vh;
}

@media (min-width: 921px) {
  html[data-training-standard="true"],
  html[data-training-standard="true"] body.dx-training-module {
    height: 100% !important;
    overflow: hidden !important;
  }

  .dx-training-module .app {
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
  }

  .dx-training-module .main {
    height: 100vh !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
  }
}

.dx-training-module .sidebar {
  position: sticky !important;
  top: 0;
  height: 100vh !important;
  overflow: auto !important;
  padding: 24px 18px !important;
  border-right: 1px solid var(--dx-standard-line) !important;
  background: linear-gradient(180deg, #fbfcff 0%, #f5f7fe 100%) !important;
}

.dx-training-module .dx-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--dx-standard-line);
}

.dx-training-module .dx-brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--dx-standard-line);
  border-radius: 14px;
  box-shadow: var(--dx-standard-shadow-soft);
}

.dx-training-module .dx-brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.dx-training-module .dx-brand-title {
  min-width: 0;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: 0;
}

.dx-training-module .dx-brand-title small {
  display: block;
  margin-top: 4px;
  color: var(--dx-standard-muted);
  font-size: .76rem;
  font-weight: 650;
}

.dx-training-module .dx-side-section,
.dx-training-module .side-section {
  margin: 22px 0 !important;
}

.dx-training-module .dx-side-title,
.dx-training-module .side-title {
  margin: 0 0 8px 8px !important;
  color: var(--dx-standard-muted) !important;
  font-size: .74rem !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.dx-training-module .nav-link {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 3px 0 !important;
  padding: 10px !important;
  color: var(--dx-standard-mid) !important;
  background: transparent !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  font-size: .9rem !important;
  font-weight: 750 !important;
  line-height: 1.22 !important;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

.dx-training-module .nav-link:hover,
.dx-training-module .nav-link:focus-visible {
  color: var(--dx-standard-blue) !important;
  background: var(--dx-standard-blue-soft) !important;
  outline: none;
}

.dx-training-module .nav-link.active {
  color: #fff !important;
  background: var(--dx-standard-blue) !important;
  box-shadow: var(--dx-standard-shadow-soft) !important;
}

.dx-training-module .nav-no {
  min-width: 34px !important;
  color: inherit !important;
  font-family: var(--dx-standard-mono) !important;
  font-size: .72rem !important;
  opacity: .9 !important;
}

.dx-training-module .dx-progress-card,
.dx-training-module .progress-card {
  margin-top: 26px !important;
  padding: 18px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--dx-standard-blue), #0d2350) !important;
  border-radius: 18px !important;
  box-shadow: var(--dx-standard-shadow-soft) !important;
}

.dx-training-module .dx-progress-label,
.dx-training-module .progress-label {
  text-transform: uppercase !important;
  font-size: .68rem !important;
  opacity: .82 !important;
  letter-spacing: .09em !important;
  font-weight: 850 !important;
}

.dx-training-module .dx-progress-value,
.dx-training-module .progress-value {
  margin-top: 4px !important;
  font-family: var(--dx-standard-mono) !important;
  font-size: 1.35rem !important;
  font-weight: 850 !important;
}

.dx-training-module .dx-progress-bar,
.dx-training-module .bar {
  height: 5px !important;
  margin-top: 12px !important;
  background: rgba(255, 255, 255, .24) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.dx-training-module .dx-progress-bar span,
.dx-training-module .bar span {
  display: block !important;
  height: 100% !important;
  background: #fff !important;
}

.dx-training-module .main,
.dx-training-module .content,
.dx-training-module .hero,
.dx-training-module .section,
.dx-training-module .card,
.dx-training-module .callout,
.dx-training-module .code-wrap,
.dx-training-module pre {
  min-width: 0 !important;
}

.dx-training-module .toolbar {
  position: sticky !important;
  top: 0;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 34px !important;
  border-bottom: 1px solid var(--dx-standard-line) !important;
  background: rgba(255, 255, 255, .94) !important;
  backdrop-filter: blur(14px) !important;
}

.dx-training-module .crumb,
.dx-training-module .dx-crumb {
  color: var(--dx-standard-muted) !important;
  font-size: .92rem !important;
}

.dx-training-module .toolbar-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.dx-training-module .btn {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--dx-standard-line) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  color: var(--dx-standard-ink) !important;
  background: #fff !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.dx-training-module .btn.primary,
.dx-training-module .btn.dx-primary {
  color: #fff !important;
  background: var(--dx-standard-blue) !important;
  border-color: var(--dx-standard-blue) !important;
}

.dx-training-module .btn.dx-disabled {
  color: var(--dx-standard-muted) !important;
  background: #f5f7fb !important;
  pointer-events: none !important;
}

.dx-training-module .content {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 30px 24px 52px !important;
}

.dx-training-module .hero {
  position: relative !important;
  overflow: hidden !important;
  color: #fff !important;
  padding: 30px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, .26), transparent 30%),
    linear-gradient(135deg, var(--dx-standard-blue), #0d2350) !important;
  box-shadow: var(--dx-standard-shadow) !important;
}

.dx-training-module .dx-hero-brand-mark {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  z-index: 1 !important;
  width: 54px !important;
  height: 54px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .18) !important;
  pointer-events: none !important;
}

.dx-training-module .dx-hero-brand-mark img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
}

.dx-training-module .hero > :not(.dx-hero-brand-mark) {
  position: relative !important;
  z-index: 2 !important;
}

.dx-training-module .hero h1 {
  max-width: min(1100px, calc(100% - 88px)) !important;
  margin: 0 0 12px !important;
  color: #fff !important;
  font-size: clamp(1.95rem, 4vw, 3.35rem) !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
}

.dx-training-module .hero p,
.dx-training-module .hero .lead {
  max-width: 930px !important;
  color: #e8edff !important;
  font-size: 1rem !important;
}

.dx-training-module .tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  max-width: calc(100% - 78px) !important;
}

.dx-training-module .tag,
.dx-training-module .dx-tag {
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .14) !important;
  padding: 4px 9px !important;
  color: #fff !important;
  font-size: .76rem !important;
  font-weight: 850 !important;
  letter-spacing: .02em !important;
}

.dx-training-module .hero-grid,
.dx-training-module .dx-hero-meta {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 22px !important;
  align-items: stretch !important;
}

.dx-training-module .hero-stat,
.dx-training-module .dx-hero-stat {
  min-width: 0 !important;
  padding: 12px 14px !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .12) !important;
}

.dx-training-module .hero-stat .k,
.dx-training-module .dx-hero-stat .k {
  color: rgba(255, 255, 255, .72) !important;
  font-size: .76rem !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 850 !important;
}

.dx-training-module .hero-stat .v,
.dx-training-module .dx-hero-stat .v {
  margin-top: 4px !important;
  font-family: var(--dx-standard-mono) !important;
  font-weight: 850 !important;
  overflow-wrap: anywhere !important;
}

.dx-training-module .section {
  margin-top: 42px !important;
  padding: 8px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dx-training-module .section .section {
  margin-top: 36px !important;
  padding-top: 14px !important;
  border-top: 0 !important;
}

.dx-training-module .section .section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.dx-training-module .section-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 16px !important;
  padding: 6px 12px !important;
  color: var(--dx-standard-blue) !important;
  background: var(--dx-standard-blue-soft) !important;
  border: 1px solid #dce4ff !important;
  border-radius: 999px !important;
  font-family: var(--dx-standard-sans) !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.dx-training-module .lab {
  padding: 24px !important;
  border: 1px solid #dce4ff !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #fafbff 0%, #eef2ff 100%) !important;
  box-shadow: var(--dx-standard-shadow-soft) !important;
}

.dx-training-module .lab-head,
.dx-training-module .dx-lab-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  align-items: start !important;
  gap: 16px !important;
}

.dx-training-module .lab-title {
  min-width: 0 !important;
}

.dx-training-module .dx-lab-badges {
  min-width: 176px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-self: end !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
}

.dx-training-module .pill,
.dx-training-module .dx-lab-badge {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 7px 12px !important;
  border: 1px solid var(--dx-standard-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--dx-standard-ink) !important;
  font-size: .8rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.dx-training-module .dx-lab-badges .pill,
.dx-training-module .dx-lab-badges .dx-lab-badge {
  width: 100% !important;
}

.dx-training-module .pill.blue,
.dx-training-module .dx-lab-badge.blue {
  color: var(--dx-standard-blue) !important;
  border-color: #dce4ff !important;
  background: #fff !important;
}

.dx-training-module .pill.green,
.dx-training-module .dx-lab-badge.green {
  color: #087b55 !important;
  border-color: #bdebd9 !important;
  background: var(--dx-standard-green-soft) !important;
}

.dx-training-module .dx-case-section {
  padding-top: 14px !important;
}

.dx-training-module .dx-case-shell {
  padding: 24px !important;
  border: 1px solid #dce4ff !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #fbfcff 0%, #f5f7ff 100%) !important;
  box-shadow: var(--dx-standard-shadow-soft) !important;
}

.dx-training-module .dx-case-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 260px) !important;
  align-items: start !important;
  gap: 18px !important;
  margin-bottom: 12px !important;
}

.dx-training-module .dx-case-title {
  min-width: 0 !important;
}

.dx-training-module .dx-case-title h1,
.dx-training-module .dx-case-title h2 {
  max-width: 980px !important;
  margin: 14px 0 10px !important;
  font-size: clamp(1.95rem, 3.8vw, 3.35rem) !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
}

.dx-training-module .dx-case-title .lead,
.dx-training-module .dx-case-title p {
  max-width: 1060px !important;
  margin-bottom: 0 !important;
  color: var(--dx-standard-mid) !important;
  font-size: 1rem !important;
}

.dx-training-module .dx-case-title-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.dx-training-module .dx-case-meta {
  min-width: 0 !important;
  display: grid !important;
  gap: 10px !important;
}

.dx-training-module .dx-case-meta-card {
  min-height: 50px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 8px 12px !important;
  border: 1px solid #dce4ff !important;
  border-radius: 999px !important;
  color: var(--dx-standard-blue) !important;
  background: #fff !important;
  text-align: center !important;
  text-decoration: none !important;
}

.dx-training-module .dx-case-meta-card.green {
  color: #087b55 !important;
  border-color: #bdebd9 !important;
  background: var(--dx-standard-green-soft) !important;
}

.dx-training-module .dx-case-open {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 10px 15px !important;
  color: #fff !important;
  border: 1px solid var(--dx-standard-blue) !important;
  border-radius: 999px !important;
  background: var(--dx-standard-blue) !important;
  box-shadow: 0 10px 24px rgba(15, 45, 212, .18) !important;
  font-size: .9rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.dx-training-module .dx-case-open::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  display: inline-block !important;
  border-top: 2px solid currentColor !important;
  border-right: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
}

.dx-training-module .dx-case-open:hover,
.dx-training-module .dx-case-open:focus-visible {
  color: #fff !important;
  background: #0b25bd !important;
  outline: none !important;
  transform: translateY(-1px);
}

.dx-training-module .dx-case-meta-card span {
  color: inherit !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.dx-training-module .dx-case-meta-card strong {
  color: inherit !important;
  font-size: 1.02rem !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

.dx-training-module .dx-case-branches {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
  align-items: stretch !important;
}

.dx-training-module .branch-card {
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 16px !important;
  border: 1px solid var(--dx-standard-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(13, 35, 80, .05) !important;
}

.dx-training-module .branch-card .small {
  margin: 0 !important;
  color: var(--dx-standard-muted) !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.dx-training-module .branch-card .branch,
.dx-training-module .branch-card .branch-name {
  color: var(--dx-standard-navy) !important;
  font-family: var(--dx-standard-mono) !important;
  font-size: 1.08rem !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

.dx-training-module .dx-branch-copy {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  color: var(--dx-standard-blue) !important;
  border: 1px solid #dce4ff !important;
  border-radius: 999px !important;
  background: var(--dx-standard-blue-soft) !important;
  font: inherit !important;
  font-size: .8rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.dx-training-module .dx-branch-copy::before {
  content: "" !important;
  width: 12px !important;
  height: 12px !important;
  display: inline-block !important;
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
  box-shadow: 4px -4px 0 -1px var(--dx-standard-blue-soft), 4px -4px 0 1px currentColor !important;
}

.dx-training-module .dx-branch-copy:hover,
.dx-training-module .dx-branch-copy:focus-visible {
  color: #fff !important;
  border-color: var(--dx-standard-blue) !important;
  background: var(--dx-standard-blue) !important;
  outline: none !important;
}

.dx-training-module .dx-branch-copy:hover::before,
.dx-training-module .dx-branch-copy:focus-visible::before {
  box-shadow: 4px -4px 0 -1px var(--dx-standard-blue), 4px -4px 0 1px currentColor !important;
}

.dx-training-module .branch-card p {
  margin: 0 !important;
  color: var(--dx-standard-mid) !important;
}

/* Branch renk kodu: start = sarı, complete = yeşil (training-module.js bu class'ları üretir) */
.dx-training-module .branch-card.start {
  background: #fff8e9 !important;
  border-color: #ffe0a3 !important;
}

.dx-training-module .branch-card.start .small {
  color: #a8741a !important;
}

.dx-training-module .branch-card.complete {
  background: #ecfff7 !important;
  border-color: #bdebd9 !important;
}

.dx-training-module .branch-card.complete .small {
  color: #0e7c5a !important;
}

.dx-training-module .branch-card.complete .branch {
  color: #0e7c5a !important;
}

.dx-training-module .dx-case-checkpoint {
  margin-top: 18px !important;
}

.dx-training-module .dx-case-checkpoint p {
  margin: 0 !important;
}

.dx-training-module h2 {
  margin: 10px 0 16px !important;
  color: var(--dx-standard-ink) !important;
  font-size: clamp(1.78rem, 3.25vw, 2.72rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

.dx-training-module h3 {
  color: var(--dx-standard-ink) !important;
  letter-spacing: 0 !important;
}

.dx-training-module .dx-topic-heading {
  margin: 46px 0 16px !important;
}

.dx-training-module .dx-topic-heading .section-label {
  margin-bottom: 12px !important;
}

.dx-training-module .dx-topic-heading h2 {
  margin-top: 0 !important;
}

.dx-training-module .lead,
.dx-training-module .section > p {
  color: var(--dx-standard-mid) !important;
  font-size: 1.08rem !important;
}

.dx-training-module .cards,
.dx-training-module .grid-2,
.dx-training-module .grid-3,
.dx-training-module .grid-4,
.dx-training-module .flow,
.dx-training-module .branch-grid,
.dx-training-module .compare,
.dx-training-module .status-grid {
  align-items: stretch !important;
}

.dx-training-module .hero-grid > *,
.dx-training-module .dx-hero-meta > * {
  min-width: 0 !important;
  height: 100% !important;
}

.dx-training-module .cards > *,
.dx-training-module .grid-2 > *,
.dx-training-module .grid-3 > *,
.dx-training-module .grid-4 > *,
.dx-training-module .flow > *,
.dx-training-module .branch-grid > *,
.dx-training-module .compare > *,
.dx-training-module .status-grid > * {
  min-width: 0 !important;
  height: auto !important;
  align-self: stretch !important;
}

.dx-training-module .card {
  min-width: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid var(--dx-standard-line) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  background: #fff !important;
  box-shadow: var(--dx-standard-shadow-soft) !important;
}

.dx-training-module .card.blue {
  background: var(--dx-standard-blue-soft) !important;
  border-color: #dce4ff !important;
}

.dx-training-module .card.green {
  background: var(--dx-standard-green-soft) !important;
  border-color: #ccefe1 !important;
}

.dx-training-module .card.amber,
.dx-training-module .callout.warn {
  background: var(--dx-standard-warm-soft) !important;
  border-color: #f2dfb4 !important;
}

.dx-training-module .flow,
.dx-training-module .flow.four,
.dx-training-module .flow.five,
.dx-training-module .flow.six,
.dx-training-module .dx-timeline-flow {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
  margin: 20px 0 !important;
}

.dx-training-module .flow-step {
  position: relative !important;
  min-width: 0 !important;
  min-height: 118px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 15px !important;
  border: 1px solid var(--dx-standard-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: var(--dx-standard-shadow-soft) !important;
}

.dx-training-module .flow-step .no {
  width: max-content !important;
  max-width: 100% !important;
  min-width: 34px !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 4px !important;
  padding: 0 10px !important;
  color: #fff !important;
  background: var(--dx-standard-blue) !important;
  border-radius: 10px !important;
  font-family: var(--dx-standard-mono) !important;
  font-size: .8rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.dx-training-module .flow-step .title {
  margin: 0 !important;
  color: var(--dx-standard-ink) !important;
  font-size: .98rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.dx-training-module .flow-step .desc {
  margin: 0 !important;
  color: var(--dx-standard-mid) !important;
  font-size: .88rem !important;
  line-height: 1.42 !important;
}

.dx-training-module .flow-step .desc p,
.dx-training-module .flow-step .desc ul,
.dx-training-module .flow-step .desc ol {
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.dx-training-module .flow-step .desc p + p,
.dx-training-module .flow-step .desc ul + p,
.dx-training-module .flow-step .desc p + ul {
  margin-top: 6px !important;
}

.dx-training-module .dx-section-takeaway .takeaway-list,
.dx-training-module .dx-section-takeaway .dx-takeaway-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  align-items: stretch !important;
  margin-top: 14px !important;
}

.dx-training-module .dx-section-takeaway .takeaway-item,
.dx-training-module .dx-section-takeaway .dx-takeaway-card {
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  padding: 14px !important;
  border: 1px solid var(--dx-standard-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: var(--dx-standard-shadow-soft) !important;
}

.dx-training-module .dx-section-takeaway .num {
  width: 32px !important;
  height: 32px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: var(--dx-standard-blue) !important;
  font-family: var(--dx-standard-mono) !important;
  font-size: .9rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.dx-training-module .dx-section-takeaway .dx-takeaway-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.dx-training-module .dx-section-takeaway h4,
.dx-training-module .dx-section-takeaway strong {
  display: block !important;
  margin: 0 !important;
  color: var(--dx-standard-ink) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.dx-training-module .dx-section-takeaway p,
.dx-training-module .dx-section-takeaway .muted,
.dx-training-module .dx-section-takeaway .dx-takeaway-copy > span {
  margin: 0 !important;
  color: var(--dx-standard-mid) !important;
  font-size: .96rem !important;
  line-height: 1.42 !important;
}

.dx-training-module .dx-section-takeaway br {
  display: none !important;
}

.dx-training-module .dx-section-quiz .dx-quiz-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  align-items: stretch !important;
  margin-top: 14px !important;
}

.dx-training-module .dx-section-quiz .dx-quiz-card {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--dx-standard-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: var(--dx-standard-shadow-soft) !important;
}

.dx-training-module .dx-section-quiz .dx-quiz-card[open] {
  border-color: #cdd9ff !important;
  background: #fbfcff !important;
}

.dx-training-module .dx-section-quiz .dx-quiz-question {
  min-width: 0 !important;
  min-height: 56px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 24px !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  color: var(--dx-standard-ink) !important;
  cursor: pointer !important;
  font-size: .98rem !important;
  font-weight: 900 !important;
  line-height: 1.28 !important;
  list-style: none !important;
  overflow-wrap: anywhere !important;
}

.dx-training-module .dx-section-quiz .dx-quiz-question::-webkit-details-marker {
  display: none !important;
}

.dx-training-module .dx-section-quiz .dx-quiz-badge {
  width: 34px !important;
  height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: var(--dx-standard-blue) !important;
  font-family: var(--dx-standard-mono) !important;
  font-size: .78rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.dx-training-module .dx-section-quiz .dx-quiz-chevron {
  width: 24px !important;
  height: 24px !important;
  display: inline-grid !important;
  place-items: center !important;
  justify-self: end !important;
  border: 1px solid #dce4ff !important;
  border-radius: 999px !important;
  color: var(--dx-standard-blue) !important;
  background: #f3f6ff !important;
  font-family: var(--dx-standard-mono) !important;
  font-size: .9rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  transition: transform .16s ease, background .16s ease !important;
}

.dx-training-module .dx-section-quiz .dx-quiz-card[open] .dx-quiz-chevron {
  transform: rotate(45deg) !important;
  background: #e9efff !important;
}

.dx-training-module .dx-section-quiz .dx-quiz-answer {
  margin: 0 !important;
  padding: 0 14px 14px 62px !important;
  color: var(--dx-standard-mid) !important;
  font-size: .96rem !important;
  line-height: 1.45 !important;
}

.dx-training-module .dx-section-quiz .dx-quiz-answer + .dx-quiz-answer {
  padding-top: 0 !important;
}

.dx-training-module .dx-module-goal {
  margin-top: 24px !important;
}

.dx-training-module .dx-module-goal h2 {
  margin-bottom: 10px !important;
}

.dx-training-module .dx-module-goal .lead {
  max-width: 1080px !important;
}

.dx-training-module .dx-goal-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  margin-top: 16px !important;
}

.dx-training-module .dx-goal-card {
  position: relative !important;
  gap: 8px !important;
  padding: 16px !important;
}

.dx-training-module .dx-goal-card h3 {
  margin: 0 !important;
  padding-right: 48px !important;
  color: var(--dx-standard-ink) !important;
  font-size: 1.02rem !important;
  line-height: 1.25 !important;
}

.dx-training-module .dx-goal-card p {
  margin: 0 !important;
}

.dx-training-module .dx-goal-index {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  min-width: 34px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
  border: 1px solid #dce4ff !important;
  border-radius: 11px !important;
  color: var(--dx-standard-blue) !important;
  background: #fff !important;
  font-family: var(--dx-standard-mono) !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.dx-training-module .dx-section-glossary .cards,
.dx-training-module .dx-section-glossary .grid-2,
.dx-training-module .dx-section-glossary .grid-3,
.dx-training-module .dx-section-glossary .grid-4 {
  align-items: stretch !important;
  gap: 16px !important;
}

.dx-training-module .dx-section-glossary .cards > *,
.dx-training-module .dx-section-glossary .grid-2 > *,
.dx-training-module .dx-section-glossary .grid-3 > *,
.dx-training-module .dx-section-glossary .grid-4 > * {
  align-self: stretch !important;
}

.dx-training-module .dx-section-glossary .dx-glossary-card {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 24px 26px !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(13, 35, 80, .055) !important;
}

.dx-training-module .dx-section-glossary .dx-glossary-card h4 {
  margin: 0 !important;
  padding-right: 88px !important;
  color: var(--dx-standard-ink) !important;
  font-size: 1.08rem !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

.dx-training-module .dx-section-glossary .dx-glossary-card p {
  margin: 0 !important;
  color: var(--dx-standard-mid) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

.dx-training-module .dx-section-glossary .dx-glossary-card p + p,
.dx-training-module .dx-section-glossary .dx-glossary-card ul,
.dx-training-module .dx-section-glossary .dx-glossary-card ol {
  margin-top: 4px !important;
}

.dx-training-module .dx-section-glossary .dx-glossary-card strong,
.dx-training-module .dx-section-glossary .dx-glossary-card .term {
  color: var(--dx-standard-ink) !important;
  font-weight: 900 !important;
}

.dx-training-module .dx-section-glossary .dx-glossary-index,
.dx-training-module .dx-section-glossary .dx-glossary-card .icon-dot {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: auto !important;
  min-width: 38px !important;
  max-width: calc(100% - 36px) !important;
  height: auto !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 9px !important;
  border: 1px solid #dce4ff !important;
  border-radius: 12px !important;
  color: var(--dx-standard-blue) !important;
  background: linear-gradient(135deg, #eef3ff 0%, #f8fbff 100%) !important;
  box-shadow: 0 8px 18px rgba(29, 57, 219, .08) !important;
  font-family: var(--dx-standard-mono) !important;
  font-size: clamp(.68rem, .9vw, .78rem) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dx-training-module .timeline {
  display: grid !important;
  gap: 14px !important;
  margin: 20px 0 !important;
}

.dx-training-module .timeline-row {
  display: grid !important;
  grid-template-columns: minmax(132px, max-content) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.dx-training-module .timeline-time {
  min-width: 132px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  padding: 12px 16px !important;
  color: var(--dx-standard-blue) !important;
  background: var(--dx-standard-blue-soft) !important;
  border: 1px solid #dce4ff !important;
  border-radius: 14px !important;
  font-family: var(--dx-standard-mono) !important;
  font-size: .95rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.dx-training-module .callout {
  margin: 20px 0 !important;
  border-left: 5px solid var(--dx-standard-blue) !important;
  border-radius: 16px !important;
  background: #f7f8ff !important;
  padding: 16px 18px !important;
  color: var(--dx-standard-mid) !important;
}

.dx-training-module .callout.green,
.dx-training-module .callout.success {
  border-left-color: #087b55 !important;
  background: #f3fff9 !important;
}

.dx-training-module pre {
  max-width: 100% !important;
  overflow-x: auto !important;
}

.dx-training-module pre code,
.dx-training-module .code-wrap code {
  overflow-wrap: normal !important;
}

.dx-training-module code {
  font-family: var(--dx-standard-mono) !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 920px) {
  html[data-training-standard="true"],
  html[data-training-standard="true"] body.dx-training-module {
    height: auto !important;
    overflow-y: visible !important;
  }

  .dx-training-module .app {
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }

  .dx-training-module .sidebar {
    position: relative !important;
    height: auto !important;
  }

  .dx-training-module .toolbar {
    position: relative !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    padding: 16px 20px !important;
  }

  .dx-training-module .toolbar-actions {
    justify-content: flex-start !important;
  }

  .dx-training-module .content {
    padding: 20px 14px 38px !important;
  }

  .dx-training-module .hero {
    padding: 22px 18px !important;
  }

  .dx-training-module .dx-hero-brand-mark {
    top: 16px !important;
    right: 16px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
  }

  .dx-training-module .dx-hero-brand-mark img {
    width: 29px !important;
    height: 29px !important;
  }

  .dx-training-module .hero h1 {
    max-width: 100% !important;
  }

  .dx-training-module .tags {
    max-width: calc(100% - 62px) !important;
  }

  .dx-training-module .section {
    padding: 8px 0 0 !important;
  }

  .dx-training-module .section .section {
    padding-top: 16px !important;
  }

  .dx-training-module .branch-card {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .dx-training-module .dx-branch-copy {
    width: 100% !important;
  }

  .dx-training-module .lab {
    padding: 18px !important;
  }

  .dx-training-module .dx-case-shell {
    padding: 18px !important;
  }

  .dx-training-module .lab-head,
  .dx-training-module .dx-lab-head,
  .dx-training-module .dx-case-head {
    grid-template-columns: 1fr !important;
  }

  .dx-training-module .dx-case-meta,
  .dx-training-module .dx-case-branches {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .dx-training-module .dx-case-title-actions,
  .dx-training-module .dx-case-open {
    width: 100% !important;
  }

  .dx-training-module .dx-case-title h1,
  .dx-training-module .dx-case-title h2 {
    font-size: clamp(1.8rem, 8vw, 2.65rem) !important;
  }

  .dx-training-module .dx-lab-badges {
    min-width: 0 !important;
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-self: stretch !important;
  }

  .dx-training-module .dx-lab-badges .pill,
  .dx-training-module .dx-lab-badges .dx-lab-badge {
    width: auto !important;
  }

  .dx-training-module .dx-section-glossary .dx-glossary-card {
    min-height: 0 !important;
  }

  .dx-training-module .timeline-row {
    grid-template-columns: 1fr !important;
  }

  .dx-training-module .timeline-time {
    min-width: 0 !important;
    width: max-content !important;
    max-width: 100% !important;
    align-self: start !important;
  }

  .dx-training-module .grid-4,
  .dx-training-module .grid-3,
  .dx-training-module .grid-2,
  .dx-training-module .dx-goal-grid,
  .dx-training-module .dx-section-takeaway .dx-takeaway-grid,
  .dx-training-module .dx-section-quiz .dx-quiz-list,
  .dx-training-module .flow,
  .dx-training-module .branch-grid,
  .dx-training-module .compare,
  .dx-training-module .status-grid {
    grid-template-columns: 1fr !important;
  }

  .dx-training-module .hero-grid,
  .dx-training-module .dx-hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}