.sa-introbox {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 24px;
  margin: 0;
  gap: 12px;
  background: none;

  ul {
    i.fa-check {
      color: var(--sa-green-400);
    }
  }

  ol {
    ::marker {
      font-weight: 600;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .sa-introbox-heading {
    margin: 0;
    font-family: "chevinpro-demibold", "Open Sans", sans-serif;
    font-size: 24px;
    font-weight: 400;
  }

  p {
    margin-bottom: 0;
  }

  .sa-introbox-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 100px;
    padding: 8px;
    width: 40px;
    height: 40px;
    /* margin-right: auto; */

    /* div {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: white;
      border-radius: 100px;
      padding: 8px;
    } */

    i {
      font-size: 22px;
    }
  }

  .sa-introbox-text {
    display: flex;
    flex-direction: column;
    gap: 12px;

    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    font-family: "proxima_nova_rgregular", "Open Sans", sans-serif;

    ul,
    ol {
      margin: 0;
    }

    ul {
      padding-left: 20px;
    }

    ol {
      padding-left: 24px;
    }

    ul.fa-ul,
    ol.fa-ul {
      padding-left: 30px;
    }
  }

  .meta-info-box {
    padding: 16px;
    margin-top: 12px;
    border-radius: var(--corner-radius-sm, 16px);
    background: var(--surfaces-surf-color-1, #fef6f2);

    .meta-info-row {
      margin-top: 4px;
    }

    .meta-info-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;

      .text {
        font-family: "proxima_nova_rgregular", "Open Sans", sans-serif;
        color: var(--text-text-main, #000b3c);
        font-size: var(--font-size-p-md, 16px);
        font-style: normal;
        font-weight: 400;
        line-height: 150%;

        &.bold {
          font-weight: 600;
        }
        &.italic {
          font-style: italic;
        }
      }

      .dot {
        width: 4px;
        height: 4px;
        background-color: var(--sa-neutral-75, #dcdee5);
        border-radius: 100px;
      }
    }
  }

  .color-coded-items {
    .color-coded-item {
      .color-coded-item-circle {
        border-radius: 100px;
      }

      .primary-orange {
        .color-coded-item-circle {
          background-color: var(--sa-primary);
        }
      }

      .orange-300 {
        .color-coded-item-circle {
          background-color: var(--sa-primary-300);
        }
      }

      .orange-200 {
        .color-coded-item-circle {
          background-color: var(--sa-primary-200);
        }
      }

      .orange-100 {
        .color-coded-item-circle {
          background-color: var(--sa-primary-100);
        }
      }

      .orange-50 {
        .color-coded-item-circle {
          background-color: var(--sa-primary-50);
        }
      }

      .orange-25 {
        .color-coded-item-circle {
          background-color: var(--sa-primary-25);
        }
      }

      .neutral-300 {
        .color-coded-item-circle {
          background-color: var(--sa-neutral-300);
        }
      }

      .neutral-200 {
        .color-coded-item-circle {
          background-color: var(--sa-neutral-200);
        }
      }

      .neutral-100 {
        .color-coded-item-circle {
          background-color: var(--sa-neutral-100);
        }
      }

      .neutral-50 {
        .color-coded-item-circle {
          background-color: var(--sa-neutral-50);
        }
      }

      .neutral-25 {
        .color-coded-item-circle {
          background-color: var(--sa-neutral-25);
        }
      }

      .yellow-400 {
        .color-coded-item-circle {
          background-color: var(--sa-yellow-400);
        }
      }

      .yellow-200 {
        .color-coded-item-circle {
          background-color: var(--sa-yellow-200);
        }
      }

      .yellow-100 {
        .color-coded-item-circle {
          background-color: var(--sa-yellow-100);
        }
      }

      .purple-400 {
        .color-coded-item-circle {
          background-color: var(--sa-purple-400);
        }
      }

      .purple-200 {
        .color-coded-item-circle {
          background-color: var(--sa-purple-200);
        }
      }

      .purple-100 {
        .color-coded-item-circle {
          background-color: var(--sa-purple-100);
        }
      }

      .green-400 {
        .color-coded-item-circle {
          background-color: var(--sa-green-400);
        }
      }

      .green-200 {
        .color-coded-item-circle {
          background-color: var(--sa-green-200);
        }
      }

      .green-100 {
        .color-coded-item-circle {
          background-color: var(--sa-green-100);
        }
      }

      .white {
        .color-coded-item-circle {
          background-color: var(--sa-white);
        }
      }

      .black {
        .color-coded-item-circle {
          background-color: var(--sa-black);
        }
      }

      .pink {
        .color-coded-item-circle {
          background-color: #ff8bc9;
        }
      }
    }
  }

  &.purple {
    background-color: var(--sa-purple-200);
    border: 1px solid var(--sa-purple-400);

    ul {
      ::marker {
        color: var(--sa-purple-400);
      }

      i.fa-check {
        color: var(--sa-purple-400);
      }
    }
  }

  &.pink {
    background-color: var(--sa-pink-200);
    border: 1px solid var(--sa-pink-400);

    ul {
      ::marker {
        color: var(--sa-pink-400);
      }

      /* i.fa-check {
        color: var(--sa-primary);
      } */
    }
  }

  &.green {
    background-color: var(--sa-green-200);
    border: 1px solid var(--sa-green-400);

    ul {
      ::marker {
        color: var(--sa-green-400);
      }
    }
  }

  &.orange {
    background-color: var(--sa-primary-200);
    border: 1px solid var(--sa-primary);

    ul {
      ::marker {
        color: var(--sa-primary);
      }

      i.fa-check {
        color: var(--sa-primary);
      }
    }
  }

  &.white {
    background-color: var(--sa-white);
    box-shadow: 0px 10px 20px 0px rgba(0, 11, 60, 0.15);

    &.purple-accent {
      .sa-introbox-icon {
        background-color: var(--sa-purple-200);
      }

      ul {
        ::marker {
          color: var(--sa-purple-400);
        }

        i.fa-check {
          color: var(--sa-purple-400);
        }
      }
    }

    &.orange-accent {
      .sa-introbox-icon {
        background-color: var(--sa-primary-200);
      }

      ul {
        ::marker {
          color: var(--sa-primary);
        }
      }
    }
  }

  &.green-accent {
    .sa-introbox-icon {
      background-color: var(--sa-green-200);
    }

    ul {
      ::marker {
        color: var(--sa-green-400);
      }
    }
  }

  &.pink-accent {
    .sa-introbox-icon {
      background-color: var(--sa-pink-200);
    }

    ul {
      ::marker {
        color: var(--sa-pink-400);
      }
    }
  }
}