Customize embedded checklist UI

Checklist UI is mostly based on Bootstrap 4 using SASS, and here's the default checklist SCSS file:

Default Checklist Scss File

Below is the HTML code map of the embedded checklist UI

To customize the UI, go to the checklist page, and add customized CSS code into the Custom style input.

Custom Style Input

Be sure to add .cl-container--embed to change only the embedded checklist UI. Below is a sample custom style:

.cl-container--embed {
  .cl-inner {
    .cl-top {
      .cl-top__title {
        font-weight: bold;
      }
      .cl-top__progress {}
    }
    .cl-body {
      .cl-item {
        &.cl-item--active {}
        .cl-item__line {}
        .cl-item__title {}
        .cl-item__video {}
      }
    }
  }
}