.sa-overview-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 24px;
  margin: 0;
  gap: 8px;
  background: none;
  height: 100%;
  text-decoration: none;
  box-shadow: 0px 10px 20px 0px rgba(0, 11, 60, 0.15);
  transition: 0.3s all ease;
  will-change: transform;

  &:hover {
    text-decoration: none;
    transform: translateY(-3px);
  }

  @media (max-width: 768px) {
    padding: 24px;
  }

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

  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;
  }

  .highlighted-text {
    display: flex;

    p {
      font-family: "proxima_nova_semibold", "Open Sans", sans-serif;
      font-size: 14px;
      line-height: 14px;
      font-weight: 600;
      padding: 11.5px 12px;
      background-color: var(--sa-green-200);
      color: var(--sa-sub-primary);
      border-radius: 24px;
    }
  }

  .activity-marker {
    position: absolute;
    height: 37px;
    top: -22px;
    left: -16px;
    width: 35px;
  }

  .sa-overview-card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 100px;

    i {
      font-size: 22px;
    }

    &.primary-orange {
      background-color: var(--sa-primary);
    }

    &.orange-300 {
      background-color: var(--sa-primary-300);
    }

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

    &.orange-100 {
      background-color: var(--sa-primary-100);
    }

    &.orange-50 {
      background-color: var(--sa-primary-50);
    }

    &.orange-25 {
      background-color: var(--sa-primary-25);
    }

    &.neutral-300 {
      background-color: var(--sa-neutral-300);
    }

    &.neutral-200 {
      background-color: var(--sa-neutral-200);
    }

    &.neutral-100 {
      background-color: var(--sa-neutral-100);
    }

    &.neutral-50 {
      background-color: var(--sa-neutral-50);
    }

    &.neutral-25 {
      background-color: var(--sa-neutral-25);
    }

    &.yellow-400 {
      background-color: var(--sa-yellow-400);
    }

    &.yellow-200 {
      background-color: var(--sa-yellow-200);
    }

    &.yellow-100 {
      background-color: var(--sa-yellow-100);
    }

    &.purple-400 {
      background-color: var(--sa-purple-400);
    }

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

    &.purple-100 {
      background-color: var(--sa-purple-100);
    }

    &.green-400 {
      background-color: var(--sa-green-400);
    }

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

    &.green-100 {
      background-color: var(--sa-green-100);
    }

    &.white {
      background-color: #fff;
    }

    &.black {
      background-color: var(--sa-black), #000;
    }

    &.pink {
      background-color: #ff8bc9;
    }
  }

  .sa-overview-card-header-container {
    display: flex;
    justify-content: space-between;
    gap: 12px;

    .left {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .sa-overview-card-upper-right-corner {
      .sa-overview-card-upper-right-corner-item {
        i {
          font-size: 12px;
          margin-right: 6px;
        }
      }
    }
  }

  .upper-left-highlight-effect {
    position: absolute;
  }

  .color-coded-items {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;

    .color-coded-item {
      display: flex;
      gap: 6px;
      align-items: center;

      font-size: 14px;
      line-height: 20px;
      color: var(--sa-sub-primary);
      font-family: "proxima_nova_semibold", "Open Sans", sans-serif;

      .color-coded-item-circle {
        width: 12px;
        height: 12px;
        border-radius: 100px;

        &.primary-orange {
          background-color: var(--sa-primary);
        }

        &.primary-300 {
          background-color: var(--sa-primary-300);
        }

        &.primary-200 {
          background-color: var(--sa-primary-200);
        }

        &.primary-100 {
          background-color: var(--sa-primary-100);
        }

        &.primary-50 {
          background-color: var(--sa-primary-50);
        }

        &.primary-25 {
          background-color: var(--sa-primary-25);
        }

        &.neutral-300 {
          background-color: var(--sa-neutral-300);
        }

        &.neutral-200 {
          background-color: var(--sa-neutral-200);
        }

        &.neutral-100 {
          background-color: var(--sa-neutral-100);
        }

        &.neutral-50 {
          background-color: var(--sa-neutral-50);
        }

        &.neutral-25 {
          background-color: var(--sa-neutral-25);
        }

        &.yellow-400 {
          background-color: var(--sa-yellow-400);
        }

        &.yellow-200 {
          background-color: var(--sa-yellow-200);
        }

        &.yellow-100 {
          background-color: var(--sa-yellow-100);
        }

        &.purple-400 {
          background-color: var(--sa-purple-400);
        }

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

        &.purple-100 {
          background-color: var(--sa-purple-100);
        }

        &.green-400 {
          background-color: var(--sa-green-400);
        }

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

        &.green-100 {
          background-color: var(--sa-green-100);
        }

        &.white {
          background-color: #fff;
          border: 1px solid var(--sa-black);
        }

        &.black {
          background-color: var(--sa-black);
        }

        &.pink {
          background-color: #ff8bc9;
        }
      }
    }
  }

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

    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    font-family: "proxima_nova_rgregular", "Open Sans", sans-serif;
    color: var(--sa-sub-primary);
    height: 100%;

    .top-margin-auto {
      margin-top: auto;
    }

    /* @media (max-width: 768px) {
      font-size: 18px;
      line-height: 27px;
    } */

    ul,
    ol {
      margin: 0;
    }

    ul {
      padding-left: 20px;
    }

    ol {
      padding-left: 24px;
    }

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

  .overview-card-buttons {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 24px;

    @media (max-width: 768px) {
      flex-direction: column;
      gap: 0;
    }

    div.sa-button-full-width {
      width: 100%;
    }
  }

  .lower-left-corner {
    margin-top: 4px;
    color: var(--sa-sub-primary);

    &.icon-text {
      .icon-item {
        i {
          font-size: 16px;
          margin-right: 8px;
        }
      }
    }

    &.dot-text {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;

      .text {
        font-family: "proxima_nova_rgregular", "Open Sans", sans-serif;
        font-size: 14px;

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

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

  &.purple {
    background-color: #fff;

    .highlighted-text p {
      background-color: var(--sa-purple-200);
      color: var(--sa-text-main);
    }

    .activity-marker {
      fill: var(--sa-purple-400);
    }

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

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

    &.highlight {
      background-color: var(--sa-purple-200);

      .highlighted-text p {
        background-color: var(--sa-purple-400);
        color: #fff;
      }
    }
  }

  &.green {
    background-color: #fff;

    .highlighted-text p {
      background-color: var(--sa-green-200);
      color: var(--sa-text-main);
    }

    .activity-marker {
      fill: var(--sa-green-400);
    }

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

    &.highlight {
      background-color: var(--sa-green-200);

      .highlighted-text p {
        background-color: var(--sa-green-400);
        color: #fff;
      }
    }
  }

  &.orange {
    background-color: #fff;

    .highlighted-text p {
      background-color: var(--sa-primary-200);
      color: var(--sa-text-main);
    }

    .activity-marker {
      fill: var(--sa-primary);
    }

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

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

    &.highlight {
      background-color: var(--sa-primary-200);

      .highlighted-text p {
        background-color: var(--sa-primary);
        color: #fff;
      }
    }
  }

  &.pink {
    background-color: #fff;

    .highlighted-text p {
      background-color: var(--sa-pink-200);
      color: var(--sa-text-main);
    }

    .activity-marker {
      fill: var(--sa-pink-400);
    }

    &.highlight {
      background-color: var(--sa-pink-200);

      .highlighted-text p {
        background-color: var(--sa-pink-400);
        color: #fff;
      }
    }
  }

  &.white {
    background-color: #fff;

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

  &.highlight {
    border: none;

    .lower-left-corner {
      &.dot-text {
        .dot {
          background-color: var(--sa-green-400);
        }
      }
    }
  }
}