.topic-card {
    padding: 24px !important;
    pointer-events: none !important;
    cursor: default !important;
    border-radius: 8px !important;
    box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.10) !important;
}

.topic-card>.sd-card-body {
    padding: 0 !important;
}

.topic-card .header-container>.sd-card-text>[class^="svg"] {
    background: var(--Qualcomm-Color-Styles-Dark-Blue) !important;
}

.topic-card .body-container .sd-card-text:has(a):has(svg) {
    display: flex !important;
    align-items: center !important;
    padding: 12px 8px !important;
    border-bottom: 1px solid var(--color-border-neutral-01) !important;
}

.topic-card .body-container .sd-card-text>a {
    width: 100% !important;
    margin: 0 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    align-self: stretch !important;
    font-family: "Roboto Flex" !important;
    font-style: normal !important;
    color: var(--color-interactive-text-link-default-idle) !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

.topic-card .body-container .sd-card-text svg,
.topic-card .sub-header .sd-card-text:first-child>[class^="svg"]>svg,
.topic-card .sub-header .sd-card-text:first-child>img {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    max-width: none !important;
}

.topic-card .header-container {
    display: flex !important;
    padding-bottom: 16px !important;
    height: auto !important;
    gap: 24px !important;
}

.topic-card .sub-header {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

.topic-card .header-container>.sd-card-text>img,
.topic-card .header-container>.sd-card-text>[class^="svg"] {
    display: flex !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 4px !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
}

.topic-card .sub-header>.sd-card-text:first-child {
    display: flex !important;
    align-items: center !important;
    color: var(--color-text-neutral-secondary) !important;
    margin-right: 0 !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    text-transform: uppercase !important;
    font-family: "Roboto Mono" !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

.topic-card.card-bg-fill .sub-header .sd-card-text:last-child {
    color: var(--color-front) !important;
    font-size: 17px !important;
    font-weight: 520 !important;
}

.topic-card .body-container .sd-card-text:has(.link-button, .ref-button) {
    justify-content: center !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    border-radius: 4px !important;
    border: none !important;
    background: var(--color-interactive-background-ghost-idle) !important;
}

.topic-card .body-container>.sd-card-text,
.topic-card .body-container .sd-card-text>.link-button,
.topic-card .body-container .sd-card-text>.ref-button {
    margin: 0 !important;
}

.topic-card .body-container>.sub-header>.sd-card-text {
    padding: 0 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.topic-card.card-bg-fill .header-container .sd-card-text {
    padding-bottom: 0 !important;
}

.topic-card .body-container .sd-card-text:not(:has(.ref-button, .link-button)):has(a) svg path,
.topic-card.card-bg-fill .body-container>.sd-card-text svg path {
    stroke: var(--color-interactive-icon-link-default-idle) !important;
}

.topic-card.card-bg-fill {
    background: var(--color-card-bg) !important;
}

.topic-card:not(.card-bg-fill) {
    border: 1px solid var(--color-border-neutral-01) !important;
    background: var(--color-surface-raised) !important;
}

.topic-card .sub-header>.sd-card-text:first-child svg path {
    stroke: var(--color-icon-neutral-secondary) !important;
}

.topic-card .body-container>.sd-card-text:last-child {
    margin-bottom: 0 !important;
}

.topic-card .body-container>.sd-card-text:last-child:not(:has(.ref-button, .link-button)) {
    margin-bottom: 16px !important;
}

.topic-card .sub-header>.sd-card-text:last-child {
    font-family: "Roboto Flex" !important;
    font-size: 17px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: var(--color-text-neutral-primary) !important;
    padding-top: 8px !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-wrap: anywhere !important;
}

.topic-card .sd-card-text:has(a):has(svg):not(:has(.link-button, .ref-button)):hover {
    background: var(--color-interactive-background-ghost-hover) !important;
}

.topic-card .sd-card-text:has(a),
.topic-card a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.topic-card .sub-header .sd-card-text:first-child>[class^=svg] {
    align-items: start !important;
}

.topic-card .header-container>.sd-card-text svg {
    width: 32px !important;
    height: 32px !important;
    max-width: none !important;
}

.topic-card .sub-header.no-sub-title>.sd-card-text:first-child {
    text-transform: none !important;
    padding-top: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-wrap: anywhere !important;
}

.topic-card .body-container .sd-card-text:hover>a,
.topic-card .body-container .sd-card-text>a:hover {
    color: var(--color-interactive-text-link-default-hover) !important;
    text-decoration: underline solid !important;
    text-decoration-skip-ink: auto !important;
    text-decoration-thickness: auto !important;
    text-underline-offset: auto !important;
    text-underline-position: from-font !important;
}

.topic-card .body-container .sd-card-text:hover:not(:has(.ref-button, .link-button)):has(a) svg path,
.topic-card.card-bg-fill .body-container>.sd-card-text:hover svg path {
    stroke: var(--color-interactive-icon-link-default-hover) !important;
}