.diagnoses.diagnoses-m1021 {
  .diagnoses-main {
    .title {
      margin-inline: auto;
      color: var(--color-text-primary);
      font-size: var(--font-size-sm);
      font-weight: var(--weight-bold);
      line-height: var(--line-height-text-sm);
    }

    .cards {
      margin-inline: auto;
      margin-top: var(--spacing-4xl);
      display: flex;
      flex-direction: row;
      gap: var(--spacing-xl);
    }

    .card {
      position: relative;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--color-fg-progress-primary);
      border-radius: var(--border-radius-md);
      width: 284px;
      /* width: 402px; */
      height: 548px;

      &.recommended {
        border-color: var(--color-fg-success-primary);
      }

      &.selected {
        border-color: var(--color-border-selected);
        border-width: 3px;
      }

      .selected-indicator {
        position: absolute;
        top: -12px;
        right: -12px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: var(--color-fg-brand-secondary);
        display: flex;
        align-items: center;
        justify-content: center;

        i {
          color: white;
          font-size: var(--font-size-xs);
        }
      }

      .card-main {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
        padding: var(--spacing-2xl);

        .card-pills {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;

          .card-pills-left {
            display: flex;
            flex-direction: row;
            gap: var(--spacing-sm);
          }

          .card-pills-right {

          }

          .card-pill {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--border-radius-xs);
            padding: var(--spacing-xxs) var(--spacing-sm);
            gap: var(--spacing-xs);
          }

          .card-pill-icd-10 {
            min-width: 49px;
            min-height: 24px;
            font-size: var(--font-size-sm);
            color: var(--color-text-primary);
            font-weight: var(--weight-medium);
            background-color: var(--color-bg-tertiary);
            box-shadow:
              0px 1px 2px -1px #0F172A1A,
              0px 1px 3px 0px #0F172A14;
          }

          .card-pill-type {
            font-size: var(--font-size-xs);
            color: var(--color-text-secondary);
            background-color: var(--color-bg-primary);
            border: 1px solid var(--color-border-secondary);
          }

          .card-pill-recommended {
            padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-lg);
            border-radius: var(--border-radius-2xl);
            font-size: var(--font-size-xxs);
            font-weight: var(--weight-semi-bold);
            color: var(--color-text-primary_on-brand);
            background-color: var(--color-fg-success-primary);
            gap: var(--spacing-md);

            i {
              font-size: var(--font-size-xxs);
            }
          }
        }

        .card-description {
          font-size: var(--font-size-lg);
          line-height: 140%;
          color: var(--color-text-primary);
        }

        .card-warning {
          font-size: var(--font-size-xs);
        }

        .card-metadata {
          display: flex;
          flex-direction: column;
          gap: var(--spacing-xs);

          .card-metadata-header {
            font-size: var(--font-size-xxs);
            color: var(--color-text-quaternary);
            font-weight: var(--weight-medium);
          }

          .card-metadata-value {
            font-size: var(--font-size-xs);
            color: var(--color-text-primary);
            font-weight: var(--weight-light);
            font-style: italic;
          }
        }
      }

      .card-actions {
        padding: 0 var(--spacing-2xl) var(--spacing-2xl) var(--spacing-2xl);
        display: flex;
        flex-direction: row;
        gap: var(--spacing-2xl);
        justify-content: flex-end;
      }

      .card-footer {
        border-top: 1px solid var(--color-border-secondary);
        border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
        background-color: var(--color-bg-secondary);
        padding: var(--spacing-lg) var(--spacing-2xl) var(--spacing-2xl) var(--spacing-2xl);
        flex: 1;
        overflow-y: auto;

        .card-footer-title {
          font-size: var(--font-size-xs);
          color: var(--color-text-primary);
          font-weight: var(--weight-medium);
          line-height: var(--line-height-text-xs);
        }

        .card-footer-content {
          margin-top: var(--spacing-sm);
          font-size: var(--font-size-xs);
          color: var(--color-text-primary);
          font-weight: var(--weight-light);
          line-height: var(--line-height-text-xs);
        }
      }
    }
  }

  .diagnoses-document {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-bottom: solid 1px var(--color-border-secondary);
    background-color: var(--color-bg-primary);
    position: relative;

    &.hidden {
      display: none;
    }

    .composite-document-marking {
      flex: 1;
      height: 100%;
      overflow: hidden;
    }
  }
}