.diagnoses {
  .new-diagnoses-sidebar-m1023 {
    width: 512px;
    min-width: 512px;
    padding: var(--spacing-3xl) var(--spacing-5xl) var(--spacing-3xl) var(--spacing-6xl);

    .cards {
      margin-top: var(--spacing-3xl);
      display: flex;
      flex-direction: column;
    }

    .card {
      padding: var(--spacing-xl) var(--spacing-3xl);
      background-color: var(--color-bg-primary);
      border-radius: var(--border-radius-md);
      border: 1px solid var(--color-border-secondary);

      .card-title {
        color: var(--color-text-primary);
        font-size: var(--font-size-lg);
        font-weight: var(--weight-semi-bold);
        line-height: var(--line-height-text-lg);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .card-info {
        color: var(--color-text-quaternary);
        font-size: var(--font-size-xs);
        font-weight: var(--weight-light);
        line-height: var(--line-height-text-xs);
        margin-top: var(--spacing-xs);
      }

      .card-main {
        margin-top: var(--spacing-xl);
        border-top: 1px solid var(--color-border-secondary);
        padding-top: var(--spacing-xl);
        font-size: var(--font-size-md);
        line-height: var(--line-height-text-md);
        font-weight: var(--weight-light);

        strong {
          font-weight: var(--weight-medium);
        }
      }

      .card-secondary {
        margin-top: var(--spacing-xl);
        border-top: 1px solid var(--color-border-secondary);
        padding-top: var(--spacing-xl);

        .card-secondary-title {
          color: var(--color-text-primary);
          font-size: var(--font-size-sm);
          font-weight: var(--weight-semi-bold);
          line-height: var(--line-height-text-sm);
        }

        .card-secondary-info {
          color: var(--color-text-secondary);
          font-size: var(--font-size-sm);
          font-weight: var(--weight-regular);
          line-height: var(--line-height-text-sm);
          margin-top: var(--spacing-md);

          strong {
            font-weight: var(--weight-medium);
          }
        }
      }
    }

    ol.codes {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-md);
      list-style: none;
      counter-reset: item;
      padding-left: 0;

      li {
        border: 1px solid var(--color-border-secondary);
        border-radius: var(--border-radius-md);
        padding: var(--spacing-xl);
        counter-increment: item;
        position: relative;
        padding-left: var(--spacing-4xl);

        &::before {
          content: counter(item) ".";
          position: absolute;
          left: 12px;
          top: 16px;
          font-weight: 600;
        }

        &.active {
          border-color: var(--color-border-highlighted);
        }

        .title {
          color: var(--color-text-secondary);
          font-size: var(--font-size-sm);
          font-weight: var(--weight-semi-bold);
          line-height: var(--line-height-text-sm);
        }

        .rationale {
          color: var(--color-text-secondary);
          font-size: var(--font-size-sm);
          line-height: var(--line-height-text-sm);
          font-style: italic;
          margin-top: var(--spacing-md);
        }
      }
    }
  }
}